6.07 Dev.Feedback(Array filter, map, reduce)

Array.filter()

배열의 filter 메소드는, 모든 배열의 요소 중에서 특정 조건을 만족하는 요소를 걸러내는 메소드이다. 예를 들어 number 타입을 요소로 갖는 배열에서 짝수만을 걸러내거나, 18 보다 작은 수만을 걸러낼 수도 있고, string 타입을 요소로 갖는 배열에서, 길이가 10 이하인 문자열만 걸러내거나, 'korea'만 걸러낼 수도 있다.

 

Syntax

// Arrow function
filter((element) => { ... } )

여기서 걸러내는 기준이 되는 특정 조건은 filter 메소드의 인자로 전달된다. 이때 전달되는 조건은 함수의 형태인데, filter 메소드는, 걸러내기 위한 조건을 명시한 함수를 인자로 받기 때문에 고차함수다.

 

filter메소드 작동방식에 대한 예시

// 아래 코드는 정확한 표현 방식은 아니다.
// 작동하는 방식을 이해하기 위해 작성되었다.

let arr = [1, 2, 3];
// 배열의 filter 메소드는 함수를 인자로 받는 고차함수
// arr.filter를 실행하면 내부적으로 arr에 접근할 수 있다고 생각해도 된다.
arr.filter = function (arr, func) {
  const newArr = [];
  for (let i = 0; i < arr.length; i++) {
    // filter에 인자로 전달된 콜백 함수는 arr의 각 요소를 전달받아 호출됨
    // 콜백 함수가 true를 리턴하는 경우에만 새로운 배열에 추가
    if (func(arr[i]) === true) {
      newArr.push(this[i]);
    }
  }
  // 콜백 함수의 결과가 true인 요소들만 저장된 배열을 리턴
  return newArr;
};

/*
 * 보다 정확한 정의는 프로토 타입과 this를 학습한 후, 아래 코드를 통해 이해할 수 있다.
 * Array.prototype.filter = function(func) {
 *   const arr = this;
 *   const newArr = []
 *   for(let i = 0; i < arr.length; i++) {
 *     if (func(arr[i]) === true) {
 *       newArr.push(this[i])
 *     }
 *   }
 *   return newArr;
 * }
 */

 

filter 메소드를 사용하는 예시

// 함수 표현식
const isEven = function (num) {
  return num % 2 === 0;
};

let arr = [1, 2, 3, 4];
// let output = arr.filter(짝수);
// '짝수'를 판별하는 함수가 조건으로서 filter 메소드의 인자로 전달
let output = arr.filter(isEven);
console.log(output); // ->> [2, 4]

const isLteFive = function (str) {
  // Lte = less then equal
  return str.length <= 5;
};

arr = ['hello', 'code', 'states', 'happy', 'hacking'];
// output = arr.filter(길이 5 이하)
// '길이 5 이하'를 판별하는 함수가 조건으로서 filter 메소드의 인자로 전달
let output = arr.filter(isLteFive);
console.log(output); // ->> ['hello', 'code', 'happy']

이렇게 먼저 함수 표현식을 통해 변수에 할당해주고 해주는 방법도 있고,

let arr = [1, 2, 3, 4]
let newArr = arr.filter(x => x%2 ===0);

console.log(newArr); // [2,4]
이렇게 내부에서 직접 하는 방법도 있다.

Array.map()

Array.map()은 배열의 모든 요소에 콜백 함수를 적용하여 새로운 배열로 리턴해준다.

 

Syntax

map((element) => { ... } )

const arr = [5, 1, 6, 16];

const map = arr.map(x => x * 2);

console.log(map1);
// [10, 2, 12, 32]

Array.reduce()

Array.reduce()는 배열의 모든 요소를 가져와 콜백(reducer 함수) 함수를 적용하여 하나의 값으로 응축해준다.

 

Syntax

reduce((accumulator, currentValue) => { ... } )

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15