본문 바로가기

[자바스크립트] 배열 정렬을 위한 비교 함수 정리 (toSorted, sort)- 한입 크기로 잘라먹는 리액트 강의 후기 포함

ironwhale 2024. 8. 1.

 인프런의 한입 크기로 잘라먹는 리액트 강의를 듣다가 배열 정렬을 위한 비교함수 부분에서 어려움을 느껴 한번 정리하는 시간을 가져 보도록 하겠습니다. 

1.  배열을 정렬하는 함수 두개(toSorted, sort)

자바스크립트에서 배열을 정렬하는 함수는 두개로 toSorted, sort가 있습니다. 이 둘의 차이점은 아래와 같습니다. 

  • toSorted: 원본 배열은 그대로 두고 정렬된 새로운 배열을 반환
  • sort: 반환하는 데이터 없이 원본 배열을 정렬함

2.  내맘대로 순서를 바꿀수 있는 비교 함수 정리

비교 함수에서는 딱 두가지만 기억하시면 됩니다. 두 값을 뺀 값이 0보다 크면 자리를 바꾸고 0이거나 0보다 작으면 그대로 둔다.

2.1  코드로 보기

아래와 같은 데이터가 있다고 가정해보겠습니다.

data = [2024-8-1, 2024-6-6,2024-7-5];

const data = [new Date(2024, 7, 1, 0, 0, 0,),
    new Date(2024, 5, 6, 0, 0, 0,),
    new Date(2024, 6, 5, 0, 0, 0,)];

data.map((item)=>{
    console.log(item.toLocaleString());
});
console.log("=================")
const sortedData = data.toSorted((a, b) => a - b);

sortedData.map((item)=>{
    console.log(item.toLocaleString());
});



// 결과
8/1/2024, 12:00:00 AM
6/6/2024, 12:00:00 AM
7/5/2024, 12:00:00 AM
=================
6/6/2024, 12:00:00 AM
7/5/2024, 12:00:00 AM
8/1/2024, 12:00:00 AM

 

첫번째로 8월1일 - 6월 6일을 하면 양수가 나오므로 둘의 순서가 바뀌고 두번째로 8월 1일 - 7월 5일의 값 역시 양수 이므로 자리가 바뀝니다. 자세한 내부 로직은 모르겠지만 이런식으로 모든 항목을 돌려봤을 때 두 값의 차가 양수가 나오지 않을때까지 해당 정렬 작업이 수행되는 것으로 보입니다. 

3. 정리

비교함수는 볼때 마다 새로워서 이렇게 글로 한번 정리를 해야 기억이 남을거 같아 이렇게 포스팅하였습니다

1. 순서가 바뀔때: a-b> 0 이면 a, b의 순서를 바꾼다 [a,b] => [b,a]

2. 순서가 그대로 일때 : a-b = 0 또는 a-b<0 이면 순서를 바꾸지 않는다. [a,b] => [a,b]

4.  한입 크기로 잘라먹는 리액트 강의 후기

수능 강의, 공무원 시험 강의, 토익과 같이 대중성이 높은 시험에 경우에는 후기도 많고 흔히 1타라도 불리우는 유명한 강사님들이 있기 마련입니다. 하지만 그외에 파이가 작은 비주류 분야의 강의는 정말 후기가 없고 괜히 큰돈 주고 샀다가 돈만 날리는 경우가 많았습니다. 

특히 저의 경우 패스트캠퍼스의 올인원 패키지에 낚여 질문이 있어도 답변도 제대로 못받고 왜 이렇게하지 왜 이게 되지라는 의문점도 있었지만 강의에서는 그냥 이렇게 따라치세요 식의 제대로 강의 준비가 안된 상태에서 강의를 만드신 분들에게 많이 실망했었습니다. 

제가 들은 한입 크기로 잘라먹는 리액트 강의는 강사님이 준비를 많이 하신 티가 팍팍나서 돈이 아깝지 않은 느낌이 오랜마네 들었던거 같았습니다. 특히 질문 답변도 바로바로 해주시고 오픈채팅방도 운영하시고 디스코드도 운영하시고 여러 채널을 통해 소통할 수 있다는 점이 유용 했습니다. 

4.1 해당 강의 타겟층

이 강의 타겟층은 저처럼 자바스크립트 문법부터 리액트의 기초를 닦고 싶은 신분들게 추천드립니다. 현재 2024년 버전으로 리뉴얼 되었고 강사님이 1.5배속 2배속으로 들어도 잘 들리도록 신경쓰셨다고 한만큼 배속으로 들어도 귀에 쏙쏙 들어옵니다. 

다만, 어느정도 리액트 경험이 있으신 분들은 기초적인 내용이어서 스킵하셔도 될거 같고, 아쉬운 점은 api에서 데이터를 받아와서 리액트 화면은 구성하는 것은 없다는 점입니다. 

진짜 한입크기로 강의를 잘 쪼개두셔서 점심시간 출퇴근 길에 조금씩 듣다보니 어느새 남은 강의가 9강 정도 네요. 정말 오랜마네 돈이 아깝지 않은 강의를 잘 산것 같이 이렇게 후기 남깁니다. 

댓글