배열 메서드 - 졍렬(Sort)

sort() 메서드는 배열의 요소들을 적절한 위치에 정렬한 후 그 배열을 반환합니다.

기본 정렬 순서는 숫자의 경우 오름차순, 문자열의 경우 유니코드(문자 시스템을 컴퓨터에서 일관되게 표현한 산업 표준) 순서에 따라 정렬됩니다.

sort()에 인자로 배열 내 요소들을 비교하는 기준인 compareFunction을 넣어서 정렬 순서를 변경할 수 있습니다.

문자열 배열 정렬

가나다순 문자열 정렬

const fruits = ['체리', '가방', '나무'];
fruits.sort();

console.log(fruits); // ['가방', '나무', '체리']

여기서 '체리', '가방', '나무'는 문자열의 유니코드 위치에 따라 가나다 순으로 정렬됩니다.

숫자 배열 정렬

sort는 기본적으로 숫자를 문자열로 변환한 후에 정렬합니다.

문자열로 치환되어 정렬된 숫자 배열

const numbers = [10, 2, 33, 14];
numbers.sort();

console.log(numbers); // [10, 14, 2, 33]

10, 2, 33, 14을 문자열로 변환한 후 정렬하면 숫자 1을 포함하는 문자열이 앞에 위치하게 되어, 숫자 배열이 예상했던 [2, 10, 14, 33]로 정렬되지 않습니다.

숫자 배열의 요소들을 오름차순으로 정렬하려면 배열 내 요소들을 정렬하는 기준을 지정하는 compareFunction을 사용해야 해야 합니다.

compareFunction은 arr.sort(compareFunction)와 같이 sort() 메서드에 인자로 넣어 사용하며, 인자로 넣은 함수는 배열 내 요소들을 비교하는 기준을 정의합니다.

함수는 2개의 인자를 받으며, 반환 값이 0보다 작으면 첫 번째 인자가 두 번째 인자보다 앞에 위치합니다.

0이면 순서가 변하지 않고, 0보다 크면 두 번째 인자가 첫 번째 인자보다 앞에 위치합니다.

numbers 배열 내 숫자 오름차순 정렬

const numbers = [10, 2, 33, 14];

// compareFunction: (a, b) => a - b
numbers.sort((a, b) => a - b); // 오름차순 정렬

console.log(numbers); // [2, 10, 14, 33]

여기서 compareFunction은 (a, b) => a - b입니다.

함수는 먼저 10과 2를 비교합니다. 10 - 2는 8이므로 0보다 크기 때문에 2가 10보다 앞에 위치합니다.

다음으로 10과 33을 비교합니다. 10 - 33은 -23이므로 0보다 작기 때문에 10이 33보다 앞에 위치합니다.

이런 식으로 모든 요소들을 비교하면 numbers 배열은 [2, 10, 14, 33]으로 정렬됩니다.

예시 3: 배열 내 객체 정렬

자바스크립트에서 객체는 기본적으로 순서를 갖지 않습니다. 배열 내 객체를 특정 key에 따라 정렬하려면 아래와 같이 compareFunction을 사용해야 합니다.

학생들의 키를 기준으로 오름차순 정렬

const students = [
  { name: '민호', height: 170 },
  { name: '영희', height: 160 },
  { name: '지민', height: 175 },
];

// 세 학생의 키 순서대로 오름차순 정렬
students.sort((a, b) => a.height - b.height);

console.log(students);

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!

강의 등록하기로그인하기