혹시나 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장의 도움이 됩니다
higher order function
함수를 argument로 받으며, 함수를 반환하는 함수
일급 객체
first-class object
string, number, boolean, array, object 같이 데이터처럼 사용할 수 있는 객체로 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체
-> Javascript에서는 대표적으로 함수를 일급 객체로 분류
- 변수에 할당 가능
-> 함수 표현식- 다른 함수의 전달인자로 사용 가능
-> 콜백 함수- 함수의 결과로 리턴 가능
-> 커링 함수
cf. 함수 표현식은 할당 전에 사용 X
콜백 함수
함수의 argument로 전달되는 함수
-> 다른 함수의 argument로써 넘겨진 후 특정 이벤트에 의해 호출되는 함수
-> 함수의 호출이 아닌 함수 자체를 전달
: func
O , func()
X
커링 함수
함수를 리턴하는 함수
ex. 클로져함수
배열의 고차함수로 Array 객체일 때 사용
특정 조건을 판별하고 true일 경우의 요소만 배열로 반환
: 배열의 각 요소에 콜백 함수를 적용했을 경우 리턴값이 true일 때, 그 요소만 포함한 새로운 배열 리턴
-> 조건은 함수 형태로 전달
const arr = [1,2,3,4,5];
const oddArr = arr.filter(el => el%2 !== 0);
console.log(oddArr) // [1, 3, 5]
배열의 모든 요소에 같은 동작을 적용한 값으로 변경하고 새 배열로 반환
-> 동작은 함수 형태로 전달
const arr = [1,2,3,4,5];
const doubledArr = arr.map(el => el*2);
console.log(doubledArr) // [2, 4, 6, 8, 10]
const user = [{name:"김oo",birthday:"3월 20일"},
{name:"이oo",birthday:"7월 14일"}]
const userName = user.map((el) => el["name"]);
console.log(userName); // ['김oo', '이oo']
cf. mapping : 하나의 값을 다른 값으로 대응시키는 것
배열의 모든 요소에 함수를 적용하여 하나의 값으로 누적하여 반환
: 더하는 연산, 작은 값 구하기(비교) 등 함수의 정의된 방식에 따라 하나의 값으로 변경
초기값을 0으로 전달하면, 빈배열 받았을때 0 리턴
->if(arr.length === 0){}
생략가능
arr.reduce(callbackfunction, initialValue);
// 콜백 함수 호출 X, 전달 O
// initialValue : 초기값(생략 가능 -> undefined로 적용)
// 콜백함수 정의할 때 4개 전달인자
// -> 누적값accumulator, 현재 요소currentValue, 현재인덱스currentIndex, 호출한배열arr
// cf. 전달인자는 주로 acc, cur를 사용(거의 idx, src는 생략)
const arr = [1,2,3,4,5];
const getSum = function(acc, cur, idx, src){ return acc+cur; }
const valNonInit = arr.reduce(getSum);
const valInit = arr.reduce(getSum,10);
console.log(valNonInit); // 15
console.log(valInit); // 25
const getMultiply = arr.reduce((acc,cur) => acc*cur,10);
console.log(getMultiply); //1200
valNonInit 흐름도
acc | cur | return -> acc |
---|---|---|
1 | 2 | 3 |
3 | 3 | 6 |
6 | 4 | 10 |
10 | 5 | 15 |
15 | - | - |
-> 초기값이 없을때, 배열의 1번째부터 누적(0번째 인덱스값이 초기값을 대체)
valInit 흐름도
acc | cur | return -> acc |
---|---|---|
10 | 1 | 11 |
11 | 2 | 13 |
13 | 3 | 16 |
16 | 4 | 20 |
20 | 5 | 25 |
25 | - | - |
-> 초기값이 있을때, 배열의 0번째부터 누적
: reduce 메서드의 전달인자인 콜백함수 내부에 조건문을 적용하여 누적할 수 있음
const arr = [1,2,3,4,5]
// 초기값 0, 홀수만 더하는 함수 전달
const addOddNum = arr.reduce((acc,cur) => {
if(cur%2 !== 0){
return acc+cur;
} else{
return acc;
}
}, 0);
console.log(addOddNum); // 9
addOddNum 흐름도
acc | cur | return -> acc |
---|---|---|
0 | 1 | 1 |
1 | 2 | 1 |
1 | 3 | 4 |
4 | 4 | 4 |
4 | 5 | 9 |
9 | - | - |
추상화 함으로써 생산성을 높이기 위함
-> 함수를 통해 추상화하고 그 함수를 데이터로 사용하여 추상화 확장
abstraction
복잡한 로직을 단순화하는 것
function getSum(date){ // 고차함수로 활용한 로직 }
function getFIdx(date){ // 고차함수로 활용한 로직 }
function getLIdx(date){ // 고차함수로 활용한 로직 }
function viewRange(getSum,getFIdx,getLIdx){ // "숫자는 처음~n까지 더한 값입니다"를 반환 }
const date = [1,2,3,4,5,6]
console.log(viewRange(date)); // "21은 1~6까지 더한 값입니다"
배열의 각 요소에 같은 동작을 적용
arr.forEach(callbackfunction, thisArg)
// thisArg : 함수 내부의 this를 의미(생략 가능)
// 콜백함수 정의할 때 3개 전달인자
// -> 현재요소 currentElement, 현재인덱스 index, 적용할배열 array
// cf. 전달인자는 주로 현재요소만 사용(거의 index, array 생략
const elements = ['el1', 'el2', , 'el3'];
const copy = [];
elements.forEach(function(elements){
copy.push(elements);
});
console.log(copy); // ['el1', 'el2', 'el3']
cf. 적용하는 배열에 빈 값이 있으면 그 요소에는 동작이 수행되지 않음
: [1,37,2, ,3,8, ,9]
일경우 실행 회수는 8이 아닌 6
Chapter1. 고차 함수
Chapter2. 내장 고차 함수
Chapter3. 고차 함수의 중요성
이해도 자가 점검 리스트의 결과를 토대로 자기주도적 학습 계획을 수립하고 실천해 보세요.
오늘 학습이 어려웠다면(0~6개)
오늘 학습이 수월했다면(7~8개)
추가적인 학습을 하고 싶다면(9~10개)
느낀점
어제 회고를 하면서 1순위로 했던 11시 취침을 지키지 못했다. 고차함수 코플릿 과제 제출하려고 수업 끝나고 TIL 정리도 못하고 작업했다. 32문제 중에 결국 5문제가 잘 풀리지 않아서 우선 제출하고 새벽에 다시 풀어야겠다. 오늘 예전에 페어했던 분과 잠시 톡을 주고 받았는데 과거의 나는 문제 풀려고 30분만 자고 이틀을 달렸단다. 잊고있었는데.. 그때의 열정이 지금 없어서 11시에 자려고 하는건 아니다. 오히려 그렇게 무리하게 달려서 금방 지칠까봐 다른 방법을 찾아보는 것이다. 오늘 고차함수 어렵긴 했지만 예전에 비해서 많이 문제해결 능력이 나아진 것 같다. 앞으로 더 어렵고 스케줄이 빠듯해 진다고하는데, 그 속에서도 재미를 붙이고 있는 나를 발견한다.
개선점 및 리마인드
고민 시간은 최대 40분 : 혼자 안될 것 같으면 빠르게 물어보고 해결하자
부트캠프 시작전 나의 다짐중 하나였는데, 40분은 긴거 같다. 고민해보는 건 좋지만 너무 오래 걸려도 좋지 않은 것 같다. 고민시간 30분으로 줄여보고, 다시 상기시키자!
**