[JavaScript]ES6 map, filter, reduce 정리

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

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

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

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

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()를 호출하면 오류가 발생합니다.

reduce사용 예제

Javascript - Array reduce, reduceRight 사용법_프로그래머 YD

참고사이트

• MDN
• 프로그래머 YD님 블로그