javascript에서 자주 쓰이는 map, filter, reduce 함수 사용법을 간략하게 알아보자
map 함수
기존 배열에서 callback 함수를 실행한 결과를 가지고 새로운 배열을 만들 때 사용
예시) 기존 배열 값에 *2 하기
var numbers = [ 1,2,3,4,5,6,7,8,9];
var newNumbers = numbers.map(number =>number *2);
console.log(newNumbers);
- 결과 : [2, 4, 6, 8, 10, 12, 14, 16, 18]
[선언문 확인]
array.map(callbackFunction(currenValue[, index[, array]])[, thisArg])
callbackFunction, thisArg 두개의 매개변수가 있고
callbackFunction은 currentValue, index, array 3개의 매개변수를 보유
- currentValue : 배열 내 현재 값
- index : 배열 내 현재 값의 인덱스
- array : 현재 배열
- thisArg : callbackFunction 내에서 this로 사용될 값
filter 함수
기존 배열에서 callback Function을 실행한 결과를 가지고 조건을 만족하는(true를 리턴하는) 요소만 배열로 추출
예시) 3을 초과하는 값만 추출
const numbers = [1, 2, 3, 4, 5];
const result = numbers.filter(number => number > 3);
- 결과 : [4, 5]
[선언문 확인]
array.filter(callbackFunction(currenValue[, index[, array]])[, thisArg])
** map과 동일
reduce 함수
배열의 각 요소를 순회하며 callback 함수의 실행 값을 누적하여 하나의 결과값을 반환
예시) 배열 모든 값 더하기
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const sum1 = numbers.reduce((accumulator, currentNumber) => accumulator + currentNumber);
- 결과 : 55
[선언문 확인]
array.reduce(callbackFunction(accumulator, currentValue[, currentIndex[, array]])[, initialValue])
- accumulator : 누산기. 콜백의 반환값을 누적. 콜백의 이전 반환값 또는 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값임
- currentValue : 처리할 현재 요소
- currentIndex (Optional) : 처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작
- array (Optional) : reduce()를 호출한 배열
initialValue (Optional) : callback의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용. 빈 배열에서 초기값 없이 reduce()를 호출하면 오류 발생
참고 사이트
- map 함수
https://velog.io/@daybreak/Javascript-map%ED%95%A8%EC%88%98
[Javascript] map함수
map함수는 callbackFunction을 실행한 결과를 가지고 새로운 배열을 만들 때 사용한다. array.map(callbackFunction(currenValue, index, array), thisArg)filter, forEach와 같은 구문이다.
velog.io
- filter 함수
https://7942yongdae.tistory.com/49
Javascript - Array filter 사용법
이번에는 Javascript의 array가 가진 filter 함수의 정의와 사용법 더불어 활용법에 대해 이야기해보려고 합니다. array의 함수 중 가장 많이 쓰이는 함수 중 3 대장이라고 할 수 있는 것이 map, filter, reduc
7942yongdae.tistory.com
- reduce 함수
https://miiingo.tistory.com/365
[Node.js] javascript: Array.reduce() 사용 방법 정리
Array.reduce() ● 기본 정리 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다. arr.reduce(callback[, initialValue]) callback : 배열의 각 요소에 대해 실행할 함수.
miiingo.tistory.com
'Javascript' 카테고리의 다른 글
Javascript) Date 객체 사용하기 (0) | 2023.08.05 |
---|---|
Javascript) Array.from을 통한 배열 초기화 (0) | 2023.08.02 |