[JS] 고차 함수 (Higher-Order Function)

고차 함수(Higher-Order Function)

고차함수는 다른 함수를 인자로 받거나, 함수를 반환하는 함수입니다. 

 

고차 함수의 장점

• 재사용성 : 코드를 더 간결하게 재사용 가능하게 만들어 줍니다.
• 가독성 : 코드의 의도를 명확하게 전달할 수 있습니다.
• 추상화 : 세부 구현을 감추고, 동작을 추상화할 수 있습니다.

 

Array.prototype.map()

• 용도 : 배열의 각 요소에 대해 주어진 함수를 실행하고, 그 결과로 새로운 배열을 생성.
• 반환값 : 주어진 반환한 값들로 이루어진 새로운 배열을 반환.
• 원본 배열의 변경 : 원본 배열은 변경되지 않음.

const numArray = [1, 2, 3, 4, 5];

// map : 배열의 각 요소에 주어진 함수를 호출하고 결과를 모아 새로운 배열을 반환
const numArrayMap = numArray.map(function (x) {
    return x * x;
});

console.log(numArrayMap); // [1, 4, 9, 16, 25]

 

2. Array.prototype.filter()

• 용도 : 주어진 조건을 만족하는 배열의 요소들로 새로운 배열 생성.
• 반환값 : 조건을 만족하는 요소들로 이루어진 새로운 배열을 반환. 조건을 만족하지 않는 요소는 제외.
  • 조건을 만족하는 요소가 없을 경우 빈 배열 반환(filter가 항상 새로운 배열을 반환하기 때문)
  • 같은 이유로 find 사용 시 undefined 반환
• 원본 배열의 변경 : 원본 배열은 변경되지 않음.

const numArray = [1, 2, 3, 4, 5];

// filter - 배열의 각 요소에 주어진 함수의 결과가 true인 요소들만 모아 배열로 반환
const numArrayFilter = numArray.filter(function (x) {
    return x % 2 === 0;
});

console.log(numArrayFilter); // [2, 4]

 

3. Array.prototype.reduce()

• 용도 : 배열의 각 요소를 누적하여 하나의 결과값을 생성. 주로 합계, 평균, 객체 생성 용도로 사용.
• 반환값 : 주어진 함수를 통해 계산된 단일 결과값을 반환.
• 원본 배열의 변경 : 원본 배열은 변경되지 않음.
• 사용법 : 두 개의 인자를 받고, 첫 번째 인자는 누적값(accumulator)이고, 두 번째 인자는 현재 요소(currentValue)다.  선택적으로 초기값(initial value)를 지정 할 수 있음.

const numbers = [1, 2, 3, 4, 5];

// 합계 계산
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 15

// 객체 생성
const people = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 30 },
    { name: 'Charlie', age: 35 },
];

const newArray = people.reduce((acc, person) => {
    acc[person.name] = person.age;
    return acc; // 하나의 객체를 반환
}, {});

console.log(newArray);  // {Alice: 25, Bob: 30, Charlie: 35}

initialValue 값이 없는 경우
- accumulator : 배열의 첫번째 값
- currentValue : 배열의 두번째 값
initialValue 값이 있는 경우
- accumulator : 지정한 값
- currentValue : 배열의 첫번째 값

 

4. Array.prototype.forEach()

• 용도 : 배열의 각 요소에 대해 주어진 함수를 실행합니다.
• 반환값 : 항상 undefined를 반환합니다. 즉, forEach는 새로운 배열을 생성하지 않음.
• 원본 배열의 변경 : 원본 배열은 변경되지 않으며, 만약 변경하고 싶다면 직접 인덱스를 이용해야함.

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(x => console.log(x * x));  // Output: 1 4 9 16 25

 

5. Array.prototype.some(), Array.prototype.every()

'some' 메서드는 배열의 각 요소에 대해 주어진 함수가 하나라도 'true'를 반환하면 'true'를 반환합니다.

'every' 메서드는 배열의 각 요소에 대해 주어진 함수가 모두 'true'를 반환하면 'true'를 반환합니다.

• 원본 배열을 변경하지 않음
• boolean 타입 반환

const numArray = [1, 2, 3, 4, 5];

// some : 배열의 각 요소에 대해 주어진 함수가 하나라도 true일때 true를 반환
const numArraySome = numArray.some(function (x) {
    return x > 3;
});

console.log(numArraySome); // true

// every : 배열의 각 요소에 대해 주어진 함수가 모두 true일때 true를 반환
const numArrayEvery = numArray.every(function (x) {
    return x > 0;
});

console.log(numArraySome); // true

 

6. Array.prototype.find()

'find' 메서드는 배열의 각 요소에 대해 주어진 함수가 'true'를 반환하는 첫 번째 요소를 반환합니다.

• 원본 배열을 변경하지 않음
• 조건을 만족하는 첫 번째 요소를 반환
• 조건에 맞는 요소가 없을 경우 undefined를 반환

const numArray = [1, 2, 3, 4, 5];

// find : 조건을 만족하는 첫번째 요소 반환
const arrayFind = numArray.find(function (x) {
    return x > 3; // 4
});

console.log(arrayFind);

 

7. Array.prototype.sort()

'sort' 메서드는 배열의 요소를 정렬합니다. 주어진 비교 함수를 사용하여 요소를 비교합니다.

• 원본 배열을 변경함
• 비교 함수를 통해 정렬 방식 결정

const numArray = [3, 2, 1, 10, 5];

// sort : 배열의 요소를 정렬
const arraySort = numArray.sort(function (a, b) {
    return a - b;
});

console.log(numArray);  // [1, 2, 3, 5, 10]