JavaScript Arrays: 배열의 개념과 활용 방법 - 좋은공간 좋은집

JavaScript에서 배열(Array)은 여러 개의 값을 하나의 변수로 관리할 수 있는 중요한 데이터 타입입니다. 배열을 사용하면 다양한 데이터를 쉽게 그룹화하고, 데이터를 효율적으로 처리할 수 있습니다. 이 글에서는 JavaScript 배열의 기본 개념과 주요 배열 메서드, 그리고 이를 활용하는 방법에 대해 알아보겠습니다.

JavaScript 배열이란?

배열은 데이터를 순서대로 저장할 수 있는 리스트입니다. 배열의 각 요소는 인덱스로 구분되며, 0부터 시작합니다. 배열은 다양한 데이터 타입을 담을 수 있으며, JavaScript에서 배열은 동적으로 크기를 변경할 수 있습니다.

let fruits = ["apple", "banana", "cherry"];
console.log(fruits);  // 결과: ["apple", "banana", "cherry"]
console.log(fruits[0]);  // 결과: "apple" (배열의 첫 번째 요소)

위 예제에서는 세 개의 과일을 배열로 저장하고, 인덱스를 사용해 특정 요소에 접근할 수 있습니다. fruits[0]은 배열의 첫 번째 요소인 "apple"을 가리킵니다.

배열의 주요 메서드

JavaScript 배열은 다양한 메서드를 제공하여 데이터를 쉽게 추가, 삭제, 수정 및 탐색할 수 있습니다. 자주 사용되는 배열 메서드를 살펴보겠습니다.

1. push()와 pop(): 배열의 끝에 요소 추가 및 제거

push() 메서드는 배열의 끝에 새로운 요소를 추가하고, pop() 메서드는 배열의 마지막 요소를 제거합니다.

let fruits = ["apple", "banana"];

fruits.push("cherry");
console.log(fruits);  // 결과: ["apple", "banana", "cherry"]

fruits.pop();
console.log(fruits);  // 결과: ["apple", "banana"]

push()는 배열의 끝에 요소를 추가하고, pop()은 마지막 요소를 제거하여 배열의 크기를 조정합니다.

2. unshift()와 shift(): 배열의 앞에 요소 추가 및 제거

unshift()는 배열의 맨 앞에 새로운 요소를 추가하고, shift()는 배열의 첫 번째 요소를 제거합니다.

let fruits = ["banana", "cherry"];

fruits.unshift("apple");
console.log(fruits);  // 결과: ["apple", "banana", "cherry"]

fruits.shift();
console.log(fruits);  // 결과: ["banana", "cherry"]

이 메서드를 사용하면 배열의 앞부분에 쉽게 요소를 추가하거나 제거할 수 있습니다.

3. concat(): 배열 병합

concat() 메서드는 두 개 이상의 배열을 병합하여 새로운 배열을 만듭니다. 기존 배열은 수정되지 않습니다.

let fruits = ["apple", "banana"];
let vegetables = ["carrot", "tomato"];

let food = fruits.concat(vegetables);
console.log(food);  // 결과: ["apple", "banana", "carrot", "tomato"]

concat()을 사용하면 배열을 쉽게 결합할 수 있습니다.

4. slice(): 배열 일부 추출

slice() 메서드는 배열의 일부를 추출하여 새로운 배열을 반환합니다. slice()는 원본 배열을 변경하지 않습니다.

let fruits = ["apple", "banana", "cherry", "date"];
let slicedFruits = fruits.slice(1, 3);

console.log(slicedFruits);  // 결과: ["banana", "cherry"]

위 예제에서 slice(1, 3)은 배열의 두 번째와 세 번째 요소를 추출하여 새로운 배열을 만듭니다.

5. splice(): 배열의 요소 추가, 제거 및 교체

splice() 메서드는 배열의 특정 위치에 있는 요소를 제거하거나 새 요소를 추가합니다. splice()는 원본 배열을 수정합니다.

let fruits = ["apple", "banana", "cherry"];

fruits.splice(1, 1, "blueberry");
console.log(fruits);  // 결과: ["apple", "blueberry", "cherry"]

위 예제에서 splice(1, 1, "blueberry")는 배열의 두 번째 요소인 "banana"를 제거하고, 그 자리에 "blueberry"를 추가합니다.

6. forEach(): 배열 요소 순회

forEach() 메서드는 배열의 각 요소에 대해 제공된 함수를 한 번씩 실행합니다. 이를 사용하여 배열 요소를 반복적으로 처리할 수 있습니다.

let fruits = ["apple", "banana", "cherry"];

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

위 코드는 배열의 각 요소와 그 인덱스를 출력합니다.

7. map(): 배열 요소 변환

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

let numbers = [1, 2, 3, 4];
let squaredNumbers = numbers.map(function(num) {
    return num * num;
});

console.log(squaredNumbers);  // 결과: [1, 4, 9, 16]

map()을 사용하여 배열의 모든 요소를 변환하고 새로운 배열을 만들 수 있습니다.

8. filter(): 조건에 맞는 요소 필터링

filter() 메서드는 조건에 맞는 배열의 요소들만 추출하여 새로운 배열을 반환합니다.

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(function(num) {
    return num % 2 === 0;
});

console.log(evenNumbers);  // 결과: [2, 4]

위 예제에서는 배열에서 짝수만을 추출하여 새로운 배열을 만듭니다.

9. find(): 조건에 맞는 첫 번째 요소 찾기

find() 메서드는 배열에서 조건에 맞는 첫 번째 요소를 반환합니다. 조건에 맞는 요소가 없으면 undefined를 반환합니다.

let numbers = [1, 2, 3, 4, 5];
let firstEvenNumber = numbers.find(function(num) {
    return num % 2 === 0;
});

console.log(firstEvenNumber);  // 결과: 2

위 코드에서 find()는 배열에서 첫 번째 짝수를 찾아 반환합니다.

10. reduce(): 배열을 하나의 값으로 축소

reduce() 메서드는 배열의 모든 요소를 하나의 값으로 줄이는 역할을 합니다. 이를 통해 배열의 합계, 평균 등을 쉽게 계산할 수 있습니다.

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(accumulator, currentValue) {
    return accumulator + currentValue;
}, 0);

console.log(sum);  // 결과: 15

위 예제에서는 배열의 모든 요소를 더하여 그 합을 반환합니다.

배열의 길이 확인

배열의 길이를 확인하려면 length 속성을 사용합니다. 배열에 포함된 요소의 개수를 반환합니다.

let fruits = ["apple", "banana", "cherry"];
console.log(fruits.length);  // 결과: 3

결론

JavaScript 배열은 데이터를 효율적으로 저장하고 처리할 수 있는 강력한 도구입니다. 배열에 요소를 추가하거나 삭제하는 기본적인 메서드부터, 배열의 요소를 변환하거나 조건에 따라 필터링하는 고급 메서드까지 다양한 기능을 제공합니다. 이러한 배열 메서드를 잘 활용하면, 데이터를 더 쉽게 관리하고 처리할 수 있습니다. 프로젝트에서 자주 사용되는 배열 메서드를 익히고, 효율적인 코드를 작성해보세요!