본문 바로가기
TIL/TIL

reduce & map & filter & every & some

by koreashowme 2020. 1. 21.

reduce로 다 만들 수 있다.  (map & filter)

 

const oneTwoThree = [1, 2, 3];

 

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

console.log(v);

return v;

});

// 콘솔에는 1, 2, 3이 찍힘

oneTwoThree; // [1, 2, 3]

result; // [1, 2, 3]

oneTwoThree === result; // false




result = oneTwoThree.map((v) => {

return v + 1;

});

result; // [2, 3, 4]




*** map => 규칙적인 배열만 반환할 수 있는게 아니라, 함수 안에 적어준대로 반환할 수 있기 때문에 자유도가 높다.

 

result = oneTwoThree.map((v) => {

if (v % 2) {

return '홀수';

}

return '짝수';

});

result; // ['홀수', '짝수', '홀수']



result = oneTwoThree.reduce((acc, cur, i) => {

console.log(acc, cur, i);

return acc + cur;

}, 0);

// 0 1 0

// 1 2 1

// 3 3 2

result; // 6



result = oneTwoThree.reduce((acc, cur, i) => {

console.log(acc, cur, i);

return acc + cur;

});

// 1 2 1

// 3 3 2

result; // 6



*** reduceRight는 reduce와 동작은 같지만 요소 순회를 오른쪽에서부터 왼쪽으로 한다는 점이 차이



result = oneTwoThree.reduceRight((acc, cur, i) => {

console.log(acc, cur, i);

return acc + cur;

}, 0);

// 0 3 2

// 3 2 1

// 5 1 0

result; // 6




result = oneTwoThree.reduce((acc, cur) => {

acc.push(cur % 2 ? '홀수' : '짝수');

return acc;

}, []);

result; // ['홀수', '짝수', '홀수']

 

*** 0 => false or 1 => true

 

result = oneTwoThree.reduce((acc, cur) => {

if (cur % 2) acc.push(cur);

return acc;

}, []);

result; // [1, 3]

 

// every => 모든 조건을 pass하면 => return true => or false

 

// reduce => return 초기값 + 축적값, 사용하면 편의함. * 초기값을 주지 않으면 자동으로 0번째 인덱스 값이 적용됨.

 

// 초기값을 줄 수 있는 것이 강력한 파워 => { }, [ ] 객체, 배열을 초기값으로 줄 수 있음 => map, filter 역할이 가능함.

 

// 초기값을 준 후, 조건을 주면 => filter

// 초기값을 준 후, 1:1 매핑만 시켜주면 => map

 

// 반복 되는 모든 것들은 reduce를 사용할 수 있다.

 

// forEach => 빈 배열 push해서 매핑하여 자주 사용한다.

 

// map => 새로운 배열을 만들 때 사용(1:1 매핑 시켜줌). 원본은 건드리지 않음.

 

// filter => 조건을 줄 때 사용하면 편의함. 원본은 건드리지 않음.

 

const items = ['item1', 'item2', 'item3'];

const copy = [ ] ;

 

// 이전

for (let i=0; i<items.length; i++) { copy.push(items[i]); }

 

// 이후

items.forEach(function(item){ copy.push(item); });

comment