[JavaScript] 고차함수

Hyun Jin·2023년 1월 12일

JavaScript

목록 보기

14/20

주요 개념

* 일급객체

문자열, 숫자 같은 다른 데이터처럼 사용 가능함
JS 에서 함수는 일급 객체라서 고차함수로 활용 가능함.

일급객체의 주요 특징 3가지 :
1. 변수에 할당 가능함.
2. 다른 함수의 전달인자로 전달 가능함.
3. 다른 함수의 결과로서 리턴 가능함.

* 고차함수(higher order function)

함수를 전달인자(argument)로 받는 함수, 혹은 함수를 리턴하는 함수

* 콜백 함수(callback function)

다른 함수(caller)의 전달인자(argument)로 전달되는 함수

콜백 함수를 전달받은 고차 함수(caller)는, 함수 내부에서 이 콜백 함수를 호출(invoke)할 수 있고, 조건에 따라 콜백 함수의 실행 여부를 결정할 수도 있음.

* 커링 함수

함수를 리턴하는 함수

고차함수의 3가지 케이스 예시

1. 다른 함수를 인자로 받는 경우

function adder(num) {
  return num + 2;
}
function addTwice(func, num) {
  return func(num);
}
>
let output = addTwice(adder, 4);
console.log(output); // -> 6

2. 함수를 리턴하는 경우

function multi(mArg) {
  return function (num) {
    return mArg * num;
  };
}

let output2 = multi(3)(5); // multi(mArg)(num)
console.log(output2); // -> 15

const mul3 = multi(3);
output2 = mul3(2); // multi(3)(2)
console.log(output2); // -> 6

3. 함수를 인자로 받고, 함수를 리턴하는 경우

triple = (num) => num *3; // 화살표 함수 연습!

console.log(triple(4)); // 12

function doubleTriple(tripled, func){
    const doubled = func(tripled)
    return function(num) {
        return num + doubled;
    }
}

console.log(doubleTriple(5, triple)(4))

// => 고차함수의 실행과정 풀어 써보기
// doubleTriple(5, triple)(4) 실행 -> 
// function doubleTriple(5, triple){
//     const doubled = triple(5) // triple = (num) => num *3; // 15
//     return function(4) {
//         return 4 + triple(5); //4+15 = 19
//     }
// }

내장 고차 함수

메서드의 전달인자로 함수를 전달받는 JS 내장 메서드(메서드 : 객체 안에 들어있는 함수.)
dot, bracket Notation 으로 불러올 수 있음.
->property가 변수이거나, 키 값동적으로 변경될때는 bracket notation 을 사용해야 함!!(dot X)

1. Array.prototype.filter()

배열의 각 요소에 콜백함수를 적용시켰을때, true 를 리턴하는 요소들만 모은 새로운 배열을 리턴

2. Array.prototype.map

배열의 각 요소에 콜백함수를 적용시킨 요소들을 새로운 배열로 리턴
배열의 각 요소가 특정 논리(함수)에 의해 다른 요소로 지정(map) 됨.
하나의 데이터를 다른 데이터로 매핑(mapping) 할 때 사용.
콜백함수에 두번째 전달인자를 줄 경우, 인덱스를 가져옴!(근데 인덱스를 사용하면 바람직하진 않음)
기존 배열 수정 x. 얘도 깊은 복사가 가능한지? (=> 가능! 예시는 아래.)

// Array.prototype.map 은 깊은 복사가 가능한가?

const arrOrigin = [0, 1, 2, 3];

let arrCopied = arrOrigin.map(el => el);
console.log(arrCopied[2]) // 2
arrCopied[2] = 8; // 복사본에 2->8 재할당

console.log(arrOrigin[2]) // 2, 원본 변경 없음.
//(Array functions — map, filter, reduce 들은 원래 배열의 요소가 포함된 '새로운' 배열을 반환함!!)

3. Array.prototype.reduce

배열의 각 요소를 특정 방법(함수)에 따라 원하는 하나의 형태로 응축함. (reduction)
초기값(initialValue) : 정해주지 않으면 기본적으로 배열의 처음 값(arr[0])이 들어감.
정해주면 그 값이 acc 인자로 들어가고, cur 인자에 배열의 처음 값이 들어감.

MDN 예시
// 구문 : arr.reduce(callback[, initialValue])

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  initialValue
);

console.log(sumWithInitial);
// Expected output: 10
리듀서 함수는 네 개의 인자를 가집니다.

누산기 (acc)

현재 값 (cur)

현재 인덱스 (idx)

원본 배열 (src)
리듀서 함수의 반환 값은 누산기에 할당되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 됩니다.

4. etc

필요할 때 찾아서 사용하기!

find
주어진 판별 함수를 만족하는 첫 번째 요소의 '값'을 반환
findIndex
주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 '인덱스'를 반환
some
주어진 배열의 요소 중 하나라도 조건 함수를 통과하는지 확인, Boolean 값 리턴.
every
주어진 배열의 모든 요소가 조건 함수를 통과하는지 확인, Boolean 값을 리턴.
sort
유의 : 원 배열이 정렬됨. 새로운 배열이 만들어지는 것이 아님!