본문 바로가기
Computer Science/JavaScript

자바스크립트 Chapter 19 map, reduce, filter

by Write and Remember 2019. 5. 12.

 

모든 자바스크립트 개발자가 알아야 하는 33가지 개념

 

Chapter 19 map, reduce, filter

 

Chapter 17에서 프토토타입 상속과 체인을 다룰 때

 

Array.prototype을 살펴본 적이 있다.

 

Array.prototype
// [constructor: ƒ, concat: ƒ, copyWithin: ƒ, fill: ƒ, find: ƒ, …]

 

크롬 개발자 도구(F12) Console에서 Array.prototype을

 

찍어보면 Array.prototype에 수많은 메서드들이 있다.

 

우리는 위의 수많은 메서드들을 정의 한 적이 없지만

 

미리 정의해놓은 메서드들을 Array.prototype에서

 

상속해주기 때문에 사용할 수 있다.

 

이번 장에서는 map, reduce, filter을 살펴보자.

 

Array.prototype.map()

 

배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한

 

결과를 모아 새로운 배열을 반환한다.

 

const array = [2, 4, 6, 8];

const arraymap = array.map(v => v * 2);

console.log(arraymap) // [ 4, 8, 12, 16 ]

 

map() 메서드는 새로운 배열 요소를 생성하는

 

콜백 함수(callback function)에서 세 가지 값을 허용한다.

 

1. 배열의 현재 항목

 

2. 현재 항목의 index

 

3. map()을 호출한 배열

 

반환 값으로 배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열

 

Array.prototype.reduce()

 

배열의 각 요소에 대해 주어진 함수를 실행하고, 하나의 결과값을 반환한다.

 

const array1 = [1, 2, 3, 4]
const reducer = (accumulator, currentValue ) => accumulator + currentValue

console.log(array1.reduce(reducer));
// 1 + 2 + 3 + 4 = 10

console.log(array1.reduce(reducer, 5));
// 5 + 1 + 2 + 3 + 4 = 15

 

콜백 함수에서 네 가지 인수를 받는다.

 

1. accumulator

 

반환값을 누적한다.

 

2. currentValue

 

처리할 현재 요소

 

3. currentIndex

 

처리할 현재 요소의 인덱스

 

4. array

 

reduce()를 호출한 배열

 

initialValue

 

callback의 최초 호출에서 첫 번째 인수에 제공하는 값

 

초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용한다.

 

Array.prototype.filter()

 

주어진 판별 함수를 통과하는 요소를 모아 새로운 배열로 만들어 반환한다.

 

const words = ['example', 'limit', 'sorry', 'ray', 'sara']

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

console.log(result) // ['example']

 

콜백 함수에서 세 가지 인수를 받는다.

 

1. element

 

처리할 현재 요소

 

2. index

 

처리할 현재 요소의 인덱스

 

3. array

 

filter를 호출한 배열

 

조건을 통과한 요소로 이루어진 새로운 배열,

 

어떤 요소도 통과하지 못했으면 빈 배열을 반환한다.

댓글0