자바스크립트 Array.sort() 숫자 정렬 다루기

 

자바스크립트  Array 객체는 정렬을 위한 sort() 메소드를 지원한다.
하기 배열을 정렬해보자.

const array = [1,3,10,40,50,80,7 ];      

array.sort();

console.log(array);

과연 결과는 어떨까?

1. (7) [1, 10, 3, 40, 50, 7, 80]
1. 0: 1
2. 1: 10
3. 2: 3
4. 3: 40
5. 4: 50
6. 5: 7
7. 6: 80
8. length: 7

예상과는 다른 결과가 나온다.

자세히 보면 앞자리 숫자만 가지고 정렬이 되었다.

자바스크립트 sort 메소드 자체가 가지는 오류는 아니지만 처음부터 내부 구현이 더 잘되었더라면 이란 아쉬움도 있다.

그럼 어떻게 구현하는가? sort() 메소드의 인자로 콜백 메소드를 등록하여 정렬이 가능하다.

    array.sort(function(a,b){

          console.log(a,b);

      });

함수를 정의하고 인자로 a,b 를 준다. 

a,b 값을 콘솔로그 로 찍어보면, 

3 1

10 3

40 10

50 40

80 50

7 80

위와 같은 값이 나온다.

[1, 3, 10, 40, 50, 80, 7] 배열을 펴놓고 다시 살펴보면

a 가 뒤에 값

b 가 앞에 값임을 알수 있다. 

   const array = [1,3,10,40,50,80,7];      

      array.sort(function(a,b){

         // console.log(a,b);

          return -1;

      });

      console.log(array);

여기서 sort() 메소드 의 반환값을 -1(음수) 로 설정하면

1. (7) [7, 80, 50, 40, 10, 3, 1]
1. 
   

배열이 설정한 순서에서 역순으로 정렬이 된다.

반대로 1(양수)를 설정하게 되면,

    const array = [1,3,10,40,50,80,7];      

      array.sort(function(a,b){

         // console.log(a,b);

          return 1;

      });

      console.log(array);

1. (7) [1, 3, 10, 40, 50, 80, 7]

초기 설정값 그대로 정렬이 된다. sort() 함수는 이렇게 동작하게 만들어졌다.

이 원리를 활용하여 

   const array = [1,3,10,40,50,80,7];      

      array.sort(function(a,b){

         // console.log(a,b);

          return a-b;

      });

      console.log(array);

return a-b;

즉, 뒤에서 앞 값을 뺀 결과가 양수가 나오면 예) 3-1 = 2 양수가 나오면

초기값 그대로 정렬한다. 그럼 [1,3,...]  이 된다

그 다음 숫자도 마찬가지이다. 그러다 7을 만나게 되면

예) 7-80 = -73 음수 이다. 음수가 나오면 역순으로 a(뒤) 와 b(앞) 값의 위치를 바꾼다.

그럼 [1,3,10,40,50,7,80] 가 된다.

여기서 끝이 아니라, sort()는 내부적 알고리즘으로 해당 배열을 계속해서 정렬해 나가고

결론은 하기와 같은 결과를 만들어 낸다.

 (7) [1, 3, 7, 10, 40, 50, 80]

바로 "오름차순" 정렬이다.

그럼 내림차순 정렬은

return b-a; 를 하게되면 위 원리의 반대로 하기 결과가 도출된다.

(7) [80, 50, 40, 10, 7, 3, 1]

즉, sort() 의 콜백함수 리턴값의 양,음에 따라 정렬 순서가 바뀜이 키 포인트이다.

이를 조건식으로 풀어내면 하기와 같다.

   const array = [1,3,10,40,50,80,7];      

      array.sort(function(a,b){

        if(a>b)

          return 1;

        else if(a<b)

          return -1;

        else

          return 0;

      });

      console.log(array);

a>b 뒤에서 앞에 값을 뺀것이 양이면 그대로

a<b 뒤에서 앞에 값을 뺀것이 음이면 역순으로

추가로, a,b 두 값이 같을때는 0을 반환해야 된다. 

이는 하기 모질라 개발자 문서에 나와있다.

mozila array sort API문서

오늘 정리해본 내용은 sort()의 숫자일 경우이며, 문자의 경우 하기 포스팅에서

정리해본다. 감사합니다.