JavaScript | Array.sort()

앙두·2023년 5월 18일
0

JavaScript

목록 보기
16/21

배열 정렬에 자주 다루는 sort() 메서드를 내가 생각보다 정확하게 알고 있지 않기도 하고,
잘 알고 잘 활용하면 여기저기 유용하게 쓸 수 있는 메서드인 것 같아
이 참에 공부하며 정리해보려고 한다 👩🏻‍💻

Array.sort()

array.sort([compareFunction])

배열은 기본적으로 문자형 오름차순(Ascending order, ASC)으로 정렬합니다.
배열 안의 요소들이 문자가 아닌 숫자여도, 문자형으로 인식하며 동작합니다.

👇🏻 예시1

const arr = [1, 100, 1132, 213, 23]
arr.sort()
// [ 1, 100, 1132, 213, 23 ]

위와 같이, 숫자의 실제 크기대로 정렬해주는 것이 아니라,
문자형으로 인식하여 앞숫자가 1인 요소들을 앞세우고 2인 요소들을 뒤로 세워
문자형 오름차순의 형태를 보여줍니다.

👇🏻 예시2

const month = ['january', 'fabruary', 'March', 'April']
month.sort()
// [ 'April', 'March', 'fabruary', 'january' ]

그래서 숫자형 오름차순을 사용하려면, sort() 메서드의 옵션인 compareFunction 을 이해해야 하고, 사용해야 합!니!다!
( * 그래서 comparFunction은 optional이다. )


비교 함수(compareFunction)

compareFunction(comp1, comp2)

compareFunction은 두 개의 비교 객체를 비교하여 두 객체의 크고 작음을 return 하여 정렬시켜줍니다.

  • return 값이 0 보다 작을 때 : comp1 가 comp2 보다 낮은 요소로 정렬
  • return 값이 0 일 때 : 동일하게 정렬 (자리가 바뀌지 않음)
  • return 값이 0 보다 클 때 : comp1 이 comp2 보다 큰 요소로 정렬

👇🏻 숫자 정렬 예시

const number = [20, 87, 2, 19, 300, 41];

// Ascendig order (오름차순)
number.sort(function(comp1, comp2) {
	return comp1 - comp2;
  	// 오름차순에서는 반환 값이 양수면 서로 자리가 바뀜
})

console.log(number) // [ 2, 19, 20, 41, 87, 300 ]

// Descending order (내림차순)
number.sort(function(comp1, comp2) {
	return comp2 - comp1;
  	// 내림차순에서는 반환 값이 음수면 서로 자리가 바뀜
})

🤨 느낀점

사실 sort()의 내부 알고리즘과 원리를 이해하고 싶은데, 아무리봐도 헷갈린다.
자바스크립트 엔진 동작과 관련이 있는 것 같은데, JS를 좀 더 공부하고 나중에 sort()를 더 깊게 파봐야겠다.


🙇🏼‍♀️ 참고

https://carrotweb.tistory.com/185
https://noirstar.tistory.com/359

profile
쓸모있는 기술자

0개의 댓글