map vs filter vs reduce

출처 Addy Osmani Facebook 게시물

배열 method이다.

3가지 method는 인자로 함수를 넣는 것이 포인트!

- reduce(함수), map(함수), filter(함수)

 

1)익명함수

 

//배열의 모든 요소들이 자기 자신의 곱한 값을 갖는 새로운 배열을 얻는 함수

let array = [1,2,3,4]

function squaredArray(array) { 
	return array.map(function (num) { //익명 함수
    	return num * num
    }
}

2)외부함수 참조

//배열의 모든 요소들이 자기 자신의 곱한 값을 갖는 새로운 배열을 얻는 함수

let array = [1,2,3,4]

function squared(num) { //외부에 함수를 정의
	return num*num
}

function squaredArray(array) { 
	return array.map(squared) // map은 함수를 인자로 갖는다, 외부함수를 참조
}

 

Array.prototype.map() 

1. 새 배열을 리턴한다.(immutable)

2. 똑같은 길이의 배열을 리턴한다.

3. 각 엘리먼트에 대해서 어떤 함수를 거쳐서, 그 결과 새로운 배열을 만든다. (1:1로 mapping, 요소의 값이 변함)

 

Array.prototype.filter()

1. 새 배열을 리턴한다. (immutable)

2. 특정한 조건의 맞는 값만 추출한다. (배열의 길이가 달라진다, 요소의 값은 변함이 없다)

 

Array.prototype.reduce()

1. 누적 계산된 결과값을(1개) 리턴한다.

- reduce 초기값을 설정해 주지 않으면

  1) 배열의 첫번째 인덱스 값이 초기값이 된다

  2) 콜백을 배열의 길이보다 -1만 한다