차근차근/JAVA Script

sort()

예쁜꽃이피었으면 2022. 4. 7. 12:31

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

 

Array.prototype.sort() - JavaScript | MDN

sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. 정렬은 stable sort가 아닐 수 있습니다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다.

developer.mozilla.org

 

https://hianna.tistory.com/409

 

[Javascript] 배열 정렬하기 (오름차순, 내림차순, 문자열, 객체)

배열 정렬하기 (오름차순, 내림차순, 문자열, 객체) 1. sort() 함수 2. sort() 함수로 숫자 오름차순 정렬하기 3. sort() 함수로 숫자 내림차순 정렬하기 4. sort() 함수로 문자열 정렬하기 5. sort() 함수

hianna.tistory.com

https://brunch.co.kr/@swimjiy/12

 

JavaScript sort() 함수 톺아보기

생각 없이 쓰던 정렬 제대로 알아보자. | 평소 코딩 테스트 준비 때문에 알고리즘 문제를 자주 풀곤 하는데, sort(), apply() 같은 메서드부터 Map, Set 같은 타입까지 자바스크립트에 내장된 다양한 문

brunch.co.kr

https://opentutorials.org/course/50/109

 

sort - 생활코딩

요약(Summary) 배열을 정렬한다. 문법(Syntax) array.sort(sortfunc) 인자(Parameters) 인자명 데이터형 필수/옵션 설명 sortfunc function 옵션 원소들 간에 무엇이 우선인지를 판단한다 반환값(Return) array, 정렬된

opentutorials.org

생활코딩 댓글 중 .. ▼

더보기

 

 

구체적인 정렬 알고리즘은 프로그래밍 초심자가 이해하기 어려워서
이고잉님께서 일부러 설명을 스킵하신 것 같은데...
밑에 잘못된 정보가 있어 제가 굳이 설명을 보탭니다.

우선 [20, 10, 9,8,7,6,5,4,3,2,1]의 배열에서 a-b라는 연산을 모두 한 다음
그 결과값으로 정렬하는 것이 결코 아닙니다.
뭐하러 굳이 뺄셈을 하고 그 값으로 또 정렬하겠습니까?

자바스크립트의 정확한 알고리즘은 아니지만
쉽게 정렬 알고리즘을 설명하면 이렇습니다.

(a,b) 형식으로 지정한 두 인자를 차례로 비교합니다.

우선 배열 numbers[0]과 numbers[1] 즉, 20과 10을 비교해 볼까요?
20-10 = 10
결과값이 10 즉, 양수입니다.
sort함수에 sortNumber(a,b)의 return 값으로 양수 10을 전달합니다.
그럼 sort함수가 양수값을 전달받고 배열의 순서를 바꾸어 버립니다.
(정확하게 말하면 두 배열 안에 든 값을 교체)
그럼 배열이 [10, 20, 9,8,7,6,5,4,3,2,1] 이렇게 바뀝니다.

그 다음 numbers[0]과 numbers[2] 즉 10과 9를 비교합니다. 10 - 9 = 1 >0, 양수입니다.
결과값이 양수이므로 또 10과 9의 순서를 바꿉니다.
이런 식으로 계속 두 인자를 비교해서 결과값이 양수가 나오면 순서를 바꾸고,
음수가 나오면 순서를 그대로 유지하는 겁니다.

배열이 바뀌어가는 순서를 보면 이해하기 쉽습니다.

[(20), (10), 9,8,7,6,5,4,3,2,1] 20-10 = 10, 즉 양수이므로 순서바뀜! ()는 비교되는 인자값.
[(10), 20, (9),8,7,6,5,4,3,2,1] 10 - 9 = 1 또 양수, 순서 바뀜.
[(9), 20, 10, (8),7,6,5,4,3,2,1] 반복...
[(8), 20, 10, 9,(7)...]
...
[(2). 20, 10...3, (1)]
[(1), 20, 10...]

그럼 배열 내에서 가장 작은 값 1이 찾아지겠죠.

[1, 20, 10, 9,8,7,6,5,4,3,2]

1의 순서는 바뀌지 않습니다. 1-2 = -1
즉 결과값이 음수이기 때문이죠.

그 다음은 두번째 배열 차례입니다.
20 - 10 = 10 > 0 이므로 순서를 또 바꿉니다.

[1, (20), (10), 9,8,7,6,5,4,3,2]
[1, (10), 20, (9), 8...]
[1, (9), 20, 10, (8)...]

이런 식으로 반복하다 보면 두번째로 작은 값 2도 찾게 됩니다.

....
[1, 2, 20, 10, 9,8,7,6,5,4,3]

그럼 다음은 세번째...
이렇게 지루하게 반복하면 결국 정렬이 됩니다.

물론 실제 자바스크립트에서는 비교하는 순서가 다릅니다.
다른 알고리즘을 쓰기 때문이죠.

이렇게 차례차례 비교해 나가면 인간이 이해하기는 쉽지만
연산량이 기하급수적으로 늘어나기 때문에 다른 정렬 알고리즘을 쓰는 것이죠.

실제로는
[20, 10, 9,8,7,6,5,4,3,2,1]
배열의 양쪽 끝부터 비교하고 (20, 1),
그 다음 배열의 가운데 값을 차례로 비교해 나갑니다. (1,6)
디버깅해 보시면 쉽게 아실 수 있을 겁니다

 


코드를 읽다가 

temp[] 을 sort하는 코드를 봤다.

예)

temp.sort(function(a,b){

});

그냥 정렬하겠거니 하고 넘기려고 했는데 a,b는 어떤 값인지

저 함수는 어디에 정의되어 있는지 궁금해졌다. 일단 내장함수이고

 

일단 얼핏보기에 a는 index이고 b는 value인가 싶었다. 배열이니까.

그런 찾아보니 
a = temp[0] , b= temp[1] 이런 식으로 정렬을 해야하는 배열의 값이었다.

 

sort함수의 정렬조건을 따로 정의하지 않는다면 아스키 코드값? 으로 정렬이 되어서 

원하는대로 정렬이 안될 수도 있다.

 

찾아보면

a > b 이면 1

a == b 이면 0

a < b 이면 -1

를 리턴한다고 하는데 리턴값에 따라 인덱스의 순서를 바꾸거나 그대로 두거나 하면서 

정렬을 한다. 

 

 

 

 

 

 

 

 

 

 

 

반응형

'차근차근 > JAVA Script' 카테고리의 다른 글

이미지 첨부파일 다운로드 시 유효성 체크하기  (0) 2022.07.07
viewport remove  (0) 2022.05.06
datatables 수정하기  (0) 2022.02.16
chart.js 그래프 겹침/ 흔들림  (0) 2022.02.15
body onload / window onload()  (0) 2022.02.03