[SEB FE] Section 2
Unit1 - [JavaScript] 고차 함수
- 고차함수
- 내장 고차함수
- 고차함수의 중요성
학습목표
- 일급 객체(first-class citizen)의 세 가지 특징을 설명할 수 있다.
- 고차 함수(higher-order function)에 대해 설명할 수 있다.
- 고차 함수를 자바스크립트로 작성할 수 있다.
개념학습
일급 객체
JS의 대표적인 일급 객체 중 하나가 함수이다. JS에서 함수는 아래와 같이 특별하게 취급된다.
- 변수에 할당(assignment) 할 수 있다.
- 다른 함수의 전달인자(argument)로 전달될 수 있다.
- 다른 함수의 결과로서 리턴될 수 있다.
함수를 변수에 할당할 수 있기 때문에, 함수를 배열의 요소나 객체의 속성값으로 지정할 수 있다. 함수를 데이터(string, number, boolean, array, object)처럼 다룰 수 있다.
- 변수에 함수를 할당하는 경우
/*
* 아래는 변수 square에 함수를 할당하는 함수 표현식이다.
* JS에서 함수는 일급 객체이기 때문에 변수에 할당할 수 있다.
*
* 함수 표현식은 할당 전에 사용할 수 없다.
* square(7); // --> ReferenceError: Can't find variable: square
*/
const = square = function (num) {
return num * num;
};
// 변수 square에는 함수가 할당되어 있으므로 (일급 객체), 함수 호출 연산자 '()'를 사용할 수 있다.
output = square(7);
console.log(output); // --> 49- 또한 함수는 일급 객체의 특징을 가지기 때문에 아래처럼 객체 속성의 값으로 할당될 수 있다.
const cat = {
name: 'nabi',
age: 3,
cry: function(){
console.log('miaow...')
}
}고차 함수의 이해
- 고차 함수(higher order function)는 함수를 전달인자(argument)로 받을 수 있고, 함수를 리턴할 수 있는 함수이다.
- '함수를 리턴하는 함수'와 '함수를 전달인자로 받는 함수' 모두, 고차 함수로 사용한다.
콜백 함수(callback function)
- 다른 함수(caller)의 전달인자(argument)로 전달되는 함수를 콜백 함수(callback function)라고 한다.
- 콜백 함수를 전달받은 고차 함수(caller)는, 함수 내부에서 이 콜백 함수를 호출(invoke)할 수 있고, 조건에 따라 콜백 함수의 실행 여부를 결정할 수도 있다.
다른 함수를 인자로 받는 경우
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에 대해서 이해할 수 있다.
- filter에 대한 이해를 기반으로, 나머지 내장 고차 함수를 학습할 수 있다.
- filter, map, reduce, forEach, find, sort, some, every
- 고차 함수를 쓰는 이유를 설명할 수 있다.
- 고차 함수를 활용하여 프로그램을 작성할 수 있다.
개념학습
내장 고차 함수
- JS에는 기본적으로 내장된 고차 함수가 여럿 있다. 그중에서 배열 메서드들 중 일부가 대표적인 고차 함수에해당한다.
내장 고차 함수 filter 이해하기
- 배열의 filter 메서드는, 모든 배열의 요소 중에서 특정 조건을 만족하는 요소를 걸러내는 메서드이다.
- filter 메서드가 고차함수인 이유는 filter 메서드의 전달인자로 함수를 전달했기 때문이다.
let arr = [1, 2, 3];
let result =
arr.filter(function(ele) {
return ele % 2 !== 0
});// 아래 코드에서 '짝수'와 '길이 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 메서드는, 걸러내기 위한 조건을 명시한 함수를 전달인자로 받기 때문에 고차 함수이다.
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;
};
/*
* 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;
* }
*/- filter 메서드는 배열의 요소를 콜백 함수에 다시 전달한다. 콜백 함수는 전달받은 배열의 요소를 받아 함수를 실행하고, 콜백 함수 내부의 조건에 따라 참(true) 또는 거짓(false)을 리턴해야 한다.
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']내장 고차 함수 map 이해하기
- map은 배열의 모든 요소에게 동일한 행동을 준 값에 대하여 모두 반환한다.
- 행동은 함수로 작성하여 인자로 넣는다.
- 기존 배열을 수정하지 않는다.
let arr = [1, 2, 3];
let result =
arr.map(function(ele) {
return ele * 2
})
result;내장 고차 함수 reduce 이해하기
- reduce는 배열을 하나의 값으로 만들어 준다.
- reduce는 초깃값을 정할 수 있다. 정하지 않는다면 배열의 제일 첫 번째 값이 초깃값이 된다.
- 초깃값은 누적된 값에 기반이 된다.
- 그 다음 값이 현재 값이 되는 데 이들은 우리가 정한 방식에 따라 결정된다.
- 배열 전부 계산이 된다.
- 초깃값을 정한다면 배열의 첫 번째 값이 현재값으로 지정된다.
reduce는 다양한 형태로 사용된다.(연산, 비교, 다른 형태로 만들기 등등)
초깃값 X
let arr = [1, 2, 3];
let result = arr.reduce(
function(acc, cur, idx) {
acc + cur;
return acc;
});
result;초깃값 O
let arr = [1, 2, 3];
let result = arr.reduce(
function(acc, cur, idx) {
acc + cur;
return acc;
}, 1);
result;고차 함수의 중요성
학습목표
- 추상화에 대해 설명할 수 있다.
- 추상화의 관점에서 고차 함수가 갖는 이점에 대해 설명할 수 있다.
- 고차 함수를 통해 사고 수준에서 추상화를 달성할 수 있다.
개념학습
고차 함수와 추상화
- 추상화는 생산성을 향상시킨다.
- 고차 함수는 사고의 추상화 수준으로 끌어올린다.
- 값 수준의 추상화: 단순히 값(value)을 전달받아 처리하는 수준
- 사고의 추상화: 함수(사고의 묶음)를 전달받아 처리하는 수준
- 재사용이 가능하다.
프론트엔드 공부하고 있는 정우시입니다.