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
- ESLint warning, Expected '===' and instead saw '==' eqeqeq
- 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 - div, 태그 안의 내용 가져오기
- JavaScript - element(버튼, div) 보이기 숨기기
- JavaScript - 숫자를 배열로 변경하는 방법
- JavaScript - 부모, 형제, 자식 element 찾기
- JavaScript - 클래스 이름으로 element 찾는 방법
- JavaScript Array find() 함수
- JavaScript Array splice() 함수
- JavaScript의 contains() 함수
- JavaScript sort() 함수, 예제 소개
- JavaScript - Set 생성 및 초기화