filter, map을 reduce로 코드 변환

filter와 map을 사용해서 푼 문제의 코드를 reduce로 변경해 볼 것이다.

기존코드

let arr = [1, 2, 3, 4, 5];

// filter()를 통해 홀수인 수들만 배열에 담겨 반환된다. 
// 리턴한 값들을 다시 map()을 통해 2를 곱한 후 반환된다.
const filterMaped = arr.filter(x => x % 2 !== 0).map(x => x * 2);
console.log(filterMaped); //[2, 6, 10]

기존 코드를 filter(), map()으로 분리해서 해석

// 배열에서 들어온 요소들을 홀수일 경우에만 true로 반환한다.
let filterResult = arr.filter(function(element) {
  if(element % 2 !== 0) {
    return true; //1, 3, 5 --> [1, 3, 5]
  }
});

// filterResult에 담긴 값들을 2를 곱해서 반환한다.
let mapResult = filterResult.map(function(element) {
  return element * 2; //2, 6, 10 --> [2, 6, 10]
});

reduce()로 바꿔서 풀어보기

//방법 1 >
let arr = [1, 2, 3, 4, 5];
let initValue = [];

let reduceFunction = function(accumulate, currentValue) {
  if(currentValue % 2 !== 0) {
    accumulate.push(currentValue * 2);
  }
  return accumulate;
};

let reduceResult = arr.reduce(reduceFunction, initValue);
console.log(reduceResult); // [2, 6, 10]


//방법 2 >
let result = arr.reduce(function(accumulate, currentValue) {
  if(currentValue % 2 !== 0) {
    accumulate.push(currentValue * 2);
  }
  return accumulate;
}, []);
console.log(result); // [2, 6, 10]

filter()

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

// 길이가 7이상인 단어들만 출력하세요.
const strArray = ["iridescent", "azure", "afterglow", "cherish", "mellifluous", "starlike", "reminiscent", "inclulent", "radiant", "adorable", "irreplaceable"];

let filterResult = strArray.filter(function(element) {
  if(element.length >= 9) {
    return true; 
  }
});

console.log(filterResult); // ["iridescent", "afterglow", "mellifluous", "reminiscent", "inclulent", "irreplaceable"]

map()

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

let numArr = [1, 2, 4, 8, 16, 32, 64];

let mapResult = numArr.map(function(element) {
  return element * 2;
});

console.log(mapResult); // [2, 4, 8, 16, 64, 128]