자바스크립트 배열 완전 정복: 생성부터 활용까지

자바스크립트에서 배열(Array) 은 데이터를 효율적으로 관리하고 조작하는 데 필수적인 데이터 구조입니다. 배열을 사용하면 데이터를 순서대로 저장하고, 다양한 내장 메서드를 활용하여 원하는 방식으로 가공할 수 있습니다. 이번 블로그 포스트에서는 배열의 생성 방법부터 주요 메서드 활용까지 깊이 있는 설명과 실전 예제를 제공합니다.

배열을 제대로 이해하면 자바스크립트 코드의 가독성이 좋아지고, 효율적인 데이터 처리 능력을 갖출 수 있습니다. 이제 배열의 개념부터 활용법까지 차근차근 살펴보겠습니다.

---

🔍 배열이란 무엇인가?

배열(Array) 은 여러 개의 데이터를 하나의 변수에 저장할 수 있도록 하는 리스트 형태의 데이터 구조입니다. 배열은 각 요소를 인덱스(index) 를 통해 관리하며, 0부터 시작하는 숫자 인덱스를 사용해 데이터를 쉽게 접근할 수 있습니다.

예를 들어, fruits라는 배열에 과일 이름을 저장하면 아래와 같이 데이터를 관리할 수 있습니다.

const fruits = ['사과', '바나나', '오렌지'];

console.log(fruits[0]); // '사과'
console.log(fruits[1]); // '바나나'
console.log(fruits[2]); // '오렌지'

자바스크립트의 배열은 유연한 데이터 구조로, 다양한 타입의 데이터를 동시에 저장할 수도 있습니다.

const mixedArray = [1, 'Hello', true, { name: '철수' }, [1, 2, 3]];
console.log(mixedArray);

---

🛠️ 배열 생성 방법

배열을 생성하는 방법은 여러 가지가 있으며, 각각의 방법은 특정한 상황에서 유용하게 사용될 수 있습니다.

✅ 1. 리터럴 표기법 (Array Literal)

배열을 가장 직관적으로 생성하는 방법으로, 대괄호 []를 사용하여 선언합니다.

const fruits = ['사과', '바나나', '오렌지'];

장점:

• 코드가 간결하고 가독성이 좋음
• 가장 일반적으로 사용됨

✅ 2. Array 생성자 (Array Constructor)

new Array()를 사용하여 배열을 생성할 수도 있습니다.

const emptyArray = new Array();  // 빈 배열 생성
const numberArray = new Array(5);  // 길이가 5인 빈 배열

주의할 점:

const test = new Array(3);
console.log(test); // [empty × 3] (3개의 undefined 요소가 포함된 배열)

단순히 숫자 하나를 넣으면 그 숫자 크기의 빈 배열이 생성되므로, 배열에 요소를 직접 넣을 경우 리터럴 방식을 사용하는 것이 좋습니다.

const test = new Array(1, 2, 3);
console.log(test); // [1, 2, 3]

---

📌 배열 조작 메서드

배열을 다룰 때 가장 많이 사용하는 추가, 삭제, 변환, 검색 관련 주요 메서드를 살펴보겠습니다.

🔹 1. 요소 추가 및 제거

배열의 요소를 동적으로 추가하거나 제거할 수 있는 메서드입니다.

push() – 배열 끝에 요소 추가

const numbers = [1, 2, 3];
numbers.push(4);
console.log(numbers); // [1, 2, 3, 4]

pop() – 배열의 마지막 요소 제거 및 반환

const last = numbers.pop();
console.log(last); // 4
console.log(numbers); // [1, 2, 3]

shift() – 배열의 첫 번째 요소 제거

const first = numbers.shift();
console.log(first); // 1
console.log(numbers); // [2, 3]

unshift() – 배열의 앞부분에 요소 추가

numbers.unshift(0);
console.log(numbers); // [0, 2, 3]

---

🔹 2. 특정 범위 선택 및 조작

slice() – 배열의 특정 부분 복사

const sliced = numbers.slice(1);
console.log(sliced); // [2, 3] (첫 번째 요소 제외)

splice() – 배열의 특정 위치에서 요소 추가 및 삭제

• 요소 삭제:

  numbers.splice(1, 1);
  console.log(numbers); // [0, 3] (index=1 요소 삭제)

• 요소 추가:

  numbers.splice(1, 0, 99);
  console.log(numbers); // [0, 99, 3] (index=1 위치에 99 추가)

---

🔹 3. 배열 변환 및 검색

map() – 배열의 각 요소를 변환하여 새로운 배열 생성

const squared = numbers.map(num => num * num);
console.log(squared); // [0, 9801, 9]

filter() – 특정 조건을 만족하는 요소만 걸러서 새로운 배열 생성

const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [0]

reduce() – 배열 요소를 하나의 값으로 축약

const sum = numbers.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 102

---

🎯 실전 예제: 학생 성적 관리 프로그램

배열과 객체를 활용하여 학생들의 성적을 관리하는 프로그램을 만들어 보겠습니다.

const grades = [];

// 성적 추가하기
grades.push({ name: '철수', score: 85 });
grades.push({ name: '영희', score: 90 });
grades.push({ name: '민수', score: 78 });

console.table(grades);

// 평균 점수 계산하기
const totalScore = grades.reduce((sum, student) => sum + student.score, 0);
const averageScore = totalScore / grades.length;
console.log(`평균 점수는 ${averageScore}점 입니다.`);

이 코드를 실행하면 학생들의 성적을 배열에 저장하고, 평균 점수를 계산할 수 있습니다.

---

🏁 결론

배열은 자바스크립트에서 가장 중요한 데이터 구조 중 하나로, 효율적인 데이터 저장과 조작이 가능합니다.

• 리터럴 표기법을 기본으로 사용하고,
• push, pop, splice, map, filter, reduce 등의 메서드를 적절히 활용하면
• 데이터를 효과적으로 관리하는 코드 작성이 가능합니다.