[자바스크립트 문법] Array.prototype.map(), Array.prototype.reduce(), Array.prototype.filter()

🐸 map()

• 주어진 callback 함수를 배열 내의 모든 요소 각각에 대해 호출한 결과를 모아, 새로운 배열을 반환한다.
• callback 함수는 다음의 3가지 인수를 가진다.
  • currentValue 처리할 배열의 현재 요소
  • index 처리할 현재 요소의 인덱스
  • array map()을 호출한 배열
• callback 함수는 배열 값이 들어있는 인덱스에 대해서만 호출된다. 따라서 값이 삭제되거나 아직 값이 할당/정의되지 않은 인덱스에 대해서는 호출되지 않는다.
• 원형배열의 값을 변형하지 않는다.
• map이 시작한 이후 배열에 추가한 요소들은 callback을 호출하지 않는다.

🦄 reduce()

• 주어진 리듀서 함수를 배열의 각 요소에 대해 실행하고, 하나의 결과값을 반환한다.
• 반환값: 누적 계산의 결과 값
• callback 함수는 다음의 4가지 인수를 받는다.
  • accumulator initialValue를 명시한 경우, accumlator == initialValue. initialValue를 설정하지 않은 경우, accumlator == 배열의 첫 번째 값
  • currentValue initialValue를 명시한 경우, currentValue == 배열의 첫 번째 값. initialValue를 설정하지 않은 경우, currentValue == 배열의 두 번째 값
  • currentIndex
  • array
• 두번째 인수 initialValue로 callback의 최초 호출에서 첫번째 인수에 값을 지정할 수 있다. 배열이 비어있는데 initialValue도 제공하지 않으면 TypeError가 발생한다.

ex) reduce()의 두 번째 인수로 초기값을 제공하지 않은 경우

[1, 2, 4, 7, 9].reduce(function(accumulator, currentValue, currentIndex, array) {
    return accumulator + currentValue;
});

// [1, 2, 4, 7, 9].reduce( (prev, curr) => prev + curr ); 위 코드와 같은 결과를 반환하는 화살표 함수

callback은 4번 호출되며, 각 호출의 인수와 반환값은 다음과 같다.

callback	accumulator	currentValue	currentIndex	array	반환 값
1번째 호출	1	2	1	[1, 2, 4, 7, 9]	3
2번째 호출	3	4	2	[1, 2, 4, 7, 9]	7
3번째 호출	7	7	3	[1, 2, 4, 7, 9]	14
4번째 호출	14	9	4	[1, 2, 4, 7, 9]	23

reduce()가 반환하는 값은 마지막 콜백 호출의 반환값 23이다.

ex) reduce()의 두 번째 인수로 초기값을 제공하는 경우

[1, 2, 4, 7, 9].reduce(function(accumulator, currentValue, currentIndex, array) {
    return accumulator + currentValue;
}, 10);

// [1, 2, 4, 7, 9].reduce((prev, curr) => prev + curr, 10); 위 코드와 같은 결과를 반환하는 화살표 함수

callback은 5번 호출되며, 각 호출의 인수와 반환값은 다음과 같다.

callback	accumulator	currentValue	currentIndex	array	반환 값
1번째 호출	10	1	0	[1, 2, 4, 7, 9]	11
2번째 호출	11	2	1	[1, 2, 4, 7, 9]	13
3번째 호출	13	4	2	[1, 2, 4, 7, 9]	17
4번째 호출	17	7	3	[1, 2, 4, 7, 9]	24
5번째 호출	24	9	4	[1, 2, 4, 7, 9]	33

reduce()가 반환하는 값은 마지막 콜백 호출의 반환값 33이다.

🐾 filter()

• 주어진 callback 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.
• callback 함수는 다음의 3가지 인수를 가진다.
  • element 처리할 배열의 현재 요소
  • index 처리할 현재 요소의 인덱스
  • array filter()을 호출한 배열
• 반환 값: 테스트를 통과한 요소로 이루어진 새로운 배열. 테스트를 통과한 요소가 없다면 빈 배열을 반환

Ex. 12이하의 모든 요소가 걸러진 배열 생성

function BigEl(value) {
  return value >= 12;
}
var filtered = [34, 1, 3, 9, 29].filter(BigEl);
// 리턴값: Array [34, 29]


var filtered = [34, 1, 3, 9, 29].filter(function(value) {
  return value >= 12;
});
// 리턴값: Array [34, 29]


var filtered = [34, 1, 3, 9, 29].filter((value) => value >= 12);
// 리턴값: Array [34, 29]

 

---

출처

https://tinyurl.com/2eyy65bs

Array.prototype.map() - JavaScript | MDN

https://tinyurl.com/2nrad7ku

Array.prototype.reduce() - JavaScript | MDN

https://tinyurl.com/2mn4zys2

Array.prototype.filter() - JavaScript | MDN