자바스크립트 배열 완벽 가이드

자바스크립트 배열 쉽게 마스터하기

이 포스트에서는 자바스크립트 배열의 기초부터 고급 사용법까지 자세히 다룹니다. 초보자와 중급자를 위해 배열 생성, 조작, 반복, 그리고 고급 활용법을 예제와 함께 설명합니다.

배열이란?

자바스크립트 배열은 여러 값을 순서대로 저장하는 자료구조입니다. 각 값(요소)은 0부터 시작하는 인덱스로 접근할 수 있습니다. 예를 들어, 과일 목록을 배열로 만들 수 있습니다:

let fruits = ["사과", "오렌지", "배"];
console.log(fruits[0]); // 출력: "사과"

배열은 다양한 데이터 타입(문자열, 숫자, 객체 등)을 혼합해 저장할 수 있어 유연합니다.

1. 배열 생성

배열은 다음 방법들로 생성할 수 있습니다:

• 배열 리터럴: 대괄호([])를 사용하는 가장 일반적인 방법.

let arr = []; // 빈 배열
let fruits = ["사과", "오렌지", "배"];
  

• Array 생성자: new Array()를 사용. 단, 숫자 하나를 넣으면 길이로 인식:

let arr = new Array(2); // [undefined, undefined]
  

• 고급 생성: Array.of와 Array.from으로 특정 상황에서 유용.

let arr = Array.of(1, 2, 3); // [1, 2, 3]
let chars = Array.from("hello"); // ["h", "e", "l", "l", "o"]
  

2. 요소 접근 및 수정

인덱스를 사용해 요소에 접근하거나 수정할 수 있습니다:

let fruits = ["사과", "오렌지", "배"];
console.log(fruits[1]); // "오렌지"
fruits[2] = "포도"; // ["사과", "오렌지", "포도"]

배열은 객체, 함수 등 다양한 타입을 포함할 수 있습니다:

let arr = ["사과", { name: "이보라" }, true, function() { alert("안녕하세요."); }];
console.log(arr[1].name); // "이보라"
arr[3](); // "안녕하세요." 팝업

3. 배열 조작 메서드

배열을 쉽게 조작할 수 있는 주요 메서드는 다음과 같습니다:

• push: 배열 끝에 요소 추가.
• pop: 배열 끝 요소 제거 및 반환.
• unshift: 배열 처음에 요소 추가.
• shift: 배열 처음 요소 제거 및 반환.

예제:

let fruits = ["사과", "오렌지"];
fruits.push("포도"); // ["사과", "오렌지", "포도"]
fruits.pop(); // ["사과", "오렌지"]
fruits.unshift("바나나"); // ["바나나", "사과", "오렌지"]

참고: push, pop은 빠르며, unshift, shift는 요소 이동으로 인해 느릴 수 있습니다.

4. 배열 반복

배열 요소를 순회하는 방법은 여러 가지입니다:

• for 루프: 인덱스 기반, 완전한 제어 가능.

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
  

• for...of: 값에 직접 접근, 간결함.

for (let fruit of fruits) {
  console.log(fruit);
}
  

• forEach: 함수형 접근, 콜백 사용.

fruits.forEach(fruit => console.log(fruit));
  

주의: for...in은 객체용으로 설계되었으며, 배열에서는 비효율적이므로 사용하지 마세요.

5. 변환 메서드

배열을 변환하는 강력한 메서드들:

• map: 각 요소 변환, 새 배열 반환.

let numbers = [1, 2, 3];
let doubled = numbers.map(x => x * 2); // [2, 4, 6]
  

• filter: 조건에 맞는 요소만 새 배열로.

let even = numbers.filter(x => x % 2 === 0); // [2]
  

• reduce: 배열을 단일 값으로 축약.

let sum = numbers.reduce((acc, curr) => acc + curr, 0); // 6
  

6. 다차원 배열과 객체 배열

배열 안에 배열을 넣어 다차원 배열을 만들 수 있습니다:

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];
console.log(matrix[1][1]); // 5

객체 배열은 복잡한 데이터를 저장하는 데 유용합니다:

let users = [{ name: "김철수" }, { name: "이영희" }];
console.log(users[0].name); // "김철수"

7. 실습 예제

다음은 배열을 활용한 실습 예제입니다:

• 배열 복사: 참조 문제를 이해하세요.

let fruits = ["사과", "오렌지"];
let copy = fruits; // 같은 배열 참조
copy.push("포도");
console.log(fruits); // ["사과", "오렌지", "포도"]
let realCopy = [...fruits]; // 실제 복사
  

• 최대 부분합: 연속된 부분 배열의 최대 합 계산.

function getMaxSubSum(arr) {
  let maxSum = 0;
  let partialSum = 0;
  for (let item of arr) {
    partialSum += item;
    maxSum = Math.max(maxSum, partialSum);
    if (partialSum < 0) partialSum = 0;
  }
  return maxSum;
}
console.log(getMaxSubSum([-1, 2, 3, -9])); // 5 (2 + 3)
  

8. 모범 사례와 주의점

• 희소 배열: 배열에 빈칸(예: [1, , 3])은 피하세요. 성능과 가독성에 영향을 줍니다.
• 성능: push, pop은 빠르며, unshift, shift는 느릴 수 있습니다.
• 불변성: map, filter 등은 원본 배열을 변경하지 않아 안전합니다.

결론

자바스크립트 배열은 리스트 데이터를 다루는 강력한 도구입니다. 이 가이드를 통해 배열 생성, 조작, 반복, 변환을 익히고, 실습을 통해 실제로 활용해보세요. 더 궁금한 점이 있다면 댓글로 질문해주세요!