코드스테이츠_S2U1_5W_화

윤뿔소·2022년 9월 20일
0

CodeStates

목록 보기
17/47
post-thumbnail

오늘은 고차함수를 배울 것이다!

고차 함수

  • 일급 객체(first-class citizen)의 세 가지 특징을 설명
  • 고차 함수(higher-order function)에 대해 설명
  • 고차 함수를 자바스크립트로 작성

정의

JS에는 다양한 타입의 데이터가 있음! 넘버, 문자열, 객체, 배열 등등
JS의 원시타입을 제외한 나머지 데이터는 객체다!

  • 변수, 배열, 객체 프로퍼티 등에 대입할 수 있다.
  • 특정 함수의 매개변수로 함수를 전달
  • 특정 함수의 리턴값으로 함수를 리턴
  • 객체와 동일하게 동적으로 프로퍼티를 생성하거나, 할당이 가능
  • 리터럴(객체)에 의해 생성 (런타임 생성)

위에 모두 해당하면 일급 객체로 취급하게 됨! 그 중 함수도 당연히 일급 객체로 취급된다.
함수의 일급 객체 특성은 다음과 같다.

  • 변수에 할당(assignment) 할 수 있다. (함수 표현식)
  • 다른 함수의 전달인자(argument)로 전달될 수 있다. (콜백)
  • 다른 함수의 결과로서 리턴될 수 있다. (클로저)
let foo = function(func){ 
	func();
}
foo(function() { // 2번
	console.log("test");
})

JS에서의 함수는 일급 객체로서 가질 수 있는 특성을 가져서 고차함수로 사용 가능하다!

  • 고차 함수(higher order function) : 함수를 전달인자(argument)로 받을 수 있고, 함수를 리턴할 수 있는 함수
  • 콜백 함수 : 함수의 전달인자로 전달되는 함수
  • 전달받은 고차 함수(caller)는 함수 내부에서 이 콜백 함수를 호출(invoke)할 수 있고 조건에 따라 콜백 함수의 실행 여부를 결정
  • ⭐️ 즉! 고차 함수가 부르고(call) 콜백함수가 인수로 들어와 응답(call back)을 해준 구조!

고차 함수 예시

설명으론 어려우니 예시보며 복습
1. 다른 함수를 인자로 받는 경우

function double(num) {
  return num * 2;
}
function doubleNum(func, num) {
  return func(num);
}
/*
 * 함수 doubleNum은 다른 함수를 인자로 받는 고차 함수
 * 함수 doubleNum의 첫 번째 인자 func에 함수가 들어올 경우
 * 함수 func는 함수 doubleNum의 콜백 함수
 * 아래와 같은 경우, 함수 double은 함수 doubleNum의 콜백 함수
 */
let output = doubleNum(double, 4);
console.log(output); // 8
  1. 함수를 리턴하는 경우
function adder(added) {
  return function (num) {
    return num + added;
  };
}
/*
 * 함수 adder는 다른 함수를 리턴하는 고차 함수
 * adder는 인자 한 개를 입력받아서 함수(익명 함수)를 리턴
 * 리턴되는 익명 함수는 인자 한 개를 받아서 added와 더한 값을 리턴
 */

// adder(5)는 함수이므로 함수 호출 연산자 '()'를 사용 가능
let output = adder(5)(3); // 8
console.log(output); // 8

// adder가 리턴하는 함수를 변수에 저장
// javascript에서 함수는 일급 객체이기 때문
const add3 = adder(3);
output = add3(2);
console.log(output); // 5
  1. 함수를 인자로 받고, 함수를 리턴하는 경우
function double(num) {
  return num * 2;
}
function doubleAdder(added, func) {
  const doubled = func(added);
  return function (num) {
    return num + doubled;
  };
}
/*
 * 함수 doubleAdder는 고차 함수
 * 함수 doubleAdder의 인자 func는 함수 doubleAdder의 콜백 함수
 * 함수 double은 함수 doubleAdder의 콜백으로 전달
 */

// doubleAdder(5, double)는 함수이므로 함수 호출 기호 '()'를 사용 가능
doubleAdder(5, double)(3); // 13

// doubleAdder가 리턴하는 함수를 변수에 저장 가능 (일급 객체)
const addTwice3 = doubleAdder(3, double);
addTwice3(2); // 8

그냥 함수 안 함수, 함수가 함수를 부르고 그런 느낌임

⭐️내장 고차 함수

