ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 자바스크립트 Chapter 19 map, reduce, filter
    Computer Science/JavaScript 2019.05.12 19:19

     

    모든 자바스크립트 개발자가 알아야 하는 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