Section 2 Unit 1 복습하기(고차함수)
2023-05-25(화)
Chapter1. 고차 함수
- 일급 객체(first-class citizen)의 세 가지 특징을 설명할 수 있다.
- 고차 함수(higher-order function)에 대해 설명할 수 있다.
- 고차 함수를 자바스크립트로 작성할 수 있다.
Chapter2. 내장 고차 함수
- 배열 내장 고차 함수 filter, map, reduce에 대해서 이해할 수 있다.
- filter, map, reduce에 대한 이해를 기반으로 나머지 고차 함수를 스스로 학습할 수 있다.
- forEach, find, sort, some, every
- 고차 함수를 쓰는 이유를 설명할 수 있다.
- 고차 함수를 활용하여 프로그램을 작성할 수 있다.
Chapter3. 고차 함수의 중요성
- 추상화(abstraction)에 대해 설명할 수 있다.
- 추상화의 관점에서 고차 함수가 갖는 이점에 대해 설명할 수 있다.
- 고차 함수를 통해 사고 수준에서의 추상화를 달성할 수 있다.
Chapter1. 고차 함수
1. 일급 객체(first-class citizen)의 세 가지 특징을 설명할 수 있다.
1. 변수에 할당할 수 있다.
2. 다른 함수의 전달인자로 전달될 수 있다.
3. 다른 함수의 결과로써 리턴될 수 있다.
2. 고차 함수(higher-order function)에 대해 설명할 수 있다.
= 고차 함수의 정의는 함수를 매개변수로 사용하거나 함수를 반환하는 함수이다.
이때 다른 함수의 전달인자로 전달되는 함수를 콜백 함수라고 합니다.
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); // -> 82. 함수를 리턴하는 경우
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
3. 고차 함수를 자바스크립트로 작성할 수 있다.
Chapter2. 내장 고차 함수
1.배열 내장 고차 함수 filter, map, reduce에 대해서 이해할 수 있다.
2.filter, map, reduce에 대한 이해를 기반으로 나머지 고차 함수를 스스로 학습할 수 있다.
filter
filter 메서드는 Boolean만 반환할 수 있는데 true일 경우 해당 요소를 새로운 배열에 추가하고, false일경우 추가하지않는다. filter 메서드는 특정 조건에 일치하는 요소만 배열에 담고 싶을 때 사용한다. 사용 문법과 예시는 다음과 같다.
arr.filter(callback(element[, index[, array]])[, thisArg])사용예시1
const fruits = [
{name: "Apple", price: 1000},
{name: "Banana", price: 5000},
{name: "Grape", price: 4000},
{name: "Watermelon", price: 20000},
]
const chipFruits = fruits.filter((fruit) => {
return fruit.price < 5000;
})
console.log(chipFruits);
//[{name: "Apple", price: 1000}, {name: "Grape", price: 4000}]map
map 메서드는 배열의 모든 요소에 콜백함수를 적용시켜 새로운 배열을 만들고 싶을 때 사용하는 메서드다.
arr.map(callback(currentValue[, index[, array]])[, thisArg])callback: 배열의 모든 요소에 적용되어 새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 갖는다.
currentValue: callback이 적용될 현재 요소
index: 처리할 현재 요소의 index
array: map을 호출한 배열
thisArg: callback을 실행할 때 this로 사용되는 값
위 문법을 보면 callback에서 세 가지 인수를 갖지만 아직까지는 currentValue와 index외의 값을 사용하는 것을 본적이 없다.
사용예시 1
const numbers = [1, 2, 3, 4];
const updatedNumbers = numbers.map((number) => {
return number * 2;
})
console.log(updatedNumbers);
//[2, 4, 6, 8]사용예시 2
const fruits = [
{name: "Apple", price: 1000},
{name: "Banana", price: 5000},
{name: "Grape", price: 4000},
{name: "Watermelon", price: 20000},
]
const fruitsNames = fruits.map((fruit) => {
return fruit.name;
})
console.log(fruitsNames);
//["Apple", "Banana", "Grape", "Watermelon"]reduce
개인적으로 가장 배우기 어려웠던 메서드가 reduce다. 하지만 여러 예제를 접하다보면 생각보다 어렵지 않다는 것을 알 수 있었다. reduce는 reducer라는 함수를 통해 하나의 데이터를 반환하는 함수다. 반환된 데이터가 String, Number, null, undefined, Array, Object 등 무엇이든 될 수 있다.
문법
arr.reduce(callback[, initialValue])reduce의 callback의 핵심은 accumulator와 currentValue를 갖는다는 점이다. accumulator, 한국어로는 누산기는 콜백의 반환값을 누적한다. 만약 누적값이 없다면 initialValue가 됩니다.
만약 initalValue를 설정하지 않았다면 첫번째 accumulator 는 배열의 0번째 index가 되고 currentValue는 1번째 index가 됩니다. initialValue를 설정했다면 첫번째 accumulator는 initalValue가 되고 currentValue는 0번째 index가 됩니다.
사용예시1
const fruits = [
{name: "Apple", price: 1000},
{name: "Banana", price: 5000},
{name: "Grape", price: 4000},
{name: "Watermelon", price: 20000},
]
const totalPrice = fruits.reduce((acc, cur) => {
return acc + cur.price;
}, 0)
console.log(totalPrice)
//30000
3.고차 함수를 쓰는 이유를 설명할 수 있다.
= 우리는 추상화를 통해 효율적이고 편리하게 생활할 수 있습니다.
추상화란 복잡한 어떤것을 압축해서 핵심만 추출한 상태를 말하는데 이러한 작업을 컴퓨터 프로그래밍으로 접목해서
사용한다면 매우 높은 수준에서 작업을 할 수 있습니다. 다시 말해 고차 함수를 통해 높은 수준으로 생각한다면
생산성이나, 수준이 비약적으로 상승할 수 있게 됩니다.
4.고차 함수를 활용하여 프로그램을 작성할 수 있다.
고차함수중 map을 이용하여 twett을 갯수에 맞게 보여주는 코드를 작성했습니다.