#19 map, reduce, filter [33 Concepts Every JavaScript Developer Should Know ]

https://medium.com/poka-techblog/simplify-your-javascript-use-map-reduce-and-filter-bd02c593cc2d

Simplify your JavaScript – Use .map(), .reduce(), and .filter()

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

Array.prototype.reduce()

 

- .map()

map함수는 배열 안의 요소들을 사용하여 새로운 배열을 만들어낸다.

 

예제1

const numbers = [2, 4, 8, 10];
numbers.map( x => x * 2 );

multiple // [4, 8, 16, 20]

예제2

// What you have
var officers = [
  { id: 20, name: 'Captain Piett' },
  { id: 24, name: 'General Veers' },
  { id: 56, name: 'Admiral Ozzel' },
  { id: 88, name: 'Commander Jerjerrod' }
];

// What you need
[20, 24, 56, 88]

const officersIds = officers.map(officer => officer.id); // [20, 24, 56, 88]

map을 사용한 배열의 길이와 리턴된 배열의 길이가 같아야한다.

 

 

- reduce()

배열의 각 요소들을 체크하여 배열이 아니라 하나의 결과값을 반환한다.

array.reduce( (accumulator, current, index, source) => {
  // return logic here
}, initialValue)

// accumulator -> 리턴된 값을 저장한다.
// current -> 현재 배열 요소
// index -> 현재 배열의 인덱스 값 / 잘 안씀
// source -> 원재 주어진 배열 / 잘 안씀

 

예제1

const euros = [1, 2, 3];

const sum = euros.reduce((total, amount) => total + amount); 

sum // 6

이 예제에서 리듀스는 2개 total과 amount 파라미터를 받았다. 리듀스는 반복문 처럼 각 배열 값을 돈다.

리듀스 함수가 실행되면 total값은 배열의 가장 왼쪽에 있는 값으로 할당된다. 그리고 amount는 그 다음 순서의 값이 된다.

여기 예제에서는 최초 total은 1이고 amount는 2이다. 그래서 둘이 합쳐 3을 리턴한다. 다시 반복이 시작될 때 total은 리턴된 3 값으로 되어있고 amount는 다음 배열로 넘어가 3이된다. 여기서 리턴하면 6이된다. 오른쪽 배열의 값이 이제 없으므로 리듀스함수는 종료한다.

예제2

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

const multi = euros.reduce( ( total, amount ) => {
		total.push( amount * 2 );
        return total;        
    }, []); 

multi // [2, 4, 6, 8]

euros배열의 값들에 2를 곱해 다시 배열로 뱉었다. multi에 표현된 리듀스함수의 끝 인자 initialvalue는 total의 초기값을 정한다. 여기서 빈 배열 [ ] 을 초기값으로 줘서 total은 [ ]이 된거다. amount는 주어진 배열의 처음 값인 1 부터 시작하는거다.

이런식으로 리듀스 내부에 조건을 줘서 이것저것 할 수 있다.

( total, amount, initialvalue 파라미터의 이름들은 그냥 예제에서 쓴 이름이다 순서로 기억해야한다. )

주어진 값이 배열이라고 배열로만 뱉는건 아니다. 객체로 만들어서 뱉을 수도 있고 객체를 받을 수 도 있다.

 

 

- filter()

필터 메서드는 조건을 통과한 요소들을 대상으로 새로운 배열을 반환한다.

let numbers = [1,2,3,4,5]
numbers = numbers.filter(numb=> numb % 2 == 0);

numbers // [2, 4]