악명의 filter(), map(), reduce()를 배울 것이다! 네이버 블로그도 보기

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

arr.filter(조건함수)

  • arr중 파라미터의 조건에 만족하는 요소만 걸러 배열로 반환
  • filter는 이렇게 조건에 맞는 데이터만 분류(filtering)할 때 사용
  • 의사코드
    1. 배열의 각 요소
    2. 특정 논리(함수)에 따르면, 사실(true)일 때
    3. 따로 분류(filter)
  • 예시 : 만화책 식객 27권의 정보가 배열에 담겨있음. 출판 연도가 2003년인 단행본만 담은 배열을 만드시오.
    1. 배열의 각 요소 : 각 식객 1- 27권의 정보
    2. 특정 논리(함수) : 책의 출판 연도가 2003년입니다. (true / false)
    3. 따로 분류 : 출판 연도가 2003년인 책의 정보

정의 코드

배열의 요소를 콜백 함수에 다시 전달, 콜백 함수는 전달받은 배열의 요소를 받아 함수를 실행하고, 콜백 함수 내부의 조건에 따라 참(true) 또는 거짓(false)을 리턴

// filter 메서드 정의 : 이해하기 위해선 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;
}

예시 코드

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

// 예시: 단행본 모음
const cartoons = [
  {
    id: 1,
    bookType: 'cartoon',
    title: '식객',
    subtitle: '어머니의 쌀',
    createdAt: '2003-09-09',
    genre: '요리',
    artist: '허영만',
    averageScore: 9.66,
  },
  {
    id: 2,
    // .. 이하 생략
  },
  // ... 이하 생략
]; 
// 단행본 한 권의 출판 연도가 2003인지 확인하는 함수
const isCreatedAt2003 = function (cartoon) {
  const fullYear = new Date(cartoon.createdAt).getFullYear()
  return fullYear === 2003;
}; 
// 출판 연도가 2003년인 책의 모음
const filteredCartoons = cartoons.filter(isCreatedAt2003); 

코플릿 13번

arr.map(적용함수)

  • filter는 걸러주었지만 map은 모든 배열에 적용될 수 있는 함수를 지정해 적용된 다른 배열로 배출!
  • map은 이렇게 하나의 데이터를 다른 데이터로 매핑(mapping) 할 때 사용
  • 의사코드
    1. 배열의 각 요소가
    2. 특정 논리(함수)에 의해
    3. 다른 요소로 지정(map)
  • 예시 : 만화책 배열의 각 책의 부제(subtitle)만 담은 배열 반환
    1. 배열의 각 요소 : 각 식객 1- 27권의 정보
    2. 특정 논리(함수) : 책 한 권의 부제를 찾음
    3. 다른 요소로 지정 : 각 식객 1- 27권의 부제

예시 코드

// 만화책 모음
const cartoons = [
  {
    id: 1,
    bookType: 'cartoon',
    title: '식객',
    subtitle: '어머니의 쌀',
    createdAt: '2003-09-09',
    genre: '요리',
    artist: '허영만',
    averageScore: 9.66,
  },
  {
    id: 2,
    // .. 이하 생략
  },
  // ... 이하 생략
]; 

// 만화책 한 권의 부제를 리턴하는 로직(함수)
const findSubtitle = function (cartoon) {
  return cartoon.subtitle;
}; 
// 각 책의 부제 모음 
const subtitles = cartoons.map(findSubtitle); // ['어머니의 쌀', ...]

arr.reduce(acc, cur)

  • reduce( (누적 계산값, 현재값) => { return 계산값 }, 초깃값 ) : 초깃값이 없으면 0번째 데이터를 초깃값으로
  • reduce는 이렇게 여러 데이터를, 하나의 데이터로 응축(reduce)할 때 사용
  • 의사코드
    1. 배열의 각 요소를
    2. 특정 방법(함수)에 따라
    3. 원하는 하나의 형태로
    4. 응축 (reduction)
  • 예시 : 만화책 배열의 각 단행본의 평점의 평균을 리턴
    1. 배열의 각 요소 : 각 식객 1- 27권의 정보
    2. 응축하는 방법 (함수) : 각 단행본의 평점을 누적값에 더합니다.
    3. 원하는 형태 : 숫자로 누적합니다.
    4. 응축된 결과 : 각 단행본의 평점의 합을 단행본의 길이로 나눈 평점의 평균

예시코드

