[2주차] JavaScript 문법 특강 - sort()

오늘은 Javascript 문법 중 sort() 에 대한 특강이 있었다. 2주차 강의에 딸린 과제가 바로 이 sort()를 사용하는 것이었는데 그 때도 상당히 헤맸기 때문에 이번 특강이 매우 중요할 것이라고 생각했다. 선택 수강이라고 하셨지만 바로 직행✨

sort 문법

배열의 요소를 정렬하는 데 사용된다.

array.sort([compareFunction])

sort의 기본원리

작동방식

const arr = [1, 2, 9, 80];
arr.sort(); // 1, 2, 9, 80

sort()를 사용하면 오름차순으로 배열을 변경하게 된다. 그런데 위의 경우와 같이 비교 함수를 생략하게 되면 배열의 각 요소들이 문자열로 자동 변환되어 각 문자의 유니코드 포인트 값에 따라 오름차순으로 정렬된다. 따라서 숫자의 오름차순으로 정렬이 되지 않는다.

오름차순(ascending) & 내림차순(descending)

• 오름차순 정렬 sort((a, b) => a - b)

/**function을 사용하는 경우**/

const arr = [1, 2, 80, 9];
arr.sort(function(a, b) {
    return a - b;
})
console.log(arr); // [1, 2, 9, 80]


/**화살표 함수를 사용하는 경우**/

const arr = [1, 2, 9, 80];
arr.sort((a, b) => a - b);
console.log(arr); // [1, 2, 9, 80]

• 내림차순 정렬 sort((a,b) => b - a)

/**function을 사용하는 경우**/

const arr = [1, 2, 80, 9];
arr.sort(function(a, b) {
    return a - b;
})
console.log(arr); // [80, 9, 2, 1]


/**화살표 함수를 사용하는 경우**/

const arr = [1, 2, 80, 9];
arr.sort((a, b) => a - b);
console.log(arr); // [80, 9, 2, 1]

sort()를 쓰기 위해 구글링으로 화살표 함수를 처음 봤을 때에는 a와 b가 어떤 걸 의미하는 지 짐작조차 쉽게 가지 않았는데, 오늘 튜터님의 강의를 듣고 나니까 이게 어떤 방식으로 작동되는지 이해할 수 있었다. (마참내!)

오름차순, 내림차순 정렬을 하는 sort는 비교 함수를 통해 배열 내의 모든 요소들을 2개씩 차례로 비교하여 어느 것이 더 크고 작은지 확인하는 과정을 거친 후에 확인된대로 배열을 재정돈하는 것이다.

다양한 상황에서의 sort 응용

• 객체로 이루어진 배열: sort()를 사용하여 객체의 특정 key에 접근하여 그 value 값으로 정렬할 수 있다. 객체는 접근할 때 obj1.key 로 접근한다는 사실!

const items = [
  { name: "Edward", age: 21},
  { name: "Sharpe", age: 37},
  { name: "And", age: 45},
  { name: "The", age: -12},
  { name: "Magnetic", age: 13},
  { name: "Zeros", age: 37},
];

/** function을 사용하는 경우 **/

items.sort(function(obj1, obj2) {
  return obj1.age - obj2.age;
});
console.log(items); // age의 오름차순으로 객체 배열이 정렬된다.

/** 화살표 함수를 사용하는 경우 **/

items.sort((obj1, obj2) => obj1.age - obj2.age);
console.log(items); // age의 오름차순으로 객체 배열이 정렬된다.

• 조건부 sort: 나이가 같은 경우에는 다른 key(이 경우에는 name)를 사용해서 정렬 조건을 더 만들 수 있다.

let people = [
   { name: "John", age: 25 },
   { name: "Jane", age: 20 },
   { name: "Mary", age: 25 },
   { name: "Mark", age: 30 }
];

people.sort((a, b) => {
   if (a.age === b.age) {
       // 나이가 같으면 이름으로 정렬
       return a.name.localeCompare(b.name);
   }
   // 나이로 정렬
   return a.age - b.age;
});

console.log(people);

---

오늘은 아침에 알고리즘 강의부터 시작해서 코드 카타, 문법 특강, 일반 강의, 개인 프로젝트 준비 등 참 많은 것을 한 하루였다. 약간 머리가 박살날 것 같은 느낌😫 그래도 새로 배운 점이 많아서 보람찬 하루가 된 것 같다.

함수 표현식과 함수 선언문을 직접 작성하는 게 아직은 많이 어색하다는 것을 느낀다. 실컷 잘 써놓고 return문이나 console.log를 쓰지 않은 채로 실행을 돌리니 아무 것도 찍히는 게 없지...

'뭐지 VS code 고장났나?'같은 멍청한 질문은 필요 없고, '내가 짠 코드가 고장난' 게 불보듯 뻔한 현실이 조금 맵다...

훨씬 더 나아질 수 있겠지...🥲 믿습니다