220723 TIL

220723 TIL

중간 중간 알고리즘을 풀고 있다. 그래서 인지 어제 풀었던 것을 오늘 다시 풀곤한다. 메서드에 대해서 알게된 것들이 생겨 정리한다.

Array.prototype.sort()

sort() 메소드는 배열을 정렬할 때 많이 사용했던 메소드이다. 주로 숫자타입에 있는 배열들만 정리하였고, 내림차순, 오름차순 이렇게 간단하게만 사용하였다. 이번에 좀 더 다양한 기능에 대해서 알아보자.

구문

arr.sort([compareFunction])

• compareFunction(Optional)
  정렬 순서를 정의하는 함수이다. 생략하면 유니 코드 포인트 값에 따라 정렬된다고 한다. 숫자는 문자열로 변환되기 때문에 주의가 필요하다. 보통 compareFunction에서 비교할 매개변수를 a, b로 넣는다. a는 첫번째 인자, b는 두번째 인자로 말이다.

const arr = [1, 30, 4, 100, 25]
arr.sort()
//compareFunction 이 없을 경우 유니코드 포인트값에 따라 정렬된다.
console.log(arr) // [ 1, 100, 25, 30, 4 ]

반환값

기존에 원본 배열이 정렬된다고 한다. 이 부분을 몰랐기 때문에 알고리즘을 풀 때 작은 삽질이 있었다. array에 대한 메소드는 원본배열을 바꾸는 것과 바꾸지 않는 것이 있다고하는데, 아래에 추가적으로 다뤄보도록 하겠다.

compareFunction 사용

콜백함수인 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 순서가 바뀐다.

• 반환값이 0보다 클 경우 b뒤로 a가 간다. a가 크기 때문이다.
• 반환값이 0보다 작을 경우 a뒤로 b가 간다. b가 크기 때문에 음수값이 나왔을 것이다.
• 반환 값이 0일 경우 그대로 유지한다.
  글로 풀면 어렵다. 숫자인 경우 개인적으로 a - b를 오름차순으로 외워버렸다ㅠ. a, b 부터 오름차순이라는식으로 말이다...(그래서인지 간단히 써야할 TIL이 험난해지고 있다.) 그렇다면 반대로 내림차순은? 반환값이 b - a 일 것이다.

//내림차순 일 경우
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' ]

Mutator Methods VS Non-mutator Methods

중간에 반환값에서 기존 원본 배열이 변경된다고 하였는데, 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