JavaScript - 배열 정렬 방법 (오름차순, 내림차순)

By JS | Last updated: April 02, 2022

Javascriptexamples

자바스크립트에서 문자열, 숫자, 객체 배열을 정렬하는 방법을 소개합니다.

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로 계산하면 되겠죠?

javascript
Loading script...

Related Posts

codechachaCopyright ©2019 codechacha