✅ 일급 객체(first-class citizen)의 세 가지 특징을 설명할 수 있다.
✅ 고차 함수(higher-order function)에 대해 설명할 수 있다.
✅ 고차 함수를 자바스크립트로 작성할 수 있다.
함수를 변수에 저장하는 방법을 함수표현식이라고 한다
const square = function (num) {
return num * num;
};
output = square(7);
console.log(output); // --> 49
함수 표현식은 선언식과 다르게 호이스팅이 적용되지 않는다
(호이스팅 - 선언된 위치에 상관없이 함수 사용 가능)
호이스팅을 제외하면 선언식과 표현식은 큰 차이가 없지만
함수 표현식은 함수가 변수에 저장될 수 있다는 사실을 명확히 보여준다
그리고 함수는 변수에 저장된 데이터를 인자로 받거나 리턴값으로 사용할 수 있다
함수도 변수에 저장될 수 있기 때문에 함수를 인자로 받거나 리턴 값으로
사용 할 수 있게 된다
위와 같이 함수를 인자로 받을 수 있고, 함수의 형태로 리턴할 수 있는 함수를 고차함수 라고 한다
이때 다른 함수의 인자로 전달되는 함수를 콜백 함수라고 한다
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
자바스크립트에는 기본적으로 내장된 고차함수가 몇개 있다
고차함수 중 많이 쓰이는 것들을 정리해보자!
filter
: 모든 배열의 요소 중에서 조건에 맞는 데이터만 분류하고 싶을 때
let array = [1,2,3,4,5];
let newArray = array.filter(function(a){
return a < 4
// 조건에 맞는 데이터만 골라준다
// 4 보다 작은 데이터만 남는다
})
//화살표 문법을 사용하면 더 간결하게 사용가능하다
let newArray = array.filer((a) => a < 4)
// 기존 array 자료를 변형시키지 않기 때문에
// 새로운 변수에 담아서 사용하면 된다
map
: array 안의 데이터에 똑같은 작업을 해줘서 새로운 array를 만들고 싶을때 사용
let array = [1,2,3,4,5];
let newArray = array.map(function(a){
return a*2
// array 각각에 *2를 한 새로운 array 반환
})
//화살표 문법을 사용하면 더 간결하게 사용가능하다
const newArry2 = array.map((a) => a * 2);
console.log(newArry2);
reduce
: 여러 데이터를, 하나의 데이터로 응축(reduce)할 때 사용
배열을 하나의 값으로 만들어준다
리듀스는 초기값을 정해줄 수 있는데 정해주지 않는다면
배열의 첫번째 요소가 초기값이 되고 초기값은 누적값에 반환이 된다
그 다음 요소부터 현재 값이 되고 원하는 조건에 따라서
누적값에 현재값이 저장이 되고 배열의 끝까지 반복이 되고 누적값을 반환한다
let arr = [1,2,3];
let result = arr.reduce(
function(acc, cur, idx){
acc + cur;
return acc
});
// acc 누적값 , cur 현재값 , idx 초기값
console.log(result)
참고하면 좋을 자료
고차함수