본문 바로가기
Frontend/Javascript

[JS] map, filter, reduce 함수

by jojo 2021. 11. 13.

 

 

# map, filter, reduce 모두 콜백함수를 활용하는 함수라는 공통점이 있다.

 

 

▷ map 

- 콜백 함수에서 리턴한 값들을 기반으로 '새로운 배열'을 만드는 함수

- forEach()와의 차이: forEach()는 배열 내부의 요소를 사용해서 콜백 함수를 호출하는데 그치는 반면, map()은 새로운 배열을 생성함

// 기본문법
array.map(function(value, index, array) {    } 

// 화살표 함수 이용
array.map((value) => value * value)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

 

Array.prototype.map() - JavaScript | MDN

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

developer.mozilla.org

 

 

▷ filter

- 콜백함수에서 리턴하는 값이 true인 것만 모아서 '새로운 배열'을 만드는 함수

// 기본문법
array.filter(function(value, index, array) {    } 

// 화살표 함수 이용
array.filter((value) => value % 2 === 0)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

 

Array.prototype.filter() - JavaScript | MDN

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

developer.mozilla.org

 

 

▷ reduce

- 배열의 각 요소에 함수를 실행하여 '하나의 값'으로 반환함

// 기본문법
array.reduce(function(accumulator, value, index, array) {}, initialvalue

// 화살표 함수 이용
array.reduce( (prev, curr) => prev + curr , initialvalue )
// prev: 누적값, curr: 현재값, initialvalue는 생략가능

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

 

Array.prototype.reduce() - JavaScript | MDN

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

developer.mozilla.org

 

'Frontend > Javascript' 카테고리의 다른 글

[JS] find, findIndex, indexOf, includes 비교  (0) 2021.12.27
[JS] JSON(Javascript Object Notation)  (0) 2021.12.26
[JS] 함수 선언문과 함수 표현식  (0) 2021.11.13
[JS] \n과 <br>의 차이  (0) 2021.11.03
[JS] class와 object  (0) 2021.09.14

댓글