// 단행본 모음
const cartoons = [
  {
    id: 1,
    bookType: 'cartoon',
    title: '식객',
    subtitle: '어머니의 쌀',
    createdAt: '2003-09-09',
    genre: '요리',
    artist: '허영만',
    averageScore: 9.66,
  },
  {
    id: 2,
    // .. 이하 생략
  },
  // ... 이하 생략
];

// 단행본 한 권의 평점을 누적값에 더함
const scoreReducer = function (sum, cartoon) {
  return sum + cartoon.averageScore;
}; 

// 초기값에 0을 주고, 숫자의 형태로 평점을 누적
let initialValue = 0 
// 모든 평점 합에 나눠 평균 도출
const cartoonsAvgScore = cartoons.reduce(scoreReducer, initialValue) / cartoons.length;

예시 코드2: reduce()의 색다른 재미

단순한 합도 많이 쓰이지만 문자열도 가능!

  1. 배열을 문자열로 : 이름을 합쳐서
  • 의사코드
    1. 배열의 각 요소 : 유저 정보
    2. 응축하는 방법 (함수) : 하나의 유저의 이름과 쉼표를 이어 붙임(concat)
    3. 원하는 형태 : 문자열로 누적
    4. 응축된 결과 : 쉼표로 구분되는 모든 유저의 이름
function joinName(resultStr, user) {
  resultStr = `${resultStr}, ${user.name}`;
  return resultStr;
}
let users = [
  { name: 'Tim', age: 40 },
  { name: 'Satya', age: 30 },
  { name: 'Sundar', age: 50 }
];
users.reduce(joinName, ''); // ', Tim, Satya, Sundar'

쉼표가 이상하게 붙지만 따로 빼줄 수도 있음~

  1. 배열을 객체로
  • 의사코드
  1. 배열의 각 요소 : 유저 정보
  2. 응축하는 방법 (함수) : 유저 한 명의 이름 중 첫 글자를 주소록 객체 속성의 키(key)로, 유저의 정보를 주소록 객체 속성의 값(value)으로 추가
  3. 원하는 형태 : 주소록 객체에 누적 (파라미터1)
  4. 응축된 결과 : 모든 유저의 정보가 알파벳으로 구분된 주소록 (파라미터2)
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 }
];
users.reduce(makeAddressBook, {});
/*
{
  T: [
    { name: 'Tim', age: 40 }
  ],
  S: [
    { name: 'Satya', age: 30 },
    { name: 'Sundar', age: 50 }
  ]
}
*/

reduce

좀 다시 해야겠다 직관적이지가 않아 이해가 안가는 부분이 있다.
복습

  • 적용 함수중 파라미터로 인수가 어떤게 들어가는지?

    • 이 답은 배열 자체의 값이 들어감
      // 가장 긴 문자열 리턴
      function getLongestElement(arr) {
      return arr.reduce((acc, next) => {
       return acc.length >= next.length ? acc : next
      }, '')
      }
      let output = getLongestElement(['one', 'two', 'three']);
      console.log(output); // --> 'three'
      위의 next은 'one' 그 자체가 들어간다! 그래서 .length붙여줘 문자열 자체 값을 이용하는 모습
    • 코드의 cur은 output의 배열자체, 배열 자체이기에 concat을 이용해 넣어주는 모습
      // 배열 합치기
      function joinArrayOfArrays(arr) {
      return arr.reduce((acc, cur) => acc.concat(cur));
      }
      let output = joinArrayOfArrays([
      [1, 4],
      [true, false],
      ['x', 'y'],
      ]);
      console.log(output); // --> [1, 4, true, false, 'x', 'y']
  • 나중에 활용하려면 어떻게 접근해야하는지?

의의

고차함수를 쓰는 이유와 '추상화'에 대해서 개념을 잡아보자

  • 추상화(Abstraction) : 잡한 어떤 것을 압축해서 핵심만 추출한 상태로 만드는 것
    • 우리가 어떠한 기능을 모두 알고 사용하는 건 아니다. 가령 브라우저를 키고 도메인에 들어갈 때, 주소에 어떤 의미가 담겨있는지 몰라도 그 주소만 입력하면 사이트에 접속할 수 있다는 것만 안다. 또 버스의 NFC 결제, 자차 시동 등이 있다. 즉! 생산성의 향상이 일어나는 것
    • CPU는 0과 1로만 이해하지만 브라우저에선 엔진이 대신 계산해줘 CPU가 이해할 수 있는 명령들을 우리는 내릴 수 있는 것이다.

