section2/unit1/Javascript 고차함수(9/20)

블로깅 주제

• Javascript 고차함수

---

1. 지금 현재, 당신의 기분이나 느낌을 표현해 주세요.

• 어제 section1을 마무리했다. 눈깜짝해버릴 사이에 지나가버린 section1... section2에서는 보다 더 다양한 것을 배운다고 한다. 당연히 어렵겠지만, 좌절하지말고 앞으로 나아갔으면 좋겠다. 

2. 오늘 무엇을 학습한 내용 중 지금 떠올릴 수 있는 단어를 모두 나열해 주세요.

• 고차함수, 일급객체, 내장 고차함수(filter, map, reduce)

3. 2에서 작성한 단어를 가지고, 오늘의 학습 내용을 설명해 보세요.

- 일급객체(특별한 대우를 받음)

대표적인 일급객체: 함수

• 변수에 할당(assignment) 할 수 있다.
• 다른 함수의 전달인자(argument)로 전달될 수 있다.
• 다른 함수의 결과로서 리턴될 수 있다.

 

변수에 함수를 할당하기

const square = function (num) {
  return num * num;
};

// 변수 square에는 함수가 할당되어 있으므로 (일급 객체), 함수 호출 연산자 '()'를 사용할 수 있다.
output = square(7);
console.log(output); // --> 49

함수는 변수에 저장된 데이터를 전달 인자로 받거나, 리턴 값으로 사용할 수 있다.

so, 함수도 변수에 저장될 수 있기 때문에 함수를 인자로 받거나, 리턴 값으로 사용할 수 있다.

 

- 고차함수: 함수를 전달인자(argument)로 받을 수 있고, 함수를 리턴할 수 있는 함수

콜백 함수(callback function) : 다른 함수(caller)의 전달인자(argument)로 전달되는 함수

콜백 함수를 전달받은 고차 함수(caller)는,

함수 내부에서 이 콜백 함수를 호출(invoke)할 수 있고, 조건에 따라 콜백 함수의 실행 여부를 결정할 수도 있다. 아예 호출하지 않을 수도 있고, 여러 번 실행할 수도 있다.

커링 함수: 함수를 전달인자로 받는 함수

https://ivorycode.tistory.com/entry/JavaScript-Closure

[JavaScript] - Closure

 

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

 

2. 함수를 리턴하는 경우

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

 

3. 함수를 인자로 받고, 함수를 리턴하는 경우

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

 

- 내장 고차함수

1. filter  : 모든 배열의 요소 중에서 특정 조건을 만족하는 요소를 걸러내는 메서드

• 배열의 각 요소가 특정 논리(함수)에 따르면, 사실(true)일 때 따로 분류(filter)

# 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']

 

# 실제 filter 사용 예시

문제)

만화책 식객 27권의 정보가 배열에 담겨있습니다. 출판 연도가 2003년인 단행본만 담은 배열을 만드세요.

수도코드)

• 배열의 각 요소 : 각 식객 1- 27권의 정보
• 특정 논리(함수) : 책의 출판 연도가 2003년입니다. (true / false)
• 따로 분류 : 출판 연도가 2003년인 책의 정보

// 단행본 모음
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);

---

2. map 

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

• 배열의 각 요소가 특정 논리(함수)에 의해 다른 요소로 지정(map)

 

# 실제 map 사용 예시

문제)

만화책 식객 27권의 정보가 배열에 담겨있습니다. 각 책의 부제(subtitle)만 담은 배열을 만드세요.

수도 코드)

• 배열의 각 요소 : 각 식객 1- 27권의 정보
• 특정 논리(함수) : 책 한 권의 부제를 찾습니다.
• 다른 요소로 지정 : 각 식객 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); // ['어머니의 쌀', ...]

---

3. reduce

여러 데이터를, 하나의 데이터로 응축(reduce)할 때 사용

• 배열의 각 요소를 특정 방법(함수)에 따라 원하는 하나의 형태로 응축(reduction)

 

# 실제 reduce 사용 예시

문제)

만화책 식객 27권의 정보가 배열에 담겨있습니다. 각 단행본의 평점의 평균을 리턴하세요.

수도코드)

• 배열의 각 요소 : 각 식객 1- 27권의 정보
• 응축하는 방법 (함수) : 각 단행본의 평점을 누적값에 더합니다.
• 원하는 형태 : 숫자로 누적합니다.
• 응축된 결과 : 각 단행본의 평점의 합을 단행본의 길이로 나눈 평점의 평균

// 단행본 모음
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;

 

# reduce의 색다른 사용법

1) 배열을 문자열로

수도 코드)

• 배열의 각 요소 : 유저 정보
• 응축하는 방법 (함수) : 하나의 유저의 이름과 쉼표를 이어 붙입니다(concat)
• 원하는 형태 : 문자열로 누적합니다.
• 응축된 결과 : 쉼표로 구분되는 모든 유저의 이름

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, '');

 

2) 배열을 객체로

수도 코드)

• 배열의 각 요소 : 유저 정보
• 응축하는 방법 (함수) : 유저 한 명의 이름 중 첫 글자를 주소록 객체 속성의 키(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 }
];

users.reduce(makeAddressBook, {});

최종 리턴 값

{
  T: [
    { name: 'Tim', age: 40 }
  ],
  S: [
    { name: 'Satya', age: 30 },
    { name: 'Sundar', age: 50 }
  ]
}

---

- 0/0 값은 NaN이다.

- 파라미터, 아규먼트 정의

• 파라미터 = 매개변수 = 인자
• 아규먼트 = 전달인자 = 인수

https://velog.io/@colki/JS-parameter-%EC%99%80-argument-%EC%9D%98-%EC%B0%A8%EC%9D%B4-%EC%9D%B8%EC%88%98-%EC%9D%B8%EC%9E%90

[JS] parameter 와 argument 의 차이 (인수, 인자)