Javascript - forEach, map, filter의 정의, 차이 및 사용 예시

Javascript의 배열관련 method 중 forEach, map, filter가 있습니다.

각각의 정의와 차이, 예시에 대해 정리합니다.

 

- 각각의 정의 및 차이-

MDN에 기재된 각 method의 정의는 하기와 같습니다.

 

Array.prototype.forEach()

The forEach() method executes a provided function once for each array element.

 

Array.prototype.map()

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

 

Array.prototype.filter()

The filter() method creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided function.

 

상기내용을 간략히 정의하면 하기와 같습니다.

 

1. forEach은 각각의 인자를 주어진 함수에 대입 및 실행합니다. 

2. map은 각각의 인자를 callback 함수에 대입하고, 결과값들로 이루어진 새로운 배열을 생성합니다.

3. filter는 각각의 인자를 주어진 조건식에 대입 및 확인 하고, true인 경우의 결과값들로 이루어진 새로운 배열을 생성합니다.

 

차이점은 하기와 같습니다.

 

1. forEach는 어떠한 배열도 반환하지 않습니다.

2. map은 callback함수를 인자로 받습니다.

3. filter는 조건식이 따라붙습니다.

 

- 사용 예시 - 

우선 for와 forEach의 활용 예시입니다.

동일한 결과 값을 출력하기 위해 각각을 활용하여 소스코드를 작성합니다.

const singers = [
    'Ray Charles',
    'Stevie Wonder',
    'Sisqo',
    'Boyz II Men',
    'Luther Vandross',
    'Brian McKnight',
    'Mariah Carey',
];
 
for (let i = 0; i < singers.length; i++) {
    console.log('for문', singers[i]);
}
 
singers.forEach((singer) => console.log('forEach', singer));

 

하기와 같이 동일한 결과를 얻을 수 있습니다.

 

다음은 map과 filter의 활용 예시입니다.

map의 경우 배열 내 특정 key값으로만 이루어진 새로운 배열을 생성합니다.

filter의 경우 특정 문자열로 시작하는 value값으로 이루어진 새로운 배열을 생성합니다.

const singersNsongs = [
    { singer: 'Ray Charles', song: 'Hit The Road Jack' },
    { singer: 'Stevie Wonder', song: 'Lately' },
    { singer: 'Sisqo', song: 'Incomplete' },
    { singer: 'Boyz II Men', song: 'On bended knee' },
    { singer: 'Luther Vandross', song: 'A house is not a home' },
    { singer: 'Brian McKnight', song: 'One last cry' },
    { singer: 'Mariah Carey', song: 'Hero' },
];
 
const songsFromArray = singersNsongs.map((song) => song.song);
const songsStartsWithO = singersNsongs.filter((song) =>
    song.song.startsWith('O')
);
 
console.log(songsFromArray);
console.log(songsStartsWithO);
 

 

하기와 같은 결과를 얻을 수 있습니다.