[javascript] 자바스크립트 forEach, map, filter, find 배열 메소드 사용 예제

자바스크립트에는 배열을 돌며 값을 처리할 수 있도록 도와주는 기능이 있습니다. 단순히 for 루프를 사용하여 각각의 배열 값을 처리할 수도 있지만 사용 목적에 따라 적절한 배열 메소드를 사용하는게 좋습니다.

[].forEach()

가장 기본적인 배열 메소드로써 for 루프와 동일한 기능을 합니다. 파라미터로 현재 배열값과 인덱스를 받을 수 있습니다.

const numberList = [1, 2, 3, 4, 5, 6, 7, 8, 9];

numberList.forEach((item, index) => {
    console.log(item, index);
});

forEach()

for 루프보다 깔끔하게 배열 값을 처리할 수 있습니다.

[].map()

map 메소드는 모든 요소를 돌며 일괄적으로 요소들을 변경하는 기능을 합니다. 파라미터는 forEach와 동일합니다.

const numberList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const poweredList = numberList.map((item, index) => {
    return item*item;
});

console.log(poweredList);

map()

각각의 배열요소에 일괄적으로 어떤 작업을 하여 리턴하면 그 작업 값의 목록이 새로 생성됩니다.

[].filter()

filter 메소드는 모든 항목을 검사해 특정 조건에 부합하는지 판단을 하여 배열의 요소를 필터하는 기능을 합니다. 파라미터는 map과 동일합니다.

const numberList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const filteredList = numberList.filter((item, index) => {
    return item >= 5;
});

console.log(filteredList);

filter()

콜백함수에서는 boolean 값을 리턴해야합니다.

[].find()

find 메소드는 조건에 부합하는 값을 하나만 찾는 기능을 합니다. 파라미터는 filter와 동일합니다.

const numberList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const found = numberList.find((item, index) => {
    console.log('index:', index, 'item:', item);
    return item > 2;
});

console.log('found:', found);

find()

모든 배열을 돌지 않고 원하는 값을 찾았으면 루프를 종료합니다.

관련 글

자바스크립트 별점 매기기 (star rating)