이러한 역사를 통해 커스텀하기 제일 용이한 함수에 추상화를 넣었다!!!!

  • 우리는 생산성을 더욱 향상(기능을 압축)하기 위해 함수에 추상화를 넣어 '고차 함수'를 만들어내는 지경까지 왔다.
    • 일반 함수 : 함수 제작 = 값을 전달받아 값을 리턴 = 값에 대한 복잡한 로직은 감춤 = 값 수준에서의 추상화
    • 고차 함수 : 값과 사고의 추상화
      • 값 수준의 추상화: 단순히 값(value)을 전달받아 처리하는 수준
      • 사고의 추상화: 함수(사고의 묶음)를 전달받아 처리하는 수준
      • 고차 함수 = 함수를 전달받거나 함수를 리턴 = 사고(함수)에 대한 복잡한 로직은 감춤 = 사고 수준에서의 추상화
      • 즉! 고차 함수는 함수로 전달받고 함수로 로직을 처리!

추상화 예시 및 활용

function getOnlyMales(data) {
  return data.filter(function (d) {
    return d.gender === 'male';
  });
}

function getOnlyAges(data) {
  return data.map(function (d) {
    return d.age;
  });
}

function getAverage(data) {
  const sum = data.reduce(function (acc, cur) {
    return acc + cur;
  }, 0);
  return sum / data.length;
}

function compose(...funcArgs) {
  // compose는 여러 개의 함수를 인자로 전달받아 함수를 리턴하는 고차 함수
  // compose가 리턴하는 함수(익명 함수)는 임의의 타입의 data를 입력받아,
  return function (data) {
    // funcArgs의 요소인 함수들을 차례대로 적용(apply)시킨 결과를 리턴
    let result = data;
    for (let i = 0; i < funcArgs.length; i++) {
      result = funcArgs[i](result);
    }
    return result;
  };
}

// compose를 통해 함수들이 순서대로 적용된다는 것이 직관적
// 각각의 함수는 다른 목적을 위해 재사용(reuse)
const getAverageAgeOfMale = compose(
  getOnlyMales, // 배열을 입력받아 배열을 리턴하는 함수
  getOnlyAges, // 배열을 입력받아 배열을 리턴하는 함수
  getAverage // 배열을 입력받아 `number` 타입을 리턴하는 함수
);

const result = getAverageAgeOfMale(data);
console.log(result); // --> 26

+ 객체 지향에도 '추상화' 개념이 있어서 같이 생각하면 좋음
+ 내가 추상화 하여 기능 구현하는 것도 해보고싶다! 재밌고 뿌듯하겠다 좋은 추상화 기능을 만들면

코플릿

  • 30번 - 배열을 입력받아 가장 짧은 문자열 도출
    • 조건1 : 빈문자열 도출 - 문자열이 없을 시, 빈 배열 입력받은 경우
    • 조건2 : 길이 같을 시 앞 배열 우선
    • 조건3 : for, while 사용 불가
function findShortestWord(arr) {
  // TODO: 여기에 코드를 작성합니다.
  const newArr = arr.filter((el) => typeof el === "string");
  if (newArr.length === 0) {
    return "";
  }
  return newArr.reduce((acc, cur) => {
    return acc.length <= cur.length ? acc : cur;
  });
}
let output = findShortestWord([4, 'two', 2, 'three']);
console.log(output); // --> 'two'

해석 : filter 아이디어가 중요했음! filter로 걸러주면 빈문자열로 됐거나 빈문자열이면 이제 0으로 컷, 나머지는 reduce로 비교

  • 31번 - 학생 정보가 담긴 객체 데이터의 배열을 입력받아 아래 조건으로 변형된 배열로 반환
    1. 남학생들의 정보는 리턴하는 배열에서 제외
    2. 'grades' 속성값은 평균값(number 타입)으로 바꿈
    3. 반복문 사용 불가
      // 입력받은 배열 데이터
      let studentList = [
      {
        name: 'Anna',
        gender: 'female',
        grades: [4.5, 3.5, 4],
      },
      {
        name: 'Dennis',
        gender: 'male',
        country: 'Germany',
        grades: [5, 1.5, 4],
      },
      {
        name: 'Martha',
        gender: 'female',
        grades: [5, 4, 4, 3],
      },
      {
        name: 'Brock',
        gender: 'male',
        grades: [4, 3, 2],
      },
      ];
      forEach, reduce도 가능
profile
코뿔소처럼 저돌적으로

0개의 댓글