JavaScript 의 고차함수에 관한 정리글입니다.
sort(), map(), find(), filter(), reduce() 에 대해 알아봅니다.

---

🌲 고차함수

고차함수란?
하나 이상의 함수를 매개변수로 취하거나 함수를 결과로 반환하는 함수입니다.

• 매개변수로 전달되는 함수는 콜백함수(Callback function)라고 부릅니다.
• 대표 배열 조작 메서드는 다음과 같습니다.
  1. 임의 정렬: Array.sort(callback function)
  2. 반복 작업: Array.forEach()
  3. 콜백함수 결과 배열 반환: Array.map()
  4. 조건을 만족하는 하나의 값 반환: Array.find()
  5. 조건을 만족하는 값을 배열로 반환: Array.filter()
  6. 누적 결과 값 반환: Array.reduce()

1. sort()

문제점과 한계점

• 문제점: 일의 자리 "4"가 10의 자리인 "10"보다 뒤쪽에 정렬됩니다.
  이는 sort 메서드로 정렬될 때 배열의 요소가 일시적으로 문자열로 변경되어 발생하죠.

• 한계점: 대소문자 구분 없이 정렬하고 싶지만, 대소문자가 구분되어 정렬됩니다.

sort() 내림차순/오름차순 해결

✅ 아래 예제는 숫자와 문자일 경우 모두의 문제점을 한번에 해결한 코드입니다.

// --------------- sort 고차함수 : 공용
let ascending_order_2 = function (x, y) {
  if (typeof x === "string") x = x.toUpperCase();
  if (typeof y === "string") y = y.toUpperCase();

  // 오름차순
  return x > y ? 1 : -1; // x 가 크면 자리 바꿈
};

let descending_order_2 = function (x, y) {
  if (typeof x === "string") x = x.toUpperCase();
  if (typeof y === "string") y = y.toUpperCase();

  // 내림차순
  return x < y ? 1 : -1; // y 가 크면 자리 바꿈
};

💻 sort() 고차함수 코드 보러 가기

2. map()

• 배열 요소 별 함수 호출 및 결과를 배열로 반환하는 고차함수입니다.

• item: 배열 요소, index: 배열 위치, array: 배열

let nums = [1, 2, 3, 4, 5];

let use_map = nums.map((item) => {
  return item * 2;
});

console.log(use_map); // [ 2, 4, 6, 8, 10 ]

3. find()

• 콜백 함수의 조건을 만족하는 단 하나의 값만 반환합니다.

• item: 배열 요소, index: 배열 위치, array: 배열

[ Data ]

let users = [
  { name: "bob", age: 17, job: false },
  { name: "alice", age: 20, job: false },
  { name: "john", age: 27, job: true },
];

[ job === false 인 요소 ]

let find_job = users.find((user) => {
  return user.job === false;
});
console.log(find_job); // { name: 'bob', age: 17, job: false }

[ age >= 19 인 요소 ]

let find_age = users.find((user) => {
  return user.age >= 19;
});
console.log(find_age); // { name: 'alice', age: 20, job: false }

find() 는 단 하나의 값만 반환합니다!

4. filter()

• 콜백 함수의 조건을 만족하는 값을 배열로 반환합니다.

• item: 배열 요소, index: 배열 위치, array: 배열

[ Data ] = find() 와 동일

[ job === false 인 요소들 ]

let filter_job = users.filter((user) => {
  return user.job === false;
});
console.log(filter_job);

[ age >= 19 인 요소들 ]

let filter_age = users.filter((user) => {
  return user.age >= 19;
});
console.log(filter_age);

5. reduce()

• 요소 별 함수 수행 누적 결과값을 반환합니다.

• accumulator: 이전 함수 결과(initial로 초기값 설정 가능), item: 배열 요소, index: 배열 위치, array: 배열

let nums = [1, 2, 3, 4, 5];
let call_count = 0;

console.log("result\tvalue\tindex");

let sum = nums.reduce((accumulator, item, index, array) => {
  console.log(accumulator, "\t\t", item, "\t\t", index);
  call_count++;
  return accumulator + item;
}, 0); // initial 없으면 1부터 시작
/*
result	value	index
0 		 1 		 0
1 		 2 		 1
3 		 3 		 2
6 		 4 		 3
10 		 5 		 4
*/

console.log("call_count :" + call_count); // call_count :5
console.log("sum :" + sum); // sum :15