JavaScript 배열 반복 처리: 다양한 방법과 활용 - 좋은공간 좋은집

JavaScript에서 배열은 데이터를 관리하는 기본적인 자료구조 중 하나입니다. 배열의 요소를 처리하거나 변환하기 위해 반복(iteration)은 매우 중요한 개념입니다. JavaScript는 배열을 반복하는 다양한 메서드를 제공하며, 각각의 메서드는 특정 상황에 따라 유용하게 사용할 수 있습니다. 이 글에서는 JavaScript에서 배열을 반복하는 다양한 메서드를 소개하고, 그 활용 방법을 살펴보겠습니다.

1. for 루프: 전통적인 배열 반복

JavaScript에서 배열을 반복하는 가장 기본적인 방법은 for 루프입니다. for 루프는 배열의 인덱스를 기반으로 요소를 반복할 수 있으며, 간단한 반복 작업에 유용합니다.

const fruits = ['apple', 'banana', 'cherry'];

for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}
// 결과: 'apple', 'banana', 'cherry'

for 루프는 배열의 길이(fruits.length)만큼 반복하며, 각 요소에 순차적으로 접근할 수 있습니다. 전통적인 방법이지만, 최근에는 더 간결한 반복 메서드들이 많이 사용됩니다.

2. forEach(): 배열의 각 요소에 대해 함수 실행

forEach() 메서드는 배열의 모든 요소에 대해 주어진 함수를 한 번씩 실행하는 반복 메서드입니다. 코드가 간결해지고, 매번 배열의 길이를 확인할 필요가 없어 편리합니다.

const fruits = ['apple', 'banana', 'cherry'];

fruits.forEach((fruit, index) => {
    console.log(`${index}: ${fruit}`);
});
// 결과: '0: apple', '1: banana', '2: cherry'

위 코드에서는 forEach()를 사용해 각 요소와 그 인덱스를 출력하고 있습니다. forEach()는 배열의 요소를 변경하지 않고 단순히 처리할 때 많이 사용됩니다.

3. map(): 배열을 변환하여 새 배열 생성

map() 메서드는 배열의 각 요소를 변환하여 새로운 배열을 반환합니다. 기존 배열은 변경되지 않으며, 각 요소에 대한 변환 작업이 필요할 때 유용하게 사용됩니다.

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

// 배열의 각 요소를 제곱한 새로운 배열 생성
const squares = numbers.map(num => num * num);
console.log(squares);  // 결과: [1, 4, 9, 16, 25]

위 예제에서는 map() 메서드를 사용해 배열의 각 숫자를 제곱한 새로운 배열을 생성했습니다. 기존 배열은 유지되며, 변환된 결과를 새로운 배열로 반환합니다.

4. filter(): 조건에 맞는 요소로 새 배열 생성

filter() 메서드는 배열의 각 요소를 조건에 따라 필터링한 후, 조건을 만족하는 요소들로 새 배열을 반환합니다.

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

// 짝수만 필터링하여 새 배열 생성
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens);  // 결과: [2, 4]

위 코드에서는 filter() 메서드를 사용해 짝수만 필터링한 새로운 배열을 반환했습니다. 배열에서 특정 조건에 맞는 요소만 추출할 때 매우 유용합니다.

5. reduce(): 배열을 누적하여 단일 값으로 축소

reduce() 메서드는 배열의 각 요소를 누적(accumulate)하여 하나의 값을 반환합니다. 이 메서드는 배열의 합계, 평균, 최대값 등의 값을 계산할 때 자주 사용됩니다.

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

// 배열의 합계 계산
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum);  // 결과: 15

위 예제에서는 reduce()를 사용하여 배열의 모든 숫자를 더해 합계를 계산했습니다. 첫 번째 인자는 누적 값(accumulator), 두 번째 인자는 현재 요소(currentValue)입니다.

6. some()와 every(): 조건 충족 여부 확인

some() 메서드는 배열의 요소 중 하나라도 주어진 조건을 만족하는지 확인하며, 만족하면 true를 반환합니다. 반면 every()는 배열의 모든 요소가 조건을 충족하는지 여부를 확인합니다.

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

// 배열 중 하나라도 짝수인지 확인
const hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven);  // 결과: true

// 배열의 모든 요소가 양수인지 확인
const allPositive = numbers.every(num => num > 0);
console.log(allPositive);  // 결과: true

위 예제에서는 some()을 사용해 배열에 하나라도 짝수가 있는지 확인하고, every()를 사용해 모든 요소가 양수인지 확인했습니다.

7. for...of: 배열 요소 반복

for...of 루프는 배열의 모든 요소를 반복할 수 있는 간결한 구문을 제공합니다. 인덱스 대신 요소 자체에 집중하여 반복 작업을 수행할 때 유용합니다.

const fruits = ['apple', 'banana', 'cherry'];

for (const fruit of fruits) {
    console.log(fruit);
}
// 결과: 'apple', 'banana', 'cherry'

for...of는 간단하게 배열의 요소에 접근할 수 있으며, 반복 작업을 간결하게 처리할 수 있습니다.

8. for...in: 배열의 인덱스를 반복

for...in 루프는 배열의 인덱스를 반복합니다. 배열의 인덱스를 기반으로 작업을 수행할 때 유용하지만, 배열 요소 자체를 반복할 때는 for...of를 사용하는 것이 더 적합합니다.

const fruits = ['apple', 'banana', 'cherry'];

for (const index in fruits) {
    console.log(`${index}: ${fruits[index]}`);
}
// 결과: '0: apple', '1: banana', '2: cherry'

for...in은 배열의 인덱스에 접근할 수 있는 구문을 제공합니다. 하지만 객체와 배열을 구분할 때 주의가 필요하며, 배열의 요소에 접근할 때는 forEach나 for...of를 주로 사용하는 것이 좋습니다.

결론

JavaScript에서 배열을 반복하는 다양한 방법은 각기 다른 상황에서 유용하게 사용할 수 있습니다. forEach()는 간단한 반복에, map()과 filter()는 변환과 필터링에 적합하며, reduce()는 배열을 하나의 값으로 축소하는 데 매우 유용합니다. 이외에도 some(), every(), for...of와 같은 반복 메서드를 잘 활용하면 배열 데이터를 더욱 효율적으로 처리할 수 있습니다. 프로젝트의 요구 사항에 맞는 적절한 반복 메서드를 선택하여 최적의 결과를 얻어보세요!