js/node – 고차 함수
고차 함수를 통해 높은 수준에서 사고하는 방식을 학습
→ 보다 복잡한 알고리즘의 구현
고차함수 이해하기
학습 목표
* 일급 객체(first-class citizen)의 세가지 특징
* 고차 함수(higher-order function)에 대한 설명
* 고차 함수를 자바스크립트로 작성
일급 객체(First-class citizen)
특별한 대우를 받는 함수
비행기에 First class가 있듯이 자바스크립트에도 특별한 대우를 받는 일급 객체가 존재. 그 중 하나가 함수
→ 즉, 함수는 일급 객체(First-class citizen) 이다!
자바스크립트에서 함수는 아래와 같이 특별하게 취급됨
* 변수에 할당(assignment) 가능
* 다른 함수의 인자(argument)로 전달 가능
* 다른 함수의 결과로서 리턴될 수 있음
변수에 할당 가능하므로 함수를 배열의 요소나 객체의 속성 값으로 저장 가능
→ 함수를 데이터(string, number, boolean, array, object)를 다루듯이 다룰 수 있다는 의미!
변수에 함수를 할당하는 경우
ex) 변수를 할당한 다음 사용하는 함수 표현식의 예
/*
* 아래는 변수 square에 함수를 할당하는 함수 표현식입니다.
* 자바스크립트에서 함수는 일급 객체이기 때문에 변수에 저장할 수 있습니다.
*
* 함수 표현식은 할당 전에 사용할 수 없습니다.(호이스팅이 안되므로)
* square(7); // --> ReferenceError: Can't find variable: square
*/
const square = function (num) {
return num * num;
};
// square에는 함수가 저장되어 있으므로 (일급 객체), 함수 호출 연산자 '()'를 사용할 수 있습니다.
output = square(7);
console.log(output); // --> 49
호이스팅?
* 호이스팅은 선언된 위치에 관계없이 어디서든 함수를 사용 가능하게 함
* 코드가 실행되는 과정에서 함숫 선언부를 코드의 최상단으로 끌어올리는 것처럼 보이게 함
→ 하지만 함수 선언식의 호이스팅에 지나치게 의존하면 추후 코드의 유지보수가 어려워짐
반면에 함수 표현식은 함수의 할당과 실행 위치에 따라 결과가 달라지므로 코드의 위치가 예측 가능해서
유지보수 측면에서 유리
고차 함수란?(what is higher order function?)
고차 함수(higher order function)는 함수를 인자(argument)로 받을 수 있고, 함수의 형태로 리턴할 수 있는 함수
이전 콘텐츠에서 확인했듯이, 함수는 변수에 저장할 수 있습니다. 그리고 함수는, 함수를 담은 변수를 인자로 전달받을 수 있습니다. 마찬가지로, 함수 내부에서 변수에 함수를 할당할 수 있습니다. 그리고 함수는 이 변수를 리턴할 수 있습니다. 여기서 변수에 할당하지 않고 함수를 바로 이용할 수 있습니다. 어떤 고차 함수에 함수를 인자로 전달하고, 고차 함수는 함수 자체를 리턴합니다. 변수가 빠졌을 뿐, 동일하게 동작합니다.
→ 이때 다른 함수(caller)의 인자(argument)로 전달되는 함수를 콜백 함수(callback function)
콜백 함수를 전달받은 고차 함수(caller)는, 함수 내부에서 이 콜백 함수를 호출(invoke) 가능. caller는 조건에 따라 콜백 함수의 실행 여부를 결정
→ 함수를 리턴하는 함수 의 경우 고안한 사람의 이름을 따 커리 함수 라 부름
그러나 정확하게 구분하자면 고차함수가 커리 함수를 포함
→ 고차 함수: 함수를 리턴하는 함수(커리함수) + 함수를 인자로 받는 함수
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
내장 고차 함수 이해하기
학습 목표
* 배열 내장 고차 함수 filter
* filter에 대한 이해를 기반으로 나머지 고차 함수 학습
- forEach, find, filter, map, reduce, sort, some, every
* 추상화(abstraction)에 대한 설명
* 추상화의 관점에서 고차 함수가 갖는 이점
* 고차 함수를 활용한 프로그램 작성
내장 고차 함수(Built-in higher order functions) 이해하기
자바스크립트에는 기본적으로 내장된 고차 함수가 존재
→ 대표적으로 배열 메소드 중 filter를 예시
배열의 filter 메소드는, 모든 배열의 요소 중에서 특정 조건을 만족하는 요소를 걸러내는 메소드
number 타입을 요소로 갖는 배열에서 짝수만을 걸러내거나, 18 보다 작은 수만을 걸러냅니다. string 타입을 요소로 갖는 배열에서, 길이가 10 이하인 문자열만 걸러내거나, 'korea'만 걸러낼 수도 있습니다.
// 아래 코드에서 '짝수'와 '길이 5 이하'는 문법 오류(syntax error)에 해당합니다.
// 의미만 이해해도 충분합니다.
let arr = [1, 2, 3, 4];
let output = arr.filter(짝수);
console.log(output); // ->> [2, 4]
arr = ['hello', 'code', 'states', 'happy', 'hacking'];
output = arr.filter(길이 5 이하)
console.log(output); // ->> ['hello', 'code', 'happy']
→ 여기서 걸러내는 기준이 되는 특정 조건은 filter 메소드의 인자로 전달
이때 전달되는 조건은 함수의 형태
filter 메소드는 걸러내기 위한 조건을 명시한 함수를 인자로 받기 때문에 고차함수
ex) filter 메소드가 동작하는 방식
// 아래 코드는 정확한 표현 방식은 아닙니다.
// 의미만 이해해도 충분합니다.
let arr = [1, 2, 3];
// 배열의 filter 메소드는 함수를 인자로 받는 고차함수입니다.
// arr.filter를 실행하면 내부적으로 arr에 접근할 수 있다고 생각해도 됩니다.
arr.filter = function (arr, func) {
const newArr = [];
for (let i = 0; i < arr.length; i++) {
// filter에 인자로 전달된 콜백 함수는 arr의 각 요소를 전달받아 호출됩니다.
// 콜백 함수가 true를 리턴하는 경우에만 새로운 배열에 추가됩니다.
if (func(arr[i]) === true) {
newArr.push(this[i]);
}
}
// 콜백 함수의 결과가 true인 요소들만 저장된 배열을 리턴합니다.
return newArr;
};
/*
* 보다 정확한 정의는 프로토 타입과 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;
* }
*/
filter 메소드는 배열의 요소를, 인자로 전달되는 콜백 함수에 다시 전달합니다. 콜백 함수는 전달받은 배열의 요소를 받아 함수를 실행하고, 콜백 함수 내부의 조건에 따라 참(true) 또는 거짓(false)을 리턴해야 합니다. 적어도 filter 메소드는 이런 함수를 기대하고 있습니다. 처음 본 코드에 이 점을 반영하여 다시 코드를 작성하면, 다음과 같습니다.
ex) 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 메소드에 들어가는 콜백 함수는 truthy 또는 falsy를 리턴할 수 있다
그러나, filter 메소드에 들어가는 콜백함수는 Deep equality를 통해 조건을 명확하게 밝히는 걸 권장
→ 최대한 콜백 함수가 내부 조건에 따라 참(true), 거짓(false)을 리턴하도록 구현할 것!
자바 스크립트 배열 메소드 중 고차 함수 추가 학습(js array method)
forEach, find, filter, map, reduce, sort, some, every
고차 함수 map
map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환
기존 배열을 수정하진 않는다(immutable)
실제 map 활용 예시
map 활용 시 다음 과정을 꼭 기억
* 배열의 각 요소가
* 특정 논리(함수)에 의해
* 다른 요소로 지정(map)된다
예제: 만화책 식객의 부제(subtitle)만을 담은 배열을 생성
// 배열의 각 요소가: 각 식객 1~27권의 정보
// 특정 논리(함수): 책 한권의 부제(subtitle)을 찾기
// 다른 요소로 지정: 각 식객 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); // 각 책의 부제 모음
→ 이렇게 map 메소드는 하나의 데이터를 다른 데이터로 매핑(mapping)할 때 사용
고차 함수 filter
filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환
→ 기존 배열을 변경x(immutable)
실제 filter 활용 예시
filter 활용시 다음 과정을 꼭 기억!
* 배열의 각 요소가
* 특정 논리(함수)에 따르면 사실(boolean)일 때
* 따로 분류(filter)
예제: 만화책 식객의 정보가 배열에 담겨 있다. 출판년도가 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,
// .. 이하 생략
},
// ... 이하 생략
]; // 단행본의 모음
const isCreatedAt2003 = function (cartoon) {
const fullYear = new Date(cartoon.createdAt).getFullYear()
return fullYear === 2003;
}; // 단행본 한 권의 출판판년도가 2003인지 확인하는 함수
const filteredCartoons = cartoons.filter(isCreatedAt2003); // 출판년도가 2003년인 책의 모음
→ flter() 메소드는 이렇게 조건의 맞는 데이터만 분류(filtering)할 때 사용
고차 함수 reduce
reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환
리듀서(reducer) 함수는 네 개의 인자를 가진다
누산기 (acc)
현재 값 (cur)
현재 인덱스 (idx)
원본 배열 (src)→ 리듀서 함수의 반환 값은 누산기에 할당되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 된다
구문
arr.reduce(callback[, initialValue])→ intialValue가 주어지면 인덱스0부터 시작하고 주어지지 않으면, 인덱스1부터 시작해 콜백함수를 실행하고 첫번째 인덱스(인덱스0)는 initialValue로 사용함.
실제 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;
}; // 단행본 한 권의 평점을 누적값에 더한다.
let initialValue = 0 // 숫자의 형태로 평점을 누적한다.
const cartoonsAvgScore = cartoons.reduce(scoreReducer, initialValue) / cartoons.length;
// 모든 책의 평점을 누적한 평균을 구한다.
→ reduce() 메소드는 이렇게 여러 데이터를, 하나의 데이터로 응축(reduction)할 때 사용
reduce의 색다른 사용법
배열을 문자열로 또는 배열을 객체로 등 활용 가능
ex) 배열을 문자열로
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, ‘’); //문자열로 넣기 위해 이니셜밸류 ‘’
ex) 배열을 객체로
응축된 결과 : 모든 유저의 정보가 알파벳으로 구분된 주소록
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, {}); //객체로 넣기 위해 {}
왜 꼭 고차 함수를 써야할까?(why higher order function?)
높은 수준에서 생각하기
추상화와 관련
→ 복잡한 어떤 것을 압축해서 핵심만 추출한 상태로 만드는 것
→ 자바스크립트를 비롯한 많은 프로그래밍 언어 역시, 추상화의 결과
→ 추상화를 할 때 다양한 프로그램을 보다 쉽게 작성 가능. 문제의 해결의 더 쉬워짐
* 추상화 = 생산성(productivity)의 향상
추상화의 관점에서 함수를 보면, 함수는 사고(thought) 또는 논리(logic)의 묶음
→ 함수를 통해 얻은 추상화를 한 단계 더 높인 것인 고차 함수!
기존의 일반 함수는 값을 전달 받아 그 값을 가지고 복잡한 작업을 수행하는 구조
→ 값 수준에서의 추상화
* 함수 = 값을 전달 받아 값을 리턴 = 값에 대한 복잡한 로직은 감추어져 있다 = 값 수준에서의 추상화
고차 함수는 이 추상화의 수준을 사고의 추상화 수준으로 끌어 올린 것
* 값 수준의 추상화: 단순히 값(value)을 전달 받아 처리하는 수준
* 사고의 추상화: 함수(사고의 묶음)를 전달 받아 처리하는 수준
→ 즉, 고차 함수를 통해 보다 높은 수준(higher order)에서 생각할 수 있다
* 고차 함수 = 함수를 전달 받거나 함수를 리턴한다 = 사고(함수)에 대한 복잡한 로직은 감추어져 있다 = 사고 수준에서의 추상화
→ 추상화의 수준이 높아질 수록 생산성도 비약적으로 상승함
고차 함수 사용의 예(Example of using HoFs)
HoFs: Higher Order Functions
사고 수준의 추상화의 예시
const data = [
{
gender: 'male',
age: 24,
},
{
gender: 'male',
age: 25,
},
{
gender: 'female',
age: 27,
},
{
gender: 'female',
age: 22,
},
{
gender: 'male',
age: 29,
},
];
→ 위와 같은 데이터가 주어지고 이를 순차적으로 처리하고자 한다
남성들의 평균 나이를 구하는 경우?
ex) 남성들의 평균 나이를 구하는 하나의 함수 getAverageAgeOfMaleAtOnce
function getAverageAgeOfMaleAtOnce(data) {
const onlyMales = data.filter(function (d) {
// data.filter는 배열의 각 요소에 인자로 전달받은 함수를 적용하고,
// 그 결과가 true인 요소만을 갖는 배열을 리턴합니다.
return d.gender === 'male';
});
const numOfMales = onlyMales.length;
const onlyMaleAges = onlyMales.map(function (d) {
// onlyMales.map는 배열의 각 요소에 인자로 전달받은 함수를 적용하고,
// 각 결과를 요소로 갖는 배열을 리턴합니다.
return d.age;
});
const sumOfAges = onlyMaleAges.reduce(function (acc, cur) {
// onlyMaleAges.reduce는 배열의 각 요소에 인자로 전달받은 함수를 적용하고,
// 각 결과를 두 번째 인자로 전달받은 초기값(0)에 누적한 결과를 리턴합니다.
return acc + cur;
}, 0);
return sumOfAges / numOfMales;
→ 위의 코드도 괜찮지만 오로지 ‘남성’의 ‘평균 나이’만 구하는 작업에만 사용 가능
→ male 을 매개변수화하면 ‘남성’ 또는 ‘여성’의 ‘평균 나이’ 구하기 가능
→ 그 외에도 ‘남성’의 ‘최연소 나이’, ‘여성’중 ‘최연소 나이와 최연장 나이의 차이’ 구하기 등에서도 작성된 로직을 사용 가능
추상화는 고차 함수를 통해, 보다 쉽게 달성할 수 있습니다. 아래의 compose 함수는 입력 받은 함수를 순서대로 결합하는 고차 함수입니다. 각각의 작업(filter, map, reduce)은 별도의 함수로 분리되어, compose의 인자로 전달되는 콜백 함수가 됩니다.
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)은 모듈화되어서 다른 목적을 위해 재사용 될 수 있다
zoom 강의 내용 정리
고차 함수를 만들 때 매개변수의 네이밍을 잘 하는 것도 중요하다
→ 다른 사람이 딱 봤을 때 매개변수에 함수가 들어가겠구나? 숫자가 들어가겠구나? 딱 알 수 있도록!
함수를 일회용 사용할 때는 익명 함수
함수를 재활용 하고자 할 때는 함수 선언을 하는 것이 좋다
왜 고차 함수 안에 인자를 함수를 써야 하는가?
ex) arr.filter(func);
→ 인자로 함수를 쓰면 다양한 상황에서 활용도가 높아진다?
재사용성등…
Array.prototype.find()
find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefined를 반환합니다.
구문
arr.find(callback[, thisArg]).filter와 .map의 차이?
.filter: 내가 원하는 것만(싫어하는 거는 빼고 좋아하는 거만 넣듯이) 필터링 가능
.map: 모든 요소에다가 원하는 값을 전체적으로 적용하거나 빼거나 가능
.reduce 의 활용
reduce는 활용성이 높다!
→ Array.prototype.reduce(func(acc, cur){
(어떠한 로직을 작성하든)
return acc; // 결과적으로는 이런 형태임
}, 초기값(선택임));
→ 이 형태를 이용해서 다양한 활용이 가능하다
초기값이 [] 빈 배열이면?
→ 리턴값이 배열 형태로 됨
초기값이 {} 빈 객체형이면?
→ 리턴값이 객체로 됨
→ 즉 초기값의 자료형을 어떻게 가져오느냐에 따라 형변환?이 가능
→ 이 외에도 다양한 활용이 가능
'SE Bootcamp 내용 정리' 카테고리의 다른 글
| React - 기초 - 2 (0) | 2021.09.16 |
|---|---|
| React – 기초 (0) | 2021.09.15 |
| js/browser - DOM -2 (0) | 2021.09.13 |
| js/browser - 유효성 검사 실습 (0) | 2021.09.10 |
| js/brower - DOM -1 (0) | 2021.09.10 |