sort()
함수를 사용하여 배열, Map, Set 객체를 정렬하는 방법과 예제를 소개합니다.
1. 배열 정렬
1.1 문자열 배열
문자열 배열은 아래와 같이 sort()
를 호출하면 알파벳 순서로 오름차순 정렬이 됩니다.
내림차순으로 정렬하려면, sort()
에 함수를 전달하여 내림차순으로 계산되도록 구현해야 합니다.
const fruits = ['kiwi', 'apple', 'melon', 'banana'];
// ascending sort
fruits.sort();
console.log(fruits);
// descending sort
fruits.sort(function (a, b) {
if (a > b) return -1;
else if (b > a) return 1;
else return 0;
});
console.log(fruits);
Output:
[ 'apple', 'banana', 'kiwi', 'melon' ]
[ 'melon', 'kiwi', 'banana', 'apple' ]
1.2 숫자 배열
아래와 같이 숫자 배열에 sort()
를 호출하면, 올바르게 정렬이 안됩니다. 숫자가 문자열로 인식되어 문자 순서로 정렬되기 때문입니다.
const numbers = [10, 2, 16, 8, 4, 5];
numbers.sort();
console.log(numbers);
Output:
[ 10, 16, 2, 4, 5, 8 ]
숫자 크기로 정렬하려면 아래와 같이 sort()
에 함수를 전달하여 숫자 크기로 정렬되도록 구현해야 합니다.
아래 예제는 숫자 배열이 오름차순과, 내림차순으로 정렬되도록 구현된 예제입니다.
const numbers = [10, 2, 16, 8, 4, 5];
// ascending sort
numbers.sort((a, b) => a - b);
console.log(numbers);
// descending sort
numbers.sort((a, b) => b - a);
console.log(numbers);
Output:
[ 2, 4, 5, 8, 10, 16 ]
[ 16, 10, 8, 5, 4, 2 ]
1.3 객체 배열
객체 배열도 sort()
의 인자로 어떻게 정렬할 것인지 직접 구현 내용을 함수로 전달해야 합니다.
아래 예제는 객체의 id
값의 크기로 오름차순 정렬하도록 구현하였습니다.
const arr = [
{id: 22, name: 'kiwi' },
{id: 11, name: 'apple' },
{id: 2, name: 'melon' },
{id: 9, name: 'grape' }
];
arr.sort((a, b) => a.id - b.id);
console.log(arr);
Output:
[
{ id: 2, name: 'melon' },
{ id: 9, name: 'grape' },
{ id: 11, name: 'apple' },
{ id: 22, name: 'kiwi' }
]
2. Map 정렬
Map을 정렬할 때는, 먼저 Spread 연산자를 사용하여, Map의 key-value
요소들을 배열로 변환합니다.
그리고 배열에 대해서 sort()
함수로 정렬하면, key를 기준으로 오름차순 정렬됩니다.
let myMap = new Map([
['c', 2],
['a', 4],
['d', 1],
['b', 3],
]);
let elementsArray = [...myMap];
console.log(elementsArray);
let sortedAscArray = [...myMap].sort();
console.log(sortedAscArray);
Output:
[ [ 'c', 2 ], [ 'a', 4 ], [ 'd', 1 ], [ 'b', 3 ] ]
[ [ 'a', 4 ], [ 'b', 3 ], [ 'c', 2 ], [ 'd', 1 ] ]
내림차순으로 정렬하거나 value를 기준으로 정렬하는 방법은 JavaScript - Map 정렬 (key 또는 value로 정렬)를 참고하시면 됩니다.
3. Set 정렬
Set는 순서를 보장하지 않는 자료구조이기 때문에, 정렬하여 저장할 수 없습니다.
그렇기 때문에 Set를 Array로 변환하고, Array를 정렬해야 합니다. 내림차순으로 정렬하는 방법은 배열 정렬에서 소개한 방법과 동일합니다.
const set1 = new Set(['d', 'c', 'b', 'a']);
const sorted = Array.from(set1).sort();
console.log(sorted);
Output:
[ 'a', 'b', 'c', 'd' ]
Related Posts
- Javascript - 현재 날짜/시간을 항상 한국 기준으로 가져오기
- Javascript - 문자열 사이에 문자 넣기
- Javascript - 버튼 활성화/비활성화 시키는 방법
- Javascript - 버튼 이름 변경하기
- Javascript - div 안의 내용 가져오기, 변경, 추가, 삭제
- Javascript - <ol>, <ul>에 <li> 동적 추가, 삭제
- Javascript - div 생성, 추가, 삭제 방법
- Javascript - 테이블 행(tr) 숨기기, 보이기
- Javascript - div에 링크 거는 방법
- Javascript - 자식 요소(element) 개수 확인
- Javascript - 요소(element) 복사, 붙여넣기
- Javascript - div에 클릭 이벤트(onclick) 설정 방법
- Javascript - 체크박스 선택/해제 시, 텍스트박스 활성화/비활성화
- Javascript - input 숫자만 입력받도록 설정
- Javascript - 자식 노드 모두 제거
- Javascript - 체크박스 선택, 해제 방법
- Javascript - input text 값 가져오기
- JavaScript - 문자열을 배열(Array)로 변환
- JavaScript - 특정 문자열의 포함 여부 확인 (includes, 정규표현식)
- JavaScript - 문자열 비교 방법, 5가지
- JavaScript - 문자열 바꾸기(replace, 정규식 치환)
- JavaScript - 배열 전체 출력 (for, forEach, for in, for of)
- JavaScript - 한번만 실행되는 함수 (once: true)
- JavaScript - 선택된 checkbox 값 가져오기
- JavaScript - element(버튼, div) 보이기 숨기기
- JavaScript - 숫자를 배열로 변경하는 방법
- JavaScript - div, 태그 안의 내용 가져오기
- JavaScript - 부모, 형제, 자식 element 찾기
- JavaScript - 클래스 이름으로 element 찾는 방법
- JavaScript Array find() 함수
- JavaScript Array splice() 함수
- JavaScript의 contains() 함수
- JavaScript sort() 함수, 예제 소개
- JavaScript - Set 생성 및 초기화
- JavaScript Set add() 함수