[JavaScript] map, reduce, filter 기본 사용법 / 차이

 

 Map

 

Map()을 사용해서 배열의 요소들을 호출하여 새로운 배열을 만들어 냅니다.

 

배열.map((요소, 인덱스, 배열) => { return 요소});

 

 

---

const numbers = [1, 2, 3];

let result = numbers.map((v) => {

  console.log(v);
  
  return v;
  
});

 

 console )

1

2

3

 

result )

[ 1, 2, 3]

 

 

---

const numbers = [1, 2, 3];


const result = numbers.map((value,index,array) =>{
  
  console.log(value,index,array);
  
  return value * 2;
  
});

console.log(result);

 

결과 )

1 0 Array [1, 2, 3] 

2 1 Array [1, 2, 3]

3 2 Array [1, 2, 3]

Array [2, 4, 6]

 

 

 

 Reduce

 

reduce() 를 사용하면 배열의 각 요소를 reducer 함수를 통해서 결과를 반환한다. (결과는 배열이 아니다.) 

 

배열.reduce((누적값, 현재값, 인덱스, 요소) => { return 결과}, 초깃값);

 

---

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

const sumWithInitial = array1.reduce((acc, cur) => {

  console.log(acc, cur);
  
   return acc + cur;
  
});

console.log(sumWithInitial);

 

acc = 누산값 , cur = 현재 요

결과 )

1 2 

3 3

6 4

10

 

 

 Filter

 

Filter를 사용하게 되면 주어진 조건을 통과하는 요소들을 머이 새로운 배열을 만들어 낸다.

 

배열.filter((현재값, 인덱스, 배열) => { return 결과};

 

---

const words = ['apple', 'banana', 'watermelon', 'orange', 'strawberry'];

const result = words.filter(word => word.length > 6);

console.log(result);

 

console )

Array ["watermelon", "strawberry"]