[javascript] 자바스크립트 소팅 sort() (큰수가 먼저 정렬되는 이유..?)

sort() 란?

sort 메서드는 배열의 요소를 정렬할때 사용하는 함수이다.

MDN에서는 기본 구문을 아래와 같이 정의한다.

arr.sort([compareFunction])

 

 

* 대괄호[] 는 괄호 안의 매개변수가 생략이 가능하다는 의미이다.

정렬의 경우 매개변수가 있을 경우와 없을 경우, 값이 다르게 출력되는 경우가 발생한다.

실제로 정렬 알고리즘을 풀면서 원하는 출력값이 나오지 않아 내용을 정리해보고자 한다.

 

 

 

 

10 이 2보다 먼저 정렬된다?

다음과같은 배열이 주어졌을때 sort 메서드로 정렬을 수행한 수 0번째 인덱스 값을 추출하려 한다.

2가 가장 작고, 7, 10 순으로 커지니 출력 기댓값은 2였다.

하지만 실제로는 10이 출력된다.

대체 왜일까?

let sortArray = [7, 10, 2];

sortArray.sort();
console.log(sortArray[0])


// 기대값 : 2
// 실제 출력값 : 10
>> 10

 

 

 

 

문자열로 형변환이 되기 때문이다!

sort() 메서드의 경우 매개변수를 생략할 경우, 요소는 아스키(ASCII) 문자 기준으로 오름차순으로 정렬된다.

 

 

쉽게 말하자면,  매개변수 없이 메서드를 사용할 경우

배열의 원소를 일시적으로 숫자타입이 아닌 문자열(String) 타입으로 형변환 한다는 소리이다.

 

 

때문에 문자열 타입은 첫 번째 문자를 기준으로 비교하니 2보다 1 이 앞에 있는 10이 먼저 정렬되어

 >> [10, 2, 7]

 

의 값을 가지게 되는것이다.

 

 

 

나의 기댓값대로 10보다 2를 먼저 정렬해보자

이를 위해 필요한것이 상단에서 생략 가능하다 언급한 compareFunction 파라미터 이다.

 

sort() 메서드는 compareFunction로 배열 요소 2개를 반복해 보낸뒤,

compareFunction가 반환하는 값을 기준으로 정렬을 수행한다.

 

 

 

---

- 보내는 요소의 이름을 각각 a와 b라고 할때, 반환값에 따른 sort() 메서드의 해석은 아래와 같다.

function compareFunction(a, b) {
	return a - b
}

• 반환값이 0보다 작을 경우 : a를 b보다 먼저 정렬한다.
• 반환값이 0보다 클 경우 : b를 a보다 먼저 정렬한다.
• 반환값이 0을 반환할 경우 : 서로에 대해 변경하지 않는다.

---

 

 

쉽게 예시로 살펴보자.

let sortArray = [7, 10, 2];

function compareNumbers(a, b) {
  return a - b;
}

console.log('파라미터 없을 경우 : ', sortArray.sort());
>> 파라미터 없을 경우: [10, 2, 7]

console.log('파라미터 있을 경우 : ', sortArray.sort(compareNumbers));
>> 파라미터 있을 경우 : [2, 7, 10]

 

 

 

 

화살표 함수로 사용하기

 

그래서 어떻게 사용하느냐?

바로 ES6의 화살표 함수로 바로 구현이 가능하다. 

위의 예시처럼 작은수 부터 정렬 하려면 반환값이 0보다 작아야 하므로 

a-b를 리턴해준다 (이는 즉 b-a를 할 경우 큰수부터 정렬된다는것! ㅎㅎ)

sortArray.sort((a, b) => { return a-b });

 

 

 

---

 

 

참고 링크 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort