오늘은 고차함수를 배울 것이다!
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
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
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
, map
, reduce
, forEach
, find
, sort
, some
, every
arr.filter(조건함수)
- arr중 파라미터의 조건에 만족하는 요소만 걸러 배열로 반환
- filter는 이렇게 조건에 맞는 데이터만 분류(filtering)할 때 사용
- 의사코드
- 배열의 각 요소
- 특정 논리(함수)에 따르면, 사실(true)일 때
- 따로 분류(filter)
- 예시 : 만화책 식객 27권의 정보가 배열에 담겨있음. 출판 연도가 2003년인 단행본만 담은 배열을 만드시오.
- 배열의 각 요소 : 각 식객 1- 27권의 정보
- 특정 논리(함수) : 책의 출판 연도가 2003년입니다. (true / false)
- 따로 분류 : 출판 연도가 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);
arr.map(적용함수)
filter
는 걸러주었지만map
은 모든 배열에 적용될 수 있는 함수를 지정해 적용된 다른 배열로 배출!- map은 이렇게 하나의 데이터를 다른 데이터로 매핑(mapping) 할 때 사용
- 의사코드
- 배열의 각 요소가
- 특정 논리(함수)에 의해
- 다른 요소로 지정(map)
- 예시 : 만화책 배열의 각 책의 부제(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); // ['어머니의 쌀', ...]
arr.reduce(acc, cur)
- reduce( (누적 계산값, 현재값) => { return 계산값 }, 초깃값 ) : 초깃값이 없으면 0번째 데이터를 초깃값으로
- reduce는 이렇게 여러 데이터를, 하나의 데이터로 응축(reduce)할 때 사용
- 의사코드
- 배열의 각 요소를
- 특정 방법(함수)에 따라
- 원하는 하나의 형태로
- 응축 (reduction)
- 예시 : 만화책 배열의 각 단행본의 평점의 평균을 리턴
- 배열의 각 요소 : 각 식객 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()
의 색다른 재미단순한 합도 많이 쓰이지만 문자열도 가능!
- 배열을 문자열로 : 이름을 합쳐서
- 의사코드
- 배열의 각 요소 : 유저 정보
- 응축하는 방법 (함수) : 하나의 유저의 이름과 쉼표를 이어 붙임(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, ''); // ', Tim, Satya, Sundar'
쉼표가 이상하게 붙지만 따로 빼줄 수도 있음~
- 배열을 객체로
- 의사코드
- 배열의 각 요소 : 유저 정보
- 응축하는 방법 (함수) : 유저 한 명의 이름 중 첫 글자를 주소록 객체 속성의 키(key)로, 유저의 정보를 주소록 객체 속성의 값(value)으로 추가
- 원하는 형태 : 주소록 객체에 누적 (파라미터1)
- 응축된 결과 : 모든 유저의 정보가 알파벳으로 구분된 주소록 (파라미터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 } ] } */
좀 다시 해야겠다 직관적이지가 않아 이해가 안가는 부분이 있다.
복습
적용 함수중 파라미터로 인수가 어떤게 들어가는지?
// 가장 긴 문자열 리턴
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붙여줘 문자열 자체 값을 이용하는 모습// 배열 합치기
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
+ 객체 지향에도 '추상화' 개념이 있어서 같이 생각하면 좋음
+ 내가 추상화 하여 기능 구현하는 것도 해보고싶다! 재밌고 뿌듯하겠다 좋은 추상화 기능을 만들면
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로 비교
// 입력받은 배열 데이터
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도 가능