자바스크립트 배열 완전 정복: 기본 구조와 주요 메서드 사용법

배열은 자바스크립트에서 데이터를 순차적으로 저장하고 처리하는 데 가장 많이 사용되는 구조입니다. 이 글에서는 배열의 선언, 접근, 반복문 사용, 주요 메서드(push, pop, map, filter, reduce 등)까지 실전 예제와 함께 배열을 효율적으로 다루는 방법을 상세히 설명합니다.

배열은 데이터를 다루는 자바스크립트의 핵심 도구

프로그래밍에서 데이터를 저장하고 처리하기 위한 가장 기본적인 자료구조 중 하나가 배열입니다. 자바스크립트에서 배열은 객체(Object)의 일종으로, 숫자 인덱스를 통해 값을 순차적으로 저장하며, 다양한 형태의 데이터를 유연하게 다룰 수 있도록 설계되어 있습니다. 특히 자바스크립트 배열은 동적 크기를 가지며, 다양한 데이터 타입을 혼합하여 저장할 수 있다는 점에서 유연성과 확장성이 뛰어납니다. 배열을 잘 다루는 것은 곧 자바스크립트의 데이터를 잘 다룬다는 말과도 같습니다. 배열은 리스트, 테이블, 목록 등의 구조를 표현할 때 기본이 되며, 웹 개발에서 사용자 입력을 저장하거나, 서버에서 받아온 데이터를 출력하거나, 반복문을 통해 다수의 항목을 처리할 때 거의 필수적으로 사용됩니다. 자바스크립트에서는 배열을 다루기 위한 다양한 내장 메서드를 제공하며, 이를 활용하면 반복문 없이도 효율적으로 데이터를 변형하거나 필터링, 정렬, 집계할 수 있습니다. 대표적인 배열 메서드에는 push, pop, shift, unshift, forEach, map, filter, reduce, find, includes 등이 있으며, 각각은 목적에 따라 적절하게 선택해서 사용할 수 있습니다. 이 글에서는 자바스크립트 배열의 기본 구조와 생성 방법부터 시작하여, 자주 사용되는 배열 메서드의 특징과 사용 예시, 그리고 실전에서 어떻게 배열을 활용할 수 있는지를 단계적으로 설명함으로써, 배열에 대한 개념을 명확히 하고 실전 활용 능력을 기를 수 있도록 돕고자 합니다.

배열 선언부터 고급 메서드 활용까지 완벽 가이드

1. 배열 생성과 접근
배열은 대괄호 []를 사용하여 생성하며, 각 요소는 쉼표(,)로 구분합니다.

const fruits = ["사과", "바나나", "오렌지"];
console.log(fruits[0]); // "사과"
console.log(fruits.length); // 3

2. 요소 추가 및 제거
- push(): 배열 끝에 요소 추가 - pop(): 배열 끝 요소 제거 - unshift(): 배열 앞에 요소 추가 - shift(): 배열 앞 요소 제거

let arr = [1, 2, 3];
arr.push(4); // [1, 2, 3, 4]
arr.pop();   // [1, 2, 3]
arr.unshift(0); // [0, 1, 2, 3]
arr.shift();    // [1, 2, 3]

3. 반복 처리: forEach
각 요소에 대해 반복 작업을 수행할 수 있습니다.

fruits.forEach(function(item, index) {
  console.log(index + ": " + item);
});

4. 배열 변환: map
기존 배열을 기반으로 새로운 배열을 생성합니다.

const prices = [100, 200, 300];
const vatPrices = prices.map(price => price * 1.1);
console.log(vatPrices); // [110, 220, 330]

5. 필터링: filter
조건을 만족하는 요소만을 추출해 새 배열을 만듭니다.

const numbers = [1, 2, 3, 4, 5];
const even = numbers.filter(n => n % 2 === 0);
console.log(even); // [2, 4]

6. 집계: reduce
배열의 모든 요소를 하나의 값으로 축약합니다.

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

7. 기타 유용한 메서드
- find(): 조건을 만족하는 첫 번째 요소 반환 - includes(): 특정 값 포함 여부 확인 - indexOf(): 특정 요소의 인덱스 반환 (없으면 -1) - sort(): 배열 정렬 - reverse(): 배열 뒤집기

console.log(fruits.includes("바나나")); // true
console.log(fruits.indexOf("오렌지")); // 2

배열은 참조형 데이터이므로, 복사나 비교 시 주의가 필요합니다. 얕은 복사를 위해 slice(), spread syntax([...array]) 등을 사용할 수 있으며, 깊은 복사는 lodash 등의 라이브러리를 이용하는 것이 일반적입니다.

배열을 자유자재로 다루는 능력은 자바스크립트의 기본기

배열은 자바스크립트에서 가장 핵심적인 데이터 구조 중 하나로, 다양한 데이터를 저장하고 처리하는 데 매우 강력한 도구입니다. 배열을 얼마나 잘 다루느냐에 따라 코드의 간결함, 실행 성능, 유지보수의 용이성이 달라질 수 있습니다. 단순한 배열 선언과 반복문을 넘어서, map(), filter(), reduce() 같은 고차 함수의 사용은 자바스크립트를 함수형 언어처럼 활용할 수 있는 강력한 방법이기도 합니다. 특히 자바스크립트의 비동기 처리, API 호출, 이벤트 기반 프로그래밍 등 다양한 영역에서 배열은 필수적으로 사용되며, 실무에서는 배열을 조작하는 다양한 로직을 효율적으로 구성할 수 있어야 합니다. 예를 들어 서버에서 받은 JSON 데이터를 클라이언트에 렌더링하기 위해서는 대부분 배열의 순회 및 가공 작업이 필요하고, 이를 얼마나 효율적으로 처리하느냐가 곧 개발자의 생산성을 결정짓기도 합니다. 또한 배열은 참조형이라는 특성상 직접 비교하거나 복사할 때 실수를 유발할 수 있으므로, 얕은 복사, 깊은 복사, 메모리 공유 등의 개념도 함께 이해해야 안정적인 코드를 작성할 수 있습니다. 결론적으로 배열은 자바스크립트 학습의 기초이자 실전 활용의 핵심입니다. 배열을 구조적으로 이해하고, 다양한 내장 메서드를 목적에 맞게 자유롭게 활용하는 능력은 모든 자바스크립트 개발자에게 반드시 요구되는 기본기라 할 수 있습니다.