자바스크립트 배열 메소드2(map, filter, reduce)

https://jjaong34.tistory.com/18

자바스크립트 배열 메소드

자바스크립트 배열 메소드 2번째

map, filter, reduce에 대해 알아보려고 한다.

 

#1 - map

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

구문

    arr.map(callback(currentValue[, index[, array]])[, thisArg])

 

매개변수

callback - 새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가집니다.

currentValue - 처리할 현재 요소.

index - 처리할 현재 요소의 인덱스.

array - map()을 호출한 배열.

thisArg - callback을 실행할 때 this로 사용되는 값.

 

반환 값

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

 

예시

const fruit = [
    {
        name : 'banana',
        sugar : 9.7,
        price : 2000
    },
    {
        name : 'orange',
        sugar : 8.8,
        price : 5000,
    },
    {
        name : 'toamto',
        sugar : 7.5,
        price : 3000,
    }
]

 

여기 과일을 담은 배열이 있다.

map 매서드를 사용해서 모든 객체를 출력하려고 한다.

fruit.map(function(item){
    return item;
})

화살표 함수를 쓰면

fruit.map(item => item)

훨씬 깔끔해졌다.

결과는 같다

 

키를 이용해 필요한 값만 출력할 수도 있다.

과일이름만 출력하고 싶다 그러면

fruit.map(item => item.name)

과일 이름만 잘 출력되었다.

 

#2 - filter

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

구문

    arr.filter(callback(element[, index[, array]])[, thisArg])

매개변수

callback - 각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버립니다.
다음 세 가지 매개변수를 받습니다.

element - 처리할 현재 요소.

index - 처리할 현재 요소의 인덱스.

array  - filter 를 호출한 배열.

thisArg  - callback을 실행할 때 this로 사용하는 값.

반환 값

테스트를 통과한 요소로 이루어진 새로운 배열. 어떤 요소도 테스트를 통과하지 못했으면 빈 배열을 반환합니다.

 

예시

map 메소드를 설명할때 예시로 들었던 fruit 객체를 사용

 

filter 메소드는 조건을 입력하면 그 조건에 맞는 요소로 이루어진 배열을 반환한다.

만약 이름이 바나나인 요소만 가져오고 싶다.

fruit.filter(item => item.name === 'banana')

바나나인 요소만 잘 가져와졌다.

 

가격이 3000원 이하인 과일만 가져오고 싶다

fruit.filter(item => item.price <= 3000)

2000원인 바나나와 3000원인 토마토가 필터링되었다.

 

#3 - reduce

reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.

 

구문

    arr.reduce(callback[, initialValue])

매개변수

callback - 배열의 각 요소에 대해 실행할 함수. 다음 네 가지 인수를 받습니다.

accumulator - 누산기는 콜백의 반환값을 누적합니다. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값입니다.

currentValue - 처리할 현재 요소.

currentIndex  - 처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작합니다.

array - reduce()를 호출한 배열.

initialValue - callback의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용합니다. 빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생합니다.

반환 값

누적 계산의 결과 값.

 

예시

1 ~ 9 까지 숫자를 가지고 있는 객체가 있다.

const number = [1,2,3,4,5,6,7,8,9];

reduce 함수로 모든숫자를 다 더한 값을 반환할 수도있고

곱한 값을 반환할 수도 있다.

 

number.reduce((sum, num) => sum +=num) // 더한 값 누적

더한 값 누적한 결과

 

 

number.reduce((sum, num) => sum *=num) // 곱한 값 누적

곱한 값 누적한 결과

 

 

시작점을 정할수도 있다.

number.reduce((sum, num) => sum +=num, 100) // 100부터 시작해 더한 값 누적

100부터 시작해 더한 값 누적한 결과