JavaScript 메서드 - map, reduce, filter

이 글은 JavaScript에서 자주 사용되는 map, reduce, filter 메소드에 대해 정리한 글입니다.

01  Array.map()

-배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환(기존의 배열 수정하지 않음)

-각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 만듦

arr.map(callback(currentValue[, index[, array]])[, thisArg])
배열.map((요소, 인덱스, 배열) => { return 요소});

callbackFunction, thisArg 두개의 매개변수가 있고 callbackFunction은 currentValue, index, array 3개의 매개변수 가짐

• currentValue : 배열 내 현재 값
• index : 배열 내 현재 값의 인덱스
• array : 현재 배열
• thisArg : callbackFunction 내에서 this로 사용될 값

쉽게 말해 map( ) 함수의 값 인자는 향상된 for문의 item 인자와 같은 역할,

map( ) 함수의 인덱스 인자는 기본 for문 방식의 index 와 같은 역할이라 보면 된다.

 

const arr = [5, 1, 3, 2, 6];

//작동 원리 이해-callback할 함수 외부에 작성해 map에 입력
// double 2를 곱셈
function double(x) {
  return x * 2;
}
arr.map(double) //[10, 2, 6, 4, 12]

// binary:["101, "1", "11", "10", "110"]
function binary(x) {
  return x.toString("2");
}
arr.map(binary) //["101, "1", "11", "10", "110"]

//map 안에 함수 작성
arr.map(function double(x){
	return x * 2;
})
arr.map(function binary(x){
	return x.toString(2);
})

//arrow function
arr.map(x=>x*2)
arr.map(x=>x.toString(2))

//map 이용해 Object 재구성

var kvArray = [{key:1, value:10},
               {key:2, value:20},
               {key:3, value: 30}];

var reformattedArray = kvArray.map(function(obj){
   var rObj = {};
   rObj[obj.key] = obj.value;
   return rObj;
});
// reformattedArray는 [{1:10}, {2:20}, {3:30}]

// kvArray는 그대로
// [{key:1, value:10},
//  {key:2, value:20},
//  {key:3, value: 30}]

 

02  Array.reduce()

-배열의 모든 요소들에 대해서 연산을 수행(=각 요소에 대해 주어진 reducer 함수 실행)하여 하나의 결과 값을 반환

arr.reduce(callback, initialValue)
배열.reduce((누적값, 현재값, 인덱스, 요소) => { return 결과}, 초기값);

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

• accumulator 누산기: 누적된 계산 값
• currentValue: 처리할 현재 요소
• currentIndex (Optional) : 처리할 현재 요소의 인덱스 (initialValue를 제공한 경우 0 또는 1부터 시작)
• array (Optional) : reduce()를 호출한 배열

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

function func(accumulator, currentValue, currentIndex, array)

-배열의 요소들을 점진적으로 계산

 : 두 개의 요소를 계산, 그 결과를 다음 요소와 함께 계산, 그 결과는 다음 요소와 계산하는 식으로 연산을 분할해 점진적으로 연산을 처리 ( 이전 값이 아닌 누적값 )

let arr=[1,2,3,4,5,6,7,8,9,10]
arr.reduce((a,b)=>a+b) //55

//작동 방식
1+2=3
3+3=6
6+4=10
10+5=15
15+6=21
21+7=28
28+8=36
36+9=45
45+9=55 => 결과: 55

배열의 모든 값을 합산할 때 자주 활용된다.

var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
// sum is 6

 

03  Array.filter()

-배열 내 각 요소에 대해 한 번 제공된 callback 함수를 호출해, callback이 true로 강제하는 값을 반환하는 모든 값이 있는 새로운 배열을 생성(=배열에서 특정 조건만 주어 조건에 해당하는 값들만 출력, 기존 배열 수정하지 않음)

-삭제됐거나 값이 할당된 적이 없는 인덱스는 호출하지 않고, 통과하지 못한 배열 요소는 건너뛰어 배열에 포함되지 않음

-중복값을 제거해주지 않으므로 중복값을 출력할 수 있음

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

인자로 callback을 받으며, callback 함수는 아래 3개의 인자를 받음.

• element: 배열의 요소
• index: 전달된 요소의 Index
• array: 배열 객체

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

 

//filter 외부에 함수 작성 후 callback
function isBigEnough(value) {
  return value >= 10;
}

var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered 는 [12, 130, 44]

//filter 내 함수 입력+arrow function
let arr=[12, 5, 8, 130, 44]
arr.filter(i => i>=10) //[ 12, 130, 44 ]

 

---

참고자료

https://codechacha.com/ko/javascript-array-reduce/

MDN: map() , reduce() , filter()

https://velog.io/@daybreak/Javascript-map%ED%95%A8%EC%88%98