개요

내장 고차 함수를 이해하고 map, filter, reduce 를 상세히 학습합니다.

학습 목표

• 배열 내장 고차 함수 filter에 대해서 이해할 수 있다.
• filter에 대한 이해를 기반으로 나머지 내장 고차 함수를 학습할 수 있다.
  • filter, map, reduce, forEach, find, sort, some, every
• 고차 함수를 쓰는 이유를 설명할 수 있다.
• 고차 함수를 활용하여 프로그램을 작성할 수 있다.

내장 고차 함수

JavaScript 에는 기본적으로 내장된 고차 함수가 여럿 있습니다. 하나씩 학습 해봅니다.

• 배열의 filter 메서드

  • 배열의 모든 요소 중에서 특정 조건을 만족하는 요소를 걸러내어 배열로 반환하는 메서드입니다.

  • filter 메서드 동작 방식

    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 cartoons = [
      {
        id: 1,
        bookType: 'cartoon',
        title: '식객',
        subtitle: '어머니의 쌀',
        createdAt: '2003-09-09',
        genre: '요리',
        artist: '허영만',
        averageScore: 9.66,
      },
      {
        id: 2,
        ...
    ];
    
    // 각 단행본의 출판 연도 2003년인지 판별하는 함수
    const insCreatedAt2003 = (cartoon) => {
      const fullYear = new Date(cartoon.createdAt).getFullYear();
      return fullYear === 2003;
    };
    
    // 출판 연도가 2003년인 책의 모음
    const filteredCartoons = cartoons.filter(isCreatedAt2003);
    

• 배열의 map 메서드

  • 하나의 데이터를 다른 데이터로 매핑(mapping) 할 때 사용합니다.

  • 반환형태 : 배열

  • 실제 map 활용 예시

    // 단행본 모음
    const cartoons = [
      {
        id: 1,
        bookType: 'cartoon',
        title: '식객',
        subtitle: '어머니의 쌀',
        createdAt: '2003-09-09',
        genre: '요리',
        artist: '허영만',
        averageScore: 9.66,
      },
      {
        id: 2,
        ...
    ];
    
    // 각 단행본의 부제를 반환하는 함수
    const findSubtitle = (cartoon) => {
      return cartton.subtitle;
    };
    
    // 출판 연도가 2003년인 책의 모음
    const subtitles = cartoons.map(findSubtitle);
    

• 배열의 reduce 메서드

  • 여러 데이터를 하나의 데이터로 응축(reduce)할 때 사용합니다.

  • 반환형태 : 하나의 값

  • 실제 reduce 활용 예시

    // 단행본 모음
    const cartoons = [
      {
        id: 1,
        bookType: 'cartoon',
        title: '식객',
        subtitle: '어머니의 쌀',
        createdAt: '2003-09-09',
        genre: '요리',
        artist: '허영만',
        averageScore: 9.66,
      },
      {
        id: 2,
        ...
    ];
    
    // 각 단행본의 평점을 누적값에 더하는 함수
    const scoreReducer = (sum, cartoon) => {
      return sum + cartoon.averageScore;
    };
    
    // 초기값에 0을 주고, 숫자의 형태로 평점을 누적합니다.
    const initialValue = 0;
    const cartoonsAvgScore = cartoons.reduce(scoreReducer, initialValue) / cartoons.length;
    

  • 색다른 reduce 활용 예시

    // 배열을 문자열로
    
    // 각 유저의 이름과 쉼표를 이어 붙이는 함수
    function joinName(resultStr, user) {
      resultStr = resultStr + user.name + ', ';
      return resultStr;
    }
    
    let users = [
      { name: 'Tim', age: 40 },
      { name: 'Satya', age: 30 },
      { name: 'Sundar', age: 50 }
    ]
    
    const resultStr = users.reduce(joinName, '');
    
    console.log(resultStr); // 'Tim, Satya, Sundar, '
    

    // 배열을 객체로
    
    // 각 유저의 이름 중 첫 글자를 객체의 키(Key)로 유저 정보를 키값(value)로 추가하는 함수
    function makeAddressBook(addressBook, user) {
      let firstLetter = user.name[0];
      
      if(firstLetter in addressBook) {
        addressBook[firstLetter].push(user);
      } else {
        addressBook[firstLetter] = [];
        addressBook[firstLetter].push(user);
      }
      
      return addressBook;
    }
    
    let users = [
      { name: 'Tim', age: 40 },
      { name: 'Satya', age: 30 },
      { name: 'Sundar', age: 50 }
    ]
    
    const addressBook = users.reduce(makeAddressBook, {});
    
    console.log(addressBook); // {T: Array(1), S: Array(2)}
    

이전에 map 메서드 같은 경우는 꽤 자주 사용하기도 해서 코플릿에서 제공하는 알고리즘 문제들을 풀때 수월할 줄 알았는데 아직 고차함수 메서드에 익숙하지 않은 부분이 있었습니다.

사이드 프로젝트 진행시에 적극적으로 활용하고 이론 내용들을 찾아보며 더 공부해야 할 것 같습니다.