[그리드 컴포넌트] sort 함수 정리하기

KINA KIM·2022년 5월 18일
0

Sort()

그리드 컴포넌트에 헤더를 이용한 소팅 기능을 추가하고 있는데 다소 헷갈리는 부분이 있어 정리가 필요했다.

기본 개념

arr.sort([compareFunction])

배열의 요소를 정렬하고 그 배열을 반환하는 함수다. 0보다 작은 경우, 0보다 큰 경우에 따라 아래와 같이 정렬된다.

  • 0보다 작은 경우 (순서 바뀜)
  • 0보다 큰 경우 (그대로 유지)
arr.sort((a,b)=>{
  return a-b
}

위와 같은 형태로 사용하게 된다. 소팅할 배열을 순회하면서 b에는 현재 값을, a에는 다음 값을 넣어가며 비교한다. a-b를 리턴할 때 음수값이 나오게 되면 a와 b의 순서를 변경하고, 0보다 크면 그대로 유지한다.

삼항연산자를 통한 정렬

arr.sort((a,b)=>{
  return a > b? -1 : 1
})

기본 개념을 적용해 코드를 읽어보자면, 다음 값이 현재 값보다 크면(a>b) 다음 값과 현재 값을 바꾸고(a<->b), 아니면 그대로 유지한다. 따라서 결과는 내림차순 정렬이 된다.

arr.sort((a,b)=>{
  return a > b? 1 : -1
})

반환값을 바꿨다. 다음 값이 현재 값보다 크면(a>b) 다음 값과 현재 값을 그대로 유지하고, 아니면 값을 바꾼다. 따라서 결과는 오름차순 정렬이 된다.

객체 정렬

sort() 함수는 객체에서도 마찬가지로 적용된다. 다만 다른 점은 정렬 기준이 되는 객체의 키값을 전달해야 된다는 점이다. obj라는 객체의 age 키값을 기준으로 오름차순 정렬을 하고 싶다면 아래와 같이 sort 함수를 사용한다.

obj.sort((a,b)=>{
  return a.age > b.age? -1 : 1
})

b에는 객체의 현재 요소가 담겨있고, a에는 객체의 다음 요소가 담겨있다. b.age와 a.age를 비교해서 a.age가 크다면 객체의 현재 요소와 객체의 다음 요소의 순서를 바꿔준다. 반복해서 객체를 순회하며 계속 소팅을 해주면 결과적으로 내림차순 정렬이 된다.

0개의 댓글