TIL 6) map,filter,reduce

0. 시작하기

javascript에서 배열을 다루는 메소드 중 위 3가지가 제일 많이 쓴다고 생각한다.
코딩테스트를 풀 때도 위 3가지를 가장 많이 사용했고, 가장 유용했던 것 같다.

오늘은 복습하는 겸 확실이 머릿속에 박아두기 위해 하나씩 정리해보려고 한다.

1.map

어떤 배열의 요소의 값을 변경해서 새로운 배열을 리턴하는 함수다.

const arr = [1,2,3,4,5];
let arr2 = arr.map((it)=>it*2);
console.log(arr); // [1,2,3,4,5]
console.log(arr2); // [2,4,6,8,10]

새로운 배열을 리턴하므로 기존 배열은 변경되지 않는다.

let arr2 = arr.map(function(it){
 return it*2; 
	}
)

이런식으로 함수 표현식으로도 선언이 가능하다.

map함수의 구조는 다음과 같다.

arr.map((element,index,array)=>{return ...}

순서대로 요소, 인덱스 ,배열이고 보통은 element만 주로 사용한다.

2.filter

filter는 해석 그대로 배열을 걸러주는 함수다.
주어진 배열을 순회하여 callback function의 return값이 true일 경우에만 반환하는 요소를 가지고 신규 배열을 만들어 준다.

const arr = [1,2,3,4,5];
let arr2 = arr.filter((it)=>it>=3);
console.log(arr2); //[3,4,5]

filter 내부의 callback function을 보면 element가 3 이상일때 true를 반환하므로
기존 배열에서 true인 element만 신규 배열로 반환되게 된다.

const arr = [1,2,3,4,5];
let arr2 = arr.filter((it)=>{
    if(it*2>2 && it*2%3==0){
        return true;
    }
});
console.log(arr2);

이런식으로 조건을 적고 true를 return하는 방식으로도 사용이 가능하다.

3. reduce

이 3가지 메소드들 중에 가장 어렵다고 생각하는 reduce다.

배열에 주어진 callback함수를 실행하고 결과값을 누산기에 포함시킨다.

const result = arr.reduce((acc,cur)=>{
  return acc+cur
},init);

acc : callback함수의 리턴값, 리턴값은 acc에 들어간다.
cur : 배열의 현재 값
init : acc의 초기값

위 함수는 배열의 모든 값을 더하는 함수로 return acc+cur은 acc로 들어가게 된다.
그럼 더한 값은 배열의 다음 cur값에 다시 더해지는 방식으로 누산이 된다.
초기값은 init에 선언 해주면 된다.

const arr = [1,2,3,4,5];
let arr2 = arr.reduce((acc,cur)=>{
    if(cur%2==0){
        acc=acc+cur;
    }
    return acc;
},0)

이런식으로 조건을 부여해 reduce를 사용하는 방법도 있다.