학습 자료

배열 메서드 - 졍렬(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]으로 정렬됩니다.


배열 내 객체 정렬

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

학생들의 키를 기준으로 오름차순 정렬
const students = [ { name: '민호', height: 170 }, { name: '영희', height: 160 }, { name: '지민', height: 175 }, ]; // 세 학생의 키 순서대로 오름차순 정렬 students.sort((a, b) => a.height - b.height); console.log(students);
Mission
0 / 1

다음 중 빈칸에 들어갈 가장 적절한 것은 무엇일까요?

숫자 배열을 오름차순으로 정렬하려면 메서드에 compareFunction을 전달해야 합니다.
sort()
push()
pop()
map()

학습 자료

AI 튜터

디자인

업로드

수업 노트

즐겨찾기

도움말

코드 에디터

코드 실행

실행 결과