map(), filter(), reduce() js function 정리

map() function

Returns an array in which each of the elements have undergone the callback function being applied

새로운 배열을 return한다

Parameter 정리

• value: 현재 요소
• index: 현재 요소의 인덱스
• array: 받은 array의 값

주로 value만을 가지고 callback 함수를 각 value에 적용하는 형태로 사용한다

const curArray = [1,2,3,4]
const newArray = curArray.map((val, ind, arr) -> {
  console.log(val, ind, arr);
  return val*2;
});

console.log(newArray)

Respective output

1,0, [1,2,3,4]
2,1, [1,2,3,4]
3,2, [1,2,3,4]
4,3, [1,2,3,4]

2,4,6,8

filter() function

Returns a new array in which only the elements that satisfies the condition described in the callback function is returned.

콜백함수에 true를 리턴하는 element들만 포함시킨 새로운 배열을 만들어서 리턴을 해주는 함수이다

const curArray = [1,2,3,4]
const newArray = curArray.filter((val, ind, arr) -> {
  return val%2==0;
});

console.log(newArray)

Respective output

[2,4]

reduce() function

Only has single output based on the callback function being applied to the elements in the array

Parameter 정리

• accumulator: 누적된 결과를 저장하는 파라미터, reduce()를 각 배열의 element마다 수행하며 생기는 값을 임시적으로 보관하는 형태
• currentVal: 현재 요소의 값
• currentInd: 현재 요소의 인덱스 값
• array: 원본 배열 저장 값

const curArray = [1,2,3,4]
const sum = curArray.reduce((acc, cur) -> {
  console.log(acc, cur);
  return acc+cur;
}, 0);

Respective output:

0 1
1 2
3 3
6 4

return: 10

해당 example에서는 두번째 인자에 0을 넣어주어서 accumulator의 초기값을 0으로 설정해두었다. 만약 이를 바꾸고 싶으면

const curArray = [1,2,3,4]
const sum = curArray.reduce((acc, cur) -> {
  console.log(acc, cur);
  return acc+cur;
}, 10);

Respective output:

10 1
11 2
13 3
16 4

return: 20