[JS] sort 완벽 정리: 개념부터 예제까지

 

 

자바스크립트에서 배열을 다룰 때 꼭 알아야 할 메서드 중 하나가 바로 sort입니다. 이번 글에서는 sort가 뭔지, 언제 쓰이는지부터 시작해서 문법과 실전 예제까지 차근차근 알아보겠습니다. 초보자도 쉽게 이해하고 따라 할 수 있게끔 풀어놨어요. 그럼 시작해볼게요!

 

1. sort란...?

sort는 배열에 담긴 요소들을 특정 순서대로 정렬해주는 자바스크립트 내장 메서드예요. 이름 그대로 '정렬'을 뜻하죠. 숫자를 크기 순으로 나열하거나, 문자열을 알파벳 순으로 정리할 때 딱이에요.
예를 들어, 온라인 쇼핑몰에서 "가격 낮은 순"으로 상품을 보여주거나, 친구 목록을 이름순으로 정렬할 때처럼 실생활에서도 자주 접할 수 있습니다. 중요한 점은 sort가 배열 자체를 수정한다는 거예요. 원본 데이터가 바뀌니까 조심해서 써야 합니다.

 

---

 

2. sort의 문법과 다양한 사용법

sort의 기본 구조는 간단합니다:

array.sort([compareFunction]);

compareFunction은 선택적으로 넣을 수 있는데, 이 함수가 있느냐 없느냐에 따라 결과가 크게 달라집니다. 하나씩 살펴볼게요.

기본 정렬: 비교 함수 없이

비교 함수를 생략하면 sort는 배열 요소를 문자열로 간주하고 유니코드 순서대로 정렬합니다.

let fruits = ["banana", "apple", "cherry"];
fruits.sort();
console.log(fruits); // ["apple", "banana", "cherry"]

문자열 정렬에는 문제없지만, 숫자라면 주의가 필요해요. 예를 들어:

let numbers = [10, 5, 100];
numbers.sort();
console.log(numbers); // [10, 100, 5]​

숫자가 아니라 문자열로 취급해서 "10"이 "100"보다 뒤로 가버리죠. 숫자 정렬을 제대로 하려면 비교 함수가 필수입니다.

비교 함수로 숫자 정렬

비교 함수는 두 요소 a와 b를 비교해서 순서를 결정해요:

• a - b < 0: a가 b 앞에 (오름차순)
• a - b > 0: b가 a 앞에 (내림차순)
• a - b === 0: 순서 유지
  오름차순 예시:

let numbers = [10, 5, 100];
numbers.sort((a, b) => a - b);
console.log(numbers); // [5, 10, 100]

내림차순은 반대로:

numbers.sort((a, b) => b - a);
console.log(numbers); // [100, 10, 5]

객체 배열 정렬

객체가 담긴 배열도 정렬할 수 있어요. 특정 속성을 기준으로 비교하면 됩니다.

let people = [
  { name: "철수", age: 25 },
  { name: "영희", age: 20 },
  { name: "민수", age: 30 }
];
people.sort((a, b) => a.age - b.age);
console.log(people);
// [{ name: "영희", age: 20 }, { name: "철수", age: 25 }, { name: "민수", age: 30 }]

 

---

 

3. sort 사용 예제

이제 실전에서 어떻게 쓰이는지 예제로 확인해볼게요. 간단하면서도 실용적인 케이스들입니다.

예제 1: 문자열 배열 정렬

let animals = ["cat", "dog", "bear", "ant"];
animals.sort();
console.log(animals); // ["ant", "bear", "cat", "dog"]

예제 2: 숫자 배열 정렬 (오름차순 & 내림차순)

 

let scores = [85, 92, 78, 95, 88];
scores.sort((a, b) => a - b); // 오름차순
console.log(scores); // [78, 85, 88, 92, 95]
scores.sort((a, b) => b - a); // 내림차순
console.log(scores); // [95, 92, 88, 85, 78]

예제 3: 객체 배열에서 가격순 정렬

let products = [
  { name: "셔츠", price: 30000 },
  { name: "바지", price: 50000 },
  { name: "모자", price: 20000 }
];
products.sort((a, b) => a.price - b.price);
console.log(products);
// [{ name: "모자", price: 20000 }, { name: "셔츠", price: 30000 }, { name: "바지", price: 50000 }]

 

---

 

4. 마무리

자바스크립트 sort는 단순해 보이지만 활용도가 높아요. 기본적으로 문자열 정렬에 쓰기 좋고, 비교 함수를 추가하면 숫자나 객체까지 자유롭게 정렬할 수 있죠. 다만, 원본 배열을 직접 바꾼다는 점 때문에 원본을 보존하고 싶다면 slice()나 스프레드 연산자([...array])로 복사한 뒤 사용하는 걸 추천합니다.
이 글을 통해 sort의 기본부터 응용까지 확실히 익히셨길 바랍니다. 궁금한 점이나 더 알고 싶은 게 있다면 언제든 댓글로 물어보세요!