자바스크립트 배열 forEach, filter, map 설명

자바스크립트 배열에서는 내장 메소드를 사용하여 복잡한 반복 작업을 편리하게 처리할 수 있습니다. 이번 포스팅에서는 대표적인 메소드인 forEach, filter, map의 특징과 사용 방법에 대해 알아보도록 하겠습니다.

• forEach: 배열 요소를 하나씩 돌며 작업을 수행하며 리턴 값은 없음
• filter: 조건에 맞는 요소만 필터링하여 새로운 배열로 리턴
• map: 배열 요소를 하나씩 돌며 작업을 수행하고 새로운 배열로 리턴

forEach

forEach는 각 배열 요소를 하나씩 돌며 작업을 수행할 때 사용합니다. 별도의 리턴 값은 없습니다. 다음과 같이 각 배열 요소를 console.log()로 찍어볼 수 있습니다.

const fruits = ["banana", "apple", "orange"];

function showFruits(fruit){
    console.log(fruit) // "banana", "apple", "orange"
}

fruits.forEach(showFruits)

이름에서 알 수 있는 것처럼 각 요소에 대해(for each) 작업을 수행하는 배열 메소드입니다.

filter

filter는 배열 요소를 특정 조건에 맞게 필터링하고 새로운 배열을 리턴하는 메소드입니다. 아래의 코드는 banana를 제외하고 다른 과일들을 담은 배열을 리턴하는 코드입니다.

const fruits = ["banana", "apple", "orange"];

function excludeFruit(fruit){
    return fruit !== "banana" // ["apple", "orange"]
}

fruits.filter(excludeFruit);

이는 다음과 같이 화살표 함수로도 작성할 수 있습니다. 결과는 위와 동일합니다.

const fruits = ["banana", "apple", "orange"];

fruits.filter((fruit) => fruit !== "banana"); // ["apple", "orange"]

map

map은 배열 요소에 특정 작업을 진행하고 해당 결괏값을 새로운 배열로 리턴하는 데 사용합니다. map 메소드는 각 요소를 함수의 연산과 매핑해줍니다.

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

const doubleNumbers = numbers.map(number => number * 2); 
console.log(doubleNumbers); // [2, 4, 6, 8]