sort() 오름차순 내림차순 원리 쉽게 이해 하는 법

낭만개발자·2023년 12월 2일
0

JavaScript

목록 보기
14/14

JS에서 정렬 함수 .sort((a,b)=> a-b) 부분에 내림차순, 오름 차순 선택할 때 a-b 인지 b-a 헷갈리게 된다.
이 부분 헷갈리지 않도록 하는 방법을 적어본다.
sort()는 아래 공리를 기반으로 움직인다.

공리1

1-1 반환 값 < 0 : a 가 b보다 앞에 있어야 한다.
1-2 반환 값 = 0 : a와 b의 순서를 바꾸지 않는다.
1-3 반환 값 > 0 : b가 a보다 앞에 있어야 한다.
를 입력하세요

즉 파라미터 a,b 의 콜백 함수 리턴 값이 0보다 작으면 a가 b보다 앞에 있는다.
반환값이 0이면 a와 b의 순서를 바꾸지 않는다.
반환값이 0보다 크면 즉 양수이면, b가 a보다 앞에 있는다.

코드로 풀면 sort()함수 내부 콜백함수 compare(a,b) 함수가 있다고 생각 하면된다.

function compare(a, b) {
  if (a is less than b by some ordering criterion) {
    return -1;
  }
  if (a is greater than b by the ordering criterion) {
    return 1;
  }
  // a must be equal to b
  return 0;
}

여기서 오름차순, 내림차순을 정리하는 식을 어떻게 쉽게 인지하느냐? 공리 1을 활용하면 된다.

만약 오름차순이 필요하다면?
우선은 쉽게 생각해 만약 [1,2,3,4,5..] 오름 차순로 정렬된 배열이 있다고 생각한다.

[1,2,3,4,5].comapre((a,b) => a   b)
// a b 사이에 뭐가 들어가야 될까?
/* 여기서 내가 오름차순으로 배열하려 하면 위에 이미 정렬된 배열이 공리1의 규칙 적용 후 흐트러지면 안된다. 
즉 a가 b보다 앞에 있어야 하는 형식이 되어야 현재 정렬된 배열을 파괴하지 않는다.
이 말은 즉 (a가 b보다 앞에 있어야 하는 형식이 되어야 한다 = 반환값 < 0) 과 같은 말이다.
그럼 반환값이 0보다 작게 되려면 a, b 사이에 뭐가 들어가야 될까?
  (1,2) (2,3) (3,4)... 이런식으로 a,b가 대입되니  a b 사이엔 "-" 마이너스가 들어가야 된다. 그래야 오름차순이 된다.
  
  즉 앞에 a b 사이에 들어가는건 "-" 마이너스가 되어야 오름차순 정렬이 된다.
  
반대로 내림차순이 되려면 
[5,4,3,2,1] 이 내림차순이고 이 정렬을 공리에 대입하더라도 유지 해야한다.
즉 인덱스의 유지는 공리의 1-1번 조건 (반환값 < 0) 을 만들어 줘야 한다. 

즉 [5,4,3,2,1].compare((a,b) => a  b)에서 어떻게 하면 return 값을 <0으로 만들수 있을까?
 파라미터는 (a,b)는 (5,4) (4,3) (3,2).. 식으로 들어갈 것이다.
그러면 이 땐 a b 형태가 아니라 b-a 형식이 되어야 -1 즉 음수가 되고
 공리 1번 :  반환 값 < 0 : a 가 b보다 앞에 있어야 한다.
가 지켜지므로  [5,4,3,2,1] 형태가 유지된다. 

즉 위의 로직을 아주 많이 연습해서 단순시켰다고 생각해보자.
그러면 compare((a,b) => a b) 기본로직에서 오름차순을 만들고 싶다면 
1. [1,2,3,4,5] 가 
2. 공리 1번 규칙에 의해 반환값 -1을 뱉어야 한다(그래야 순서가 변경안되므로) 
=> 즉 a 랑 b 사이엔 마이너스, a-b가 되어야 한다.

내림차순을 하고 싶다하면
1. [5,4,3,2,1] 이;
2. 반환값 -1을 뱉도록 해야한다 
=> 즉 이경우는 (a,b) 즉-> (5,4) 순서로는 절대로 음수가 될수 없으므로 b-a로 변경해서 리턴해주면된다.

즉 sort에서 a b 식이 헷갈리면 오름차순을 적용할 땐, 오름차순으로 정렬된 배열[1,2,3,4,5]가 반환값 -1을 뱉게 해주면 되고,  내림차순을 적용할 땐, 내림차순으로 정렬된 배열[5,4,3,2,1]이 반환값 -1을 뱉게 해주면 된다. 
그러면 오름차순은 a-b, 내림차순은 b-a 이라는 식이 나오게 된다.

위처럼 이해하는게 단순히 암기하는것 보다 효과적일 것 이다.

profile
낭만닥터와 슬의를 보고 저런 개발자가 되어야 겠다고 꿈꿔봅니다.

0개의 댓글