고차함수(higher order function)란?
▶️ 함수를 return하는 함수
함수를 인자(argument)로 받을 수 있고, 함수의 형태로 리턴할 수 있는 함수
변수 square에 함수를 할당하는 함수 표현식 :
const square = function (num) {
return num * num;
};
// square에는 함수가 저장되어 있으므로 (일급 객체), 함수 호출 연산자 '()'를 사용할 수 있습니다.
output = square(7);
console.log(output); // --> 49자바스크립트에서 함수는 일급 객체이기 때문에 변수에 저장할 수 있다.
함수 표현식은 할당 전에 사용할 수 없다.
할당 전에 사용하게 되면 → square(7); // ReferenceError: Can't find variable: square 라고 뜸.
arr.filter(함수명)
📌 arr는 항상 배열이여야 함
📌 괄호 안의 함수는 true/false를 return하는 함수여야 한다 (false면 버림)
📌 return 값은 조건(true/false)에 맞는 결과값만 '배열' 형태로 출력.
filter 사용예시 1
→ 배열과 임의의 값(keeper)을 입력받아 기존 배열에서 keeper와 일치하는 요소만을 갖는 새로운 배열 리턴
function keep(arr, keeper) {
return arr.filter(el => { // = return arr.filter(function (el) {
if (el === keeper) {
return true;
}
return false;
});
}
⏸
function keep(arr, keeper) {
let func = function (el) {
return el === keeper ▶️ el===keeper 결과가 true 일 경우만 리턴
}
return arr.filter(func)
}filter 사용예시 2
→ 배열을 입력받아 배열에서 가장 짧은 길이를 가진 문자열 요소를 리턴
findShortestWord([4, 'two', 2, 'three']); 를 대입해서 로직 설명하자면:
function findShortestWord(arr) {
const onlyStrings= arr.filter(el => {
return typeof el === 'string' ▶️ 'two', 'three'는 true, 4, 2는 false
}) ▶️ 결과값은 ['two', 'three'] -> true나온 애들만 filter됨.
// 가장 짧은 길이 찾기
return onlyStrings.reduce((acc,cur) => { ▶️ acc='two', cur='three'
if(acc.length > cur.length) {
return cur;
} return acc;
})
} ▶️ 최종 return : "three"arr.map(함수명)
📌 arr는 항상 배열이여야 함
📌 괄호 안의 함수는 계산된 모든 값을 return하는 함수여야 한다
arr.reduce(함수명)
📌 arr는 항상 배열이여야 함
📌 괄호 안의 함수에는 항상 인자가 2개 입력되어야 한다 → function (arr , cur) 이렇게.
📌 계산된 값을 return하는 함수
const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;
console.log(array1.reduce(reducer));accumulator에는 항상 함수 결과값(여기서는 acc+cur 해주는 함수네) 들어가고 (누적값처럼)
currentValue에는 항상 배열(array1)의 index0,1,2,3,4....순차적으로 들어간다.
예시1로 설명 :
let array= [1, 2, 3, 4];
let reducer = ( acc, cur ) => acc + cur ;여기서, array.reduce ( acc , cur ) 에서 array.reduce ( 배열의 0번째 값, 배열의 1번째 값 )이다.
→ array.reduce ( 1 , 2 )
화살표 함수로 return acc + cur 이라고 했으니, 1 + 2 = 3 이다.
acc 에는 누적값이 들어가니까, array.reduce ( 누적값, 배열의 2번째 값 ) // ( 3,3 ) —> 6
`array.reduce ( 누적값, 배열의 3번째 값 )` // ( 6,4 ) —> 최종 10 출력예시2로 설명 (initialValue초기값이 있을때):
<< 원리 >>
let array= [1, 2, 3, 4];
let reducer = ( acc, cur ) => acc + cur ;
array.reduce(reducer, 5));
<<예시>>
const array= [1, 2, 3, 4];
const result = array.reduce((acc, cur) => {
return acc + cur
}, 0);
// 0부터 시작해서, acc는 이전누적결과값, cur는 array요소 하나하나가 순차적으로 들어감 (arr[i])여기서 reducer를 callback함수라 하고, 5 를 초기값 (initialValue) 이라 한다. → arr.reduce( callback, initialValue )
array.reduce ( 5 , 배열의 0번째 값 ) // ( 5, 1 )
array.reduce ( 누적값 , 배열의 1번째 값 ) // ( 6, 2 )
array.reduce ( 누적값 , 배열의 2번째 값 ) // ( 8, 3 )
array.reduce ( 누적값 , 배열의 3번째 값 ) // ( 11, 4 ) —> 최종 15 출력
💡 TIP :
내가 reduce 사용해서 배열 → 문자열로 하고 싶어!
initialValue(초기값)을 문자열로 두면 편함
배열 → 숫자로 하고 싶어! 초기값을 숫자로 두기
배열 → 객체로 하고 싶어! 초기값을 객체로 두기
실전예시 reduce
❗️ 누적 더하기 값을 구해야 하니까 reduce 사용 (reduce는, for문 사용한 result=result+a처럼 누적더하기 하는 API)
function calculateScore(records, value) {
const sum = records.reduce((acc, cur) => { // = records.reduce(function(acc,cur)) {
//acc는 누적계산값(여기선 누적합), cur는 배열의 0번째 값
if (cur.animal === value) { //배열의 0번째 값의 animal이 입력한 value('cat')와 같으면
return acc + cur.score; //acc (누적합. 처음엔 0으로 시작) + score값을 리턴하라
} else {
return acc; //else면 acc(누적합)만 리턴하라
}
}, 0);
return sum;
}
⏸
function calculateScore(records, value) {
let result=0;
for(let i=0; i<records.length; i++){
if(records[i]['animal'] === value){
result= result + records[i]['score'];
}
} return result;
}