[Javascript 활용] 배열_Array.prototype.sort

2021.06.22

sort 메서드

Array.prototype.sort

---

기능

- 배열의 요소를 정렬

- 원본배열을 직접 변경하며 정렬된 배열을 반환 (즉, 원본값을 바꾼단 의미)

- 숫자타입, 문자타입 모두 정렬 가능

 

 

---

활용

 

1. 정렬을 하자

- 오름차순 정렬: default값

- 내림차순 정렬: sort로 정렬 후 reverse로 뒤집어 준다.

 

내림차순 정렬방법

arr.sort( ) // 먼저 오름차순 정렬 후
arr.reverse( )  // 그 다음 뒤집어 주기

 

 

! 주의사항 !

유니코드 포인트 순서를 따르므로 숫자타입의 경우엔 정렬순서를 정의하는 비교함수를 인수로 전달해줘야한다.

 

무슨소리냐하면, 문자기준으로 기본 정렬 세팅이 되어있으니 숫자기준으로 정렬하고 싶으면 어떤식으로 정렬하고 싶은지 함수한테 말해줘야 한다는 의미.

 

만약 숫자타입을 인수없이 정렬하면 [1, 10, 100, 2, 20] 이런 순서로 정렬된다.

 

 

 

2. 비교함수가 뭔데?

- 숫자타입을 정렬하기 위해 필요한 친구

- 양수, 음수, 0을 반환해야 함

 

- (비교함수 반환값 < 0) ? 오름차순 정렬 (a-b)  //왜냐하면 a값을 우선하여 정렬하기 때문

- (비교함수 반환값 > 0) ? 내림차순 정렬 (b-a)  //위와 반대로 생각하면 됨. 설명은 한번만 ㄱㄱ

 

예를들어

const arr = [2, 4, 6];
arr.sort((a,b) => a-b);

이면 (2-4) < 0 이기 때문에 2를 기준으로 정렬하게 된다. 즉, 오름차순으로 정렬하게 된단 의미.

 

 

3. 객체를 요소로 갖는 배열은 어떻게 정렬함?

- 프로퍼티 값이 문자열인 경우엔 비교연산(<, >, = 이런거)을 사용

왜냐면 비교함수는 양수, 음수, 0을 반환하면 되니까 비교를 통해 0, 1, -1 을 내가 직접 지정해주면 되기 때문!

하지만 무슨소린지 모르겠으니까 예를 보자

 

const bts =[
{ name: '남준', code_name: 'RM' },
{ name: '윤기', code_name: 'SUGAR' },
{ name: '정국', code_name: 'JUNGKOOK' },
{ name: '석진', code_name: 'JIN' },
{ name: '태형', code_name: 'V' },
{ name: '지민', code_name: 'JIMIN' },
{ name: '호석', code_name: 'JHOPE' },
];

function compare(key) {
    return (a, b) => (a[key] > b[key] ? 1 : (a[key] < b[key] ? -1 : 0 ));
}

//code_name을 기준으로 오름차순 정렬
bts.sort(compare('code_name'));
console.log(bts);

//solution
0: {name: "호석", code_name: "JHOPE"}
1: {name: "지민", code_name: "JIMIN"}
2: {name: "석진", code_name: "JIN"}
3: {name: "정국", code_name: "JUNGKOOK"}
4: {name: "남준", code_name: "RM"}
5: {name: "윤기", code_name: "SUGAR"}
6: {name: "태형", code_name: "V"}

 

참 쉽죠?