[JS]고차함수/callback함수(sort 문제와 한계)

고차함수란?

하나 이상의 함수를 매개변수로 취하거나 함수를 결과로 반환하는 함수

• 대표 배열 조작 메서드

정렬 :sort(callback function)

반복 :forEach()

콜백함수 결과 배열 : map()

조건 (하나만 반환함): Array.find()

조건 값 반환(배열로 반환함) : Array.filter()

누적 :reduce()

---

임의 정렬 : Array.sort(callback function)

sort의 문.제.점 & 한.계.점

🚨문제점

let nums = [1, -1, 4, 0, 2, 3, 10, 20, 12]
console.log(nums.sort()) //[-1, 0, 1, 10, 12, 2, 20, 3, 4]

sort를 해서 정렬을 하고싶은데 현재 배열 안에 구성되어있는 요소가 모두 number임에도 불구하고 sort메서드가 일시적으로 string으로 변환되어 정렬되었기 때문에 10이란 숫자를 읽은 것이 아니라 10의 1을 읽어버린 것이다. 그리하여 2,3,4보다 작은 숫자로 인식되는 해프닝이 일어난 것.

여기서 질문,
Q. 왜 일시적으로 number가 string으로 변환되어 읽힌 것일까?
A. 배열 내에 요소들이 다양한 자료형을 갖게 되니 모든 것들을 string으로 바꿔서 정렬을 수행하게 됨.

🚨한계점

let fruits = ["apple", "Orange", "Orange", "melon"];

console.log(fruits.sort()); //["Orange", "apple", "melon", "orange"]

console.log(fruits.reverse()); //["orange", "melon", "apple", "Orange"]

나는 Orange랑 orange랑 같은 것으로 취급하고 싶은데 Orange의 대문자O가 더 작은 수여서 안 됨.
한마디로 한계점은 대소문자 구분 정렬이다.

해결 방법!!!

callback 함수를 받아 고차 함수를 지원

string으로 변환되던 숫자의 문제 해결

//해결 코드
let ascending_order = function(x, y){
	return x-y
}

let descending_order = function(x, y){
	return y-x
}

ascending_order함수를 먼저 살펴보자.
x-y가 0보다 크면 x,y의 위치가 바뀌는 메커니즘이다. nums의 배열에서 요소를 가져와 (x,y)가 (1, -1)일 때 x-y가 0보다 크니까 -1,1의 순서가 된다. 다시 (x, y)가 (-1, 4)일 때 x-y가 0보다 작으니까 자리 그대로 이렇게 계속 찾아가다 보면 원하는 정렬이 나온다.

대소문자 구분 안 되던 한계 해결

let descending_order = function(x, y){
  if(typeof x === "string") x = x.toUpperCase();
  if(typeof y === "string") y = y.toUpperCase();
  
  return x < y ? 1 : -1;
}