JavaScript Array의 이해와 활용

JavaScript는 웹 개발에서 가장 널리 사용되는 언어 중 하나로, 그 중에서도 배열(Array)은 매우 중요한 데이터 구조입니다. 배열은 여러 값을 하나의 변수에 저장할 수 있게 해주는 데이터 구조로, JavaScript에서 매우 유용하게 사용됩니다. 이번 글에서는 JavaScript의 배열에 대해 깊이 있게 살펴보고, 배열을 효과적으로 활용하는 방법에 대해 알아보겠습니다.

JavaScript Array 기본 개념

배열이란 무엇인가?

배열은 여러 값을 순차적으로 저장할 수 있는 변수입니다. 각 값은 인덱스(index)로 구분되며, 인덱스는 0부터 시작합니다. 예를 들어, 다음과 같은 배열이 있다고 가정해 봅시다:

let fruits = ["사과", "바나나", "체리"];

이 배열에서 "사과"는 인덱스 0, "바나나"는 인덱스 1, "체리"는 인덱스 2에 저장됩니다.

배열 생성 방법

JavaScript에서 배열을 생성하는 방법은 여러 가지가 있습니다. 가장 일반적인 방법은 대괄호([])를 사용하는 것입니다.

let numbers = [1, 2, 3, 4, 5];

또는 Array 생성자를 사용할 수도 있습니다.

let numbers = new Array(1, 2, 3, 4, 5);

배열 요소 접근

배열의 특정 요소에 접근하려면 인덱스를 사용하면 됩니다.

let firstFruit = fruits[0]; // "사과"
let secondFruit = fruits[1]; // "바나나"

배열 메서드와 속성

배열의 길이 확인하기

배열의 길이(즉, 요소의 개수)를 확인하려면 length 속성을 사용합니다.

let length = fruits.length; // 3

배열에 요소 추가 및 제거

push와 pop 메서드

push 메서드는 배열의 끝에 하나 이상의 요소를 추가합니다.

fruits.push("포도"); // ["사과", "바나나", "체리", "포도"]

pop 메서드는 배열의 끝에서 하나의 요소를 제거하고, 제거된 요소를 반환합니다.

let lastFruit = fruits.pop(); // "포도"

shift와 unshift 메서드

shift 메서드는 배열의 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다.

let firstFruit = fruits.shift(); // "사과"

unshift 메서드는 배열의 시작 부분에 하나 이상의 요소를 추가합니다.

fruits.unshift("복숭아"); // ["복숭아", "바나나", "체리"]

배열 순회 및 변형

for 루프 사용하기

가장 기본적인 배열 순회 방법은 for 루프를 사용하는 것입니다.

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

forEach 메서드

forEach 메서드는 배열의 각 요소에 대해 제공된 함수를 한 번씩 실행합니다.

fruits.forEach(function(fruit) {
  console.log(fruit);
});

map 메서드

map 메서드는 배열의 각 요소에 대해 제공된 함수를 호출하고, 그 결과를 모아 새로운 배열을 반환합니다.

let upperFruits = fruits.map(function(fruit) {
  return fruit.toUpperCase();
}); // ["복숭아", "바나나", "체리"]

배열 필터링 및 정렬

filter 메서드

filter 메서드는 제공된 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열을 만듭니다.

let longFruits = fruits.filter(function(fruit) {
  return fruit.length > 2;
}); // ["복숭아", "바나나", "체리"]

sort 메서드

sort 메서드는 배열의 요소를 정렬합니다. 기본적으로 문자열 유니코드 코드 포인트 순서로 정렬되지만, 비교 함수를 제공하여 다른 기준으로 정렬할 수도 있습니다.

let sortedFruits = fruits.sort(); // ["바나나", "복숭아", "체리"]

숫자 배열을 정렬할 때는 비교 함수를 제공해야 합니다.

let numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return a - b;
}); // [1, 2, 3, 4, 5]

배열의 고급 사용법

배열 병합

두 개 이상의 배열을 병합하려면 concat 메서드를 사용합니다.

let moreFruits = ["망고", "파인애플"];
let allFruits = fruits.concat(moreFruits); // ["바나나", "복숭아", "체리", "망고", "파인애플"]

배열의 중첩

배열 안에 배열을 포함시킬 수 있습니다. 이를 통해 다차원 배열을 만들 수 있습니다.

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

배열에서 특정 요소 찾기

indexOf 메서드는 배열에서 특정 요소의 첫 번째 인덱스를 반환합니다. 요소가 없으면 -1을 반환합니다.

let index = fruits.indexOf("체리"); // 2

find 메서드는 제공된 테스트를 만족하는 첫 번째 요소를 반환합니다.

let found = fruits.find(function(fruit) {
  return fruit.startsWith("바");
}); // "바나나"

배열의 일부 추출

slice 메서드는 배열의 일부를 추출하여 새로운 배열을 만듭니다.

let someFruits = fruits.slice(1, 3); // ["바나나", "복숭아"]

splice 메서드는 배열의 요소를 제거하고, 필요에 따라 새로운 요소를 추가합니다.

fruits.splice(1, 1, "오렌지"); // ["복숭아", "오렌지", "체리"]

결론

JavaScript의 배열은 매우 강력하고 유연한 데이터 구조입니다. 배열을 효과적으로 활용하면 데이터 관리와 조작이 훨씬 수월해집니다. 다양한 배열 메서드를 잘 이해하고 활용하면, 복잡한 데이터 처리 작업도 쉽게 수행할 수 있습니다.