sort

sort란

배열의 값을 정렬해주는 메소드이다.

const arr = ['c', 'q', 'b', 'a']

const sortArr = arr.sort()
console.log(sortArr) // (4) ['a', 'b', 'c', 'q']

위의 코드를 보면 c q b a 에서 a b c q 로 정렬된 것을 볼 수 있다.

 

이 때, 주의할 점은 숫자를 정렬하는 경우이다.

만약 아래와 같은 배열이 있을 때, 우리는 숫자가 오름차순으로 정렬될 것이라고 생각할 수 있다.

const numArr2 = [4, 100, 6, 3, 1] ---> 예상 : 1, 3, 4, 6, 100

 

하지만 코드를 실행하면 아래와 같이 예상과 다른 결과가 나오는 것을 확인할 수 있다.

const numArr2 = [4, 100, 6, 3, 1]
numArr2.sort()
console.log(numArr2) // [1, 100, 3, 4, 6]

 

위와 같이 나온 이유는 sort는 비교함수가 없을 경우 입력된 값을 유니코드에 기반하여 정렬하기 때문이다.

 

숫자로 비교하기 위해서는 아래와 같이 비교함수를 넣어서 실행해야 한다.

const numArr2 = [4, 100, 6, 3, 1]
numArr2.sort((a, b) => a - b)
console.log(numArr2) // [1, 3, 4, 6, 100]

 

 

내림차순으로 정렬하기 위해서는 아래와 같이 a와 b의 자리를 바꿔서 실행하면 된다.

const numArr2 = [4, 100, 6, 3, 1]
numArr2.sort((a, b) => b - a)
console.log(numArr2) // [100, 6, 4, 3, 1]

 

이렇게 sort를 사용하면 쉽게 정렬을 할 수 있다.

불변성의 관점에서

배열 메서드인 sort는 map과 다르게 원본 배열을 바꿔 원본을 유지하지 못한다.

 

const arr = ['c', 'q', 'b', 'a']

const sortArr = arr.sort()
console.log('정렬된 배열', sortArr) // 정렬된 배열 (4) ['a', 'b', 'c', 'q']

console.log('원본 배열', arr) // 원본 배열 (4) ['a', 'b', 'c', 'q']

 

 

원본을 훼손하지 않고 불변성을 유지하기 위해서는 map, slice 등을 활용하여 새로운 배열을 만들어서 sort를 적용하여 유지할 수 있다.

아래의 코드는 map을 활용한 코드이다.

const arr22 = ['하', '나', '가', '사']

const sortArr22 = arr22.slice().sort()
console.log(sortArr22) //(4) ['가', '나', '사', '하']

//원본 배열
console.log(arr22) //(4) ['하', '나', '가', '사']

 

위와 같이 원본이 변경되지 않은 것을 볼 수 있다.

 

2024.01.24 - [react] - 불변성의 개념과 불변성이 중요한 이유