고차 함수 - (2) [filter, map, reduce ...]

자바스크립트에는 기본적으로 내장된 고차함수가 여럿 있다. 그중에서 배열 메소드들 중 일부가 대표적인 고차함수에 해당된다.

 

filter

배열의 filter 메소드는, 모든 배열의 요소 중에서 특정 조건을 만족하는 요소를 걸러내는 메소드이다. 다음은 filter의 작동방식이다.

let arr = [1, 2, 3];


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;
};

상단의 코드에서 중요한 점은, true/false 로 구분하여 조건에 해당하는 값을 뽑아낼 수 있다는 점이다.

 

이제 filter 메소드를 사용해보자.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);

이번에는 true/false와 같은 내용이 명시되어 있지는 않지만, filter 자체가 조건에 true인 요소들을 뽑아내주기 때문에 위와 같은 형식이라고 볼 수 있다.

 

map

map 메소드가 사용된 배열의 각 요소가, 특정 함수에 의해 적용 및 처리가 된다. 간단한 문제를 풀때는 인자가 하나만 들어가도 되지만, 대체적으로 key 를 넣어주어야 한다. 만약 배열을 렌더링 할 때 key 설정을 하지 않는다면 기본적으로 배열의 index 값을 key로 사용하게 되고 아래와 같은 경고창이 보이게 될 것이다. 그 이유는 각 고유 원소에 key가 있어야만 배열이 업데이트 될 때 효율적으로 렌더링 될 수 있기 때문이다. 

 

각 원소들마다 가지고 있는 고유값으로 key를 설정해 주어야 한다.

// key 설정 안했을 때

const Map = () => {

	const menu = ['pizza', 'potatochip', 'pasta'];
	const menulist = menu.map((name) => <lu>{name}</li>)
    
    return (<ul>{menulist}</li>)
}
    
// key 설정 했을 때

const Map = () => {

	const menu = ['pizza', 'potatochip', 'pasta'];
	const menulist = menu.map((name, name.id) => <lu>{name}</li>) // 여기서는 id 가 key 값
    
    return (<ul>{menulist}</li>)
}

map은 위와 같은 차이점을 이해하는 것이 중요하다.

 

 

이해를 돕기 위해 GIF 파일을 첨부한다. 차이점은 수정할때 생기는 효율성의 차이이다.

 

 

( 출처: react.vlpt.us )

 

웹 같은 경우는 디버깅 시 제대로 된 피드백을 받지 못하므로, 메소드를 사용하기 전에 메소드의 특징을 알아야한다.

다음은 map을 사용할때마다 에러가 난뒤 한참 뒤에 찾는 특징이라 꼭 외워야한다.

 

map에서 {중괄호}를 사용하려면 내부에 return 이 존재해야한다. 그게 아니라면 (소괄호).
사실 return을 안할거면 forEach를 쓰는게... 

 

reduce

 

reduce 메소드가 사용된 배열의 각 요소를, 특정 함수를 이용해 원하는 하나의 형태로 응축한다.

사용방법부터 보자. 

배열.reduce((누적값, 현잿값, 인덱스, 요소) => { return 결과 }, 초깃값);

result = oneTwoThree.reduce((acc, cur, i) => {
  console.log(acc, cur, i);
  return acc + cur;
}, 0);

마지막 라인에 '0' 이 있는데 이는 초깃값을 뜻하며, 놓치면 안되는 부분이다. 만약 적어주지 않는다면 0번째 인덱스의 값이 되므로 주의하자.

 

보통 reduce 메소드의 예시로 덧셈을 보여주는데, 그 외에도 여러곳에 사용할 수 있는 강력한 툴임을 알게 될 것이다. 배열 원소들의 출현 개수를 세고 딕셔너리 형태로 구하는 예시를 들어본다. (부트캠프 HA에 나왔던 문제의 답으로 쓰일 수 있음. 필자는 for문을 덕지덕지 붙여 겨우 풀었다는 후문.)

let countedNames = ['A', 'B', 'A', 'A', 'B'].reduce(function (result, cur) { 
  if (cur in result) {
    result[cur]++
  } else {
    result[cur] = 1
  }
  return result
}, {})
console.log(countedNames) // {A: 3, B: 2}