react-map,reduce

kyj2471·2020년 12월 26일
0

WECODE 15기

목록 보기
21/28

map, reduce

이번 velog또한 1차 프로젝트를 하면서 너무 많이 쓰이고 너무 중요하지만 생각보다 개념이 간단한 것중 map과 reduce를 뽑을것 같다.
그러한 이유로 이번에는 map과 reduce를 자세히 알아보려고 한다.

map

map이란 함수는 간단히 설명하면 반복문을 돌면서 배열안에 요소를 1대1로 찍어내는 것입니다.
그래서 어떻게 짝지어 줄 것인가에 대한 함수를 메서드의 인자로 넣어주면 됩니다.
기본 구조는 array.map((element, index, arr) => {return element});
가 됩니다. 바로 코드를 봅시다.

const myFirstTeam = [ 영재, 성훈, 태현 ];
const result = myFirstTeam.map((k) => {
  console.log(k);
  return k;
});

이런식으로 map을 돌렸을때 결과는 어떻게 나올까?
myFirstTeam: [영재, 성훈, 태현]이 나온다.
console에는 영재,성훈,태현 이 출력 될 것입니다.
result: [영재, 성훈, 태현]이 나올것입니다.
myFirstTeam === result;의 결과는 의외로 false이게 됩니다.
왜내하면 map을 실행하여 배열과 결과로 나오는 배열이 다른 객체라는 것이다.

reduce

reduce의 기본형을 알아보자
array.reduce((acc,cur,index,element) => { return 결과 }, 초기값);
위와 같이 기본 틀이다.
누적값,현재값,인덱스,요소를 품고있다.
코드를 보도록하자

const numb = [1,2,3]
result = numb.reduce((acc,cur,i) => {
  console.log(acc, cur, i);
  return acc + cur;
}, 0);
//010
//121
//332
result; //6

위에서 보다시피 reduce를 사용하면 acc(누적값)이 초깃값인 0부터 시작해 return하는 대로 누적되는걸 확인 할 수있다.
초깃값을 적지 않으면 초깃값이 0번째 인덱스가 됩니다.

profile
[ frontend-developer ]

0개의 댓글