[Algorithm] JavaScript_ES6 map, filter, reduce 정리

Mubby·2022년 4월 7일

알고리즘(3xx)

목록 보기

2/3

만약 여러분이 가진 어떠한 문서를 공개하고 싶은데 특정 정보는 알아볼 수 없게 만들고 싶다면 방법은 두 가지일 겁니다. 첫 번째 방법은 두꺼운 유성펜을 가지고 문서 내용 중 해당 정보를 가리는 것이고, 두 번째 방법은 문서를 복사하고 그 복사본을 유성펜으로 지우는 것입니다. 두가지 방법 중 두 번째 방식이 더 바람직합니다. 두 번째 방법은 원하는 정보를 보호하면서 문서를 공개하는 동시에 원본은 그대로 유지할 수 있기 때문입니다.

이것이 바로 애플리케이션에서 불변성 데이터가 작동하는 방식입니다.

원본 데이터 구조를 변경하는 대신 그 데이터 구조의 복사본을 만들고 그 중 일부를 변경합니다. 그리고 원본 대신 변경한 복사본을 사용해 필요한 작업을 진행합니다.

이러한 작업을 도와주는 세 가지의 자바스크립트 내장함수를 알아보겠습니다.

map, filter, reduce

이 함수들은 고차함수이자 순수함수 입니다.

고차 함수(High Order Function)

다른 함수를 조작하고, 함수를 인자로 받거나 반환하는 것이 가능한 복잡한 함수

순수함수(Pure Function)

최소한 하나 이상의 인수를 받고, 인자가 같으면 항상 같은 값이나 같은 함수를 반환하는 함수
인수를 변경 불가능한 데이터로 취급하며, *부수 효과가 없는 함수
*(Side Effect: 전역 변수를 설정하거나, 함수 내부나 애플리케이션에 있는 다른 상태를 변경하는 것)

Array.prototype.map()

map() 메서드는 주로 주어진 배열의 값을 재정의 할 때 사용하는 함수로, callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 만듭니다.

map 구문

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

map 매개변수

callback은 각 요소를 시험할 함수(조건)이며, 다음 세 가지 매개변수를 받습니다.

currentValue⇒ 처리할 요소 값
index(Optional) ⇒ 처리할 요소의 인덱스
array(Optional) ⇒ 순회(traverse)하는 배열 객체

thisArg(Optional) ⇒ callback을 실행할 때 this로 사용하는 값

map 사용 예제

Javascript - Array map 사용법_프로그래머 YD

Array.prototype.filter()

filter() 메서드는 주로 특정 조건을 만족하는 새로운 배열을 필요로 할 때 사용하는 함수로, 배열 내 각 요소에 대해 한 번 제공된 callback 함수를 호출해, 주어진 조건을 만족하는 모든 요소를 모아 새로운 배열을 만듭니다.

filter 구문

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

filter 매개변수

callback은 각 요소를 시험할 함수(조건)이며, 다음 세 가지 매개변수를 받습니다.

element ⇒ 처리할 요소 값
index(Optional) ⇒ 처리할 요소의 인덱스
array(Optional) ⇒ 순회(traverse)되는 배열 객체

thisArg(Optional) ⇒ callback을 실행할 때 this로 사용하는 값

filter 사용 예제

Javascript - Array filter 사용법_프로그래머 YD

Array.prototype.reduce()

reduce() 메서드는 주로 그룹 지어진 데이터의 결과를 도출할 때 사용하는 함수입니다. 예를 들면 덧셈이나 곱셈 같은 합산 식을 이용할 때 사용합니다. 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하여 배열의 값을 하나씩 줄여가면서 모든 배열을 순회 후, 하나의 결과값을 반환합니다.

리듀서 함수는 네 개의 인자를 가집니다.

누산기 (acc), 현재 값 (cur), 현재 인덱스 (idx), 원본 배열 (src)

리듀서 함수의 반환 값은 누산기에 할당되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 됩니다.

reduce구문

arr.reduce(callback[, initialValue])

reduce매개변수

callback은 새로운 배열 요소를 생성하는 함수이며, 다음 네 가지 인수를 가집니다.

accumulator ⇒ 누산기는 콜백의 반환값을 누적합니다. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값입니다.
currentValue ⇒ 처리할 요소
index(Optional) ⇒ 처리할 요소의 인덱스
처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작합니다.
array(Optional) ⇒ 순회(traverse)하는 배열 객체

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