중간 중간 알고리즘을 풀고 있다. 그래서 인지 어제 풀었던 것을 오늘 다시 풀곤한다. 메서드에 대해서 알게된 것들이 생겨 정리한다.
sort() 메소드는 배열을 정렬할 때 많이 사용했던 메소드이다. 주로 숫자타입에 있는 배열들만 정리하였고, 내림차순, 오름차순 이렇게 간단하게만 사용하였다. 이번에 좀 더 다양한 기능에 대해서 알아보자.
arr.sort([compareFunction])
const arr = [1, 30, 4, 100, 25]
arr.sort()
//compareFunction 이 없을 경우 유니코드 포인트값에 따라 정렬된다.
console.log(arr) // [ 1, 100, 25, 30, 4 ]
기존에 원본 배열이 정렬된다고 한다. 이 부분을 몰랐기 때문에 알고리즘을 풀 때 작은 삽질이 있었다. array에 대한 메소드는 원본배열을 바꾸는 것과 바꾸지 않는 것이 있다고하는데, 아래에 추가적으로 다뤄보도록 하겠다.
콜백함수인 compareFunction(a, b)에서 반환값이 음수, 양수, 0일 경우에 대해서 정렬이 된다. 우선적으로 알고 있는 숫자에 대해서 소개 하겠다. 위에 예시에서 compareFunction이 없으면 문자열로 변환되어 유니코드 포인트 값으로 정렬 되었다. 그렇기 때문에 compareFunction을 넣는 것이 확실하다고 볼 수 있다.
//오름차순 일 경우
const arr2 = [1, 10, 20, 3, 4]
arr2.sort(function(a ,b){
return a - b
})
console.log(arr2) // [ 1, 3, 4, 10, 20 ]
위에서 얘기 했듯이 반환값이 음수, 양수, 0일 경우에 대해 a, b 순서가 바뀐다.
//내림차순 일 경우
const arr2 = [1, 10, 20, 3, 4]
arr2.sort(function(a ,b){
return b - a
})
console.log(arr2) // [ 20, 10, 4, 3, 1 ]
또한 숫자일 경우 화살표 함수로 간단히 표현 가능하다.
//화살표 함수,내림차순 일 경우
const arr2 = [1, 10, 20, 3, 4]
arr2.sort((a ,b)=> b - a)
console.log(arr2) // [ 20, 10, 4, 3, 1 ]
문자열일 경우 대소 관계를 표현 해주어야 한다. 아래 예시는 문자열일 경우이다.
//오름차순 일 경우
const arr1 = ["a", "d", "b", "z", "c"]
arr1.sort(function(a ,b){
if(a < b) return -1
if(a > b) return 1
return 0
})
console.log(arr1) // [ 'a', 'b', 'c', 'd', 'z' ]
다음은 문자열 내림차순의 경우이다.
//내림차순 일 경우
const arr1 = ["a", "d", "b", "z", "c"]
arr1.sort(function(a ,b){
if(a < b) return 1
if(a > b) return -1
return 0
})
console.log(arr1) // [ 'z', 'd', 'c', 'b', 'a' ]
다만, 확실한것은 아니지만 return 값을 -1 로 고정하고 대소관계만 바꾸면 오름차순과 내림차순이 가능하였다. 이유를 찾으려 했으나 ㅠㅠ... 못 찾겠다. 중요한 것은 아니라고 생각하니 우선 넘어가겠다.🏳️
//오름차순 일 경우
const arr1 = ["a", "d", "b", "z", "c"]
arr1.sort(function(a ,b){
if(a < b) return -1
})
console.log(arr1) // [ 'a', 'b', 'c', 'd', 'z' ]
//내림차순 일 경우
const arr1 = ["a", "d", "b", "z", "c"]
arr1.sort(function(a ,b){
if(a > b) return -1
})
console.log(arr1) // [ 'z', 'd', 'c', 'b', 'a' ]
중간에 반환값에서 기존 원본 배열이 변경된다고 하였는데, array대한 메서드 중에서는 기존 배열을 변경하여 반환하는 것과 복사본을 반환하는 것으로도 나눌수 있다고 한다.
Mutator Methods
기존 Array를 수정한다.
Non-mutator methods(accessor methods)
기존 array이는 그대로 나두고 변경된 새로운 array를 반환한다.
딱히 어느 기준으로 있는건 아닌거 같지만 사용시 주의해야하는 바이다. 아래 사이트에 배열 메소드를 정리한 포스트이지 참고 바란다.
[Mutator VS Non-mutator and the returning value]
typescript 강의를 얼릉 들어야 하는데 말이다 ㅠㅠ.
[Array.prototype.sort(), MDN, 2022년07월26일 접속]
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
[JavaScript array methods: Mutator VS Non-mutator and the returning value, https://dev.to/, 2022년07월26일 접속]
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort