.map, .filter, .reduce

코드스테이츠 코플릿을 풀면서 알게된 배열을 다룰때 유용한 3개의 (a.map, a.filter, a.reduce)를 내장 객체들을 알아보자
자바 스크립트 문법에서 사용되는 for문과 while문을 사용하지 않고 배열을 다 확인하고 필요한 값을 가져올 수 있는 배열 메서드이다.

filter

사용 예시
문자열을 요소로 갖는 배열을 입력받아 그 길이가 홀수인 요소만을 갖는 배열을 리턴

function filterOddLengthWords(words) {
  return words.filter(x=> x.length%2==1)
}

let output = filterOddLengthWords(['there', 'it', 'is', 'now']);
console.log(output); // --> ['there', "now']

이처럼 배열이 개수와 상관없이 for문을 이용하지 않고 조건에 맞는 output을 얻는데 이용가능하다

• filter의 가장 큰 특징은 boolean형태의 return값을 갖는다.
• return값이 true일경우, 그 요소를 반환하고 false일경우, 반환하지 않는다. 기본값은 false이다.
• 깔끔하게 원하는 요소들만 필터링할 수 있는 유용한 메서드이다.

map

사용예시
수를 요소로 갖는 배열을 입력받아 각 요소가 2의 배수인지에 대한 정보를 요소로 갖는 새로운 배열을 리턴해야 합니다.

function checkEvenOrNot(arr) {
 return arr.map(function (el) {
   if(el%2==0 && el>1)
    return 'ok';
  else
    return 'no'
  });
}


let output = checkEvenOrNot([1, 2, 3, 4]);
console.log(output); // --> ['no', 'ok', 'no', 'ok']

checkEvenOrNot([0, 3, 4]);
console.log(output); // --> ['no', 'no', 'ok']

map은 filter와 문법은 똑같지만 filter는 기존 배열을 변경하지 않고 필요한 배열의 요소를 찾거나 true/false 값을 리턴하는데 이용된다면 map의 경우 조건에 맞는 새로운 배열을 리턴하게끔 도와준다.

reduce

사용예시
number 타입을 요소로 갖는 배열을 입력받아 배열의 모든 요소의 평균을 리턴해야 합니다.

function computeAverageOfNumbers(arr) {
  if(arr.length===0)
  return 0;
  let total = arr.reduce((acc,v,i,ar)=>{return acc=acc+v},0)
  return total/arr.length
}


let output = computeAverageOfNumbers([4, 5, 6]);
console.log(output); // --> 5

reference

• reduce 첫번째 인자인 accumulator 는 return값을 계속해서 누적해서 사용할 수 있고, 전달 받아서 사용할 수 있음
• accumulator의 초기값을 설정할 수 있다. optional하며 생략시에는 첫번째 return값이 된다.

filter와 map과의 차이점은 배열을 리턴하는게 아닌 하나의 결과값을 가져온다. 하지만 빈 배열을 함께 사용하면 filter, map으로 나타낼 수 있는것은 다 가능하기 때문에 활용도가 높고 map, filter보다 성능이 조금 더 뛰어난 장점이 있다.