자바스크립트에서 문자열, 숫자, 객체 배열을 정렬하는 방법을 소개합니다.
1. 문자열 배열 정렬
문자열 배열의 경우 다음과 같이 sort()
호출 시, 알파벳 순서로 정렬됩니다. (오름차순)
const arr = ['kiwi', 'apple', 'melon', 'grape', 'banana'];
arr.sort();
console.log(arr);
Output:
[ 'apple', 'banana', 'grape', 'kiwi', 'melon' ]
1.1 내림차순 정렬
내림차순으로 정렬하려면, sort()
에서 문자열을 내림차순으로 정렬하는 비교 함수를 만들고 인자로 전달해야 합니다.
비교하는 두개 문자열의 크기가 같으면 0, 크면 양수, 작으면 음수를 리턴하도록 구현하면 내림차순으로 정렬이 됩니다.
const arr = ['kiwi', 'apple', 'melon', 'grape', 'banana'];
arr.sort(function (a, b) {
if (a > b) return -1;
else if (b > a) return 1;
else return 0;
});
console.log(arr);
Output:
[ 'melon', 'kiwi', 'grape', 'banana', 'apple' ]
함수를 구현하기 귀찮으면 sort()
로 오름차순으로 정렬한 뒤에, reverse()
를 호출하여 배열의 순서를 변경하여 내림차순과 동일한 결과를 만들도록 구현할 수 있습니다.
const arr = ['kiwi', 'apple', 'melon', 'grape', 'banana'];
arr.sort();
arr.reverse();
console.log(arr);
Output:
[ 'melon', 'kiwi', 'grape', 'banana', 'apple' ]
2. 숫자 배열 정렬
2.1 잘못된 방법
숫자 배열에 sort()
수행 시, 숫자를 문자열로 변환하여 정렬을 합니다. 문자열 11
은 2
보다 작기 때문에 아래와 같이 숫자 크기대로 정렬되지 않습니다. 따라서 이 방법으로 정렬하면 안됩니다.
const arr = [22, 11, 2, 9, 1, 5];
arr.sort();
console.log(arr);
Output:
[ 1, 11, 2, 22, 5, 9 ]
2.2 올바른 방법 (오름차순)
sort()
에 두개의 숫자를 비교하는 함수를 구현하여 인자로 전달해야 합니다. 아래와 같이 a - b
의 값을 리턴하도록 구현하면 오름차순이 됩니다. a가 크면 양수, b가 크면 음수, 같으면 0이 리턴되기 때문에 이렇게 간단히 구현할 수 있습니다.
const arr = [22, 11, 2, 9, 1, 5];
arr.sort(function (a, b) {
return a - b;
});
console.log(arr);
Output:
[ 1, 2, 5, 9, 11, 22 ]
2.3 올바른 방법 (내림차순)
내림차순은 비교 함수에서 b - a
의 값을 리턴하면 됩니다. 아래와 같이 간단히 구현할 수 있습니다.
const arr = [22, 11, 2, 9, 1, 5];
arr.sort((a, b) => b - a);
console.log(arr);
Output:
[ 22, 11, 9, 5, 2, 1 ]
3. 객체 배열 비교
객체 배열 정렬도, 아래와 같이 비교 함수를 구현할 수 있습니다. 객체에서 비교할 요소를 선택하고 크기를 비교하면 됩니다.
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' }
]
위의 예제는 오름차순으로 정렬됩니다. 내림차순은 b.id - a.id
로 계산하면 되겠죠?
Related Posts
- JavaScript - 빈 문자열 확인, 2가지 방법
- JavaScript - 날짜/시간 비교, 3가지 방법
- JavaScript - 랜덤 문자열 생성, 2가지 방법
- JavaScript - 마지막 문자 제거, 4가지 방법
- JavaScript - 문자열 공백 제거, 3가지 방법
- JavaScript - 배열을 문자열로 변환, 3가지 방법
- JavaScript - 여러 줄 문자열, 3가지 방법
- JavaScript - 객체를 문자열로 변환, 2가지 방법
- JavaScript - 문자열의 첫번째 문자 가져오기, 4가지 방법
- JavaScript - 문자열의 마지막 문자 가져오기, 4가지 방법
- JavaScript - 배열 맨 앞에 요소 추가/제거, 2가지 방법
- JavaScript - 2차원 배열을 1차원 배열로 변환, 2가지 방법
- JavaScript - 현재 시간 Timestamp 가져오기
- JavaScript - 대소문자 변환 (LowerCase, UpperCase)
- JavaScript - 문자열 바꾸기(replace, 정규식 치환)
- JavaScript - setTimeout()으로 함수 실행 지연
- JavaScript - 'try...catch'로 예외 처리 방법
- JavaScript - 문자열을 날짜(Date)로 변환하는 방법
- JavaScript - 배열에서 중복 제거, 4가지 방법
- JavaScript - Float을 Integer로 변환, 3가지 방법
- JavaScript - 문자열 비교 방법, 5가지
- JavaScript - 문자열에서 문자 또는 단어 추출, 4가지 방법
- JavaScript - 문자열 뒤집기, 거꾸로 출력
- JavaScript - 배열의 마지막 요소 가져오기
- JavaScript - 배열에서 최대, 최소 값 찾기
- JavaScript - 소수점 자리수 올림, 내림, 반올림, 제거 방법
- JavaScript - 숫자 3자리마다 콤마(,) 넣는 방법
- JavaScript - 타입 확인 방법 (typeof)
- JavaScript - 빈 배열인지 확인 (Empty Array)
- JavaScript - 배열 길이 확인, 길이 변경 (Array.length)
- JavaScript - 문자열에서 숫자만 추출
- JavaScript - 특정 문자열의 포함 여부 확인 (includes, 정규표현식)
- JavaScript - 배열 합치기 (concat, spread, push)
- JavaScript - 문자열에서 특정 문자 위치 찾기 (indexOf, lastIndexOf)
- JavaScript - 현재 날짜, 시간 가져오기
- JavaScript - 배열 정렬 방법 (오름차순, 내림차순)