기억하고싶은것들

JavaScript의 내장 함수들 중에 reduce(), map()에 대해서 알아보자. 

개발을 하다 보면 배열을 다루는 경우가 매우 많이 발생한다. 그럴 때마다 단순히 for문이나 foreach함수를 호출하기보다는 기본으로 제공하는 다양함 함수들을 사용하면서 익히면 JavaScript에 숙달되는데 많은 도움이 될 것이다. 

map()은 아래와 같은 형태로 많이 사용된다.

배열.map( (요소) => { return 요소;} )

반복문을 돌면서 배열 안에 요소들을 하나씩 ( 1:1 ) 짝지어주는 역할을 한다.

아래의 예제에서 chunks 배열에 ['banan=10', 'apple=20', orange=30']이 들어있다.

이 각각의 내용들을 { banana: '10', apple: '20', orange: '30'}과 같이 만들기 위한 작업을 보자.

  var result = {};
  chunks.forEach((chunk) => { // chunks = ['banan=10', 'apple=20', orange=30']
    const [key, value] = chunk.split('=');
    result[key] = value;
  });
  
  const result2 = chunks.map((chunk) => {
    const [key, value] = chunk.split('=');
    return { key: key, value: value };
  });
  // result2 = [{key: 'banana', value: '10'}, {key: 'apple', value: '20'} ..]

위의 코드와 같이 foreach를 통해 하는 작업을 map을 이용해서도 할 수 있다. 

그럼 다음으로 reduce()에 대해서 알아보자.

배열.reduce( (누적 값, 현재 값) => { return 결과; }, 초기 값 )

reduce()는 보통 배열을 값 하나로 줄이는데 쓰인다. ( 그래서 함수 이름도 reduce ( 줄어들다 ) 인가보다.. )

위에서 설명한 map()은 배열의 각 요소를 변경시킨다라 하면, reduce()는 배열 자체를 변경시킨다고 보면 될 것 같다.

chunks
    .map((chunk) => {
      const [key, value] = chunk.split('=');
      return { key, value };
    })
    .reduce((result, item) => { // item = {key: 'banana', value: '10'}
      result[item.key] = item.value;
      return result;
    }, {});
  // { banana: '10', apple: '20', orange: '30'}

위의 map()에서 본 예제에서 map()이 반환한 배열을 객체 형태로 변환하는 코드이다. 

이처럼 reduce()는 배열을 하나의 요소로 변형이 가능하게 만든다. ( 이런 경우에 많이 사용된다)