[Javascript] 배열과 객체 정렬하기

 

개발을 하다 보면 데이터 정렬은 피할 수 없는 일상이 됩니다. 프로젝트나 코딩 테스트를 막론하고 배열이나 객체를 정리하는 작업은 심심찮게 마주치게 되죠. 오늘은 이런 상황에서 유용하게 써먹을 수 있는 다양한 정렬 기법들을 함께 알아보려고 합니다.

 

배열 정렬하기

1. 기본 정렬 (sort 메서드)

배열의 sort() 메서드는 가장 기본적인 정렬 방법으로, 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다.

const fruits = ['banana', 'apple', 'orange', 'grape'];
fruits.sort();
console.log(fruits); // ['apple', 'banana', 'grape', 'orange']

⚠️  sort() 메서드는 기본적으로(비교 함수를 제공하지 않을 경우) 요소를 문자열로 변환하여 정렬합니다.

⚠️  정렬된 복사본을 반환하는 것이 아니라, 원 배열이 정렬됩니다.

 

2. 숫자 배열 정렬

숫자 배열을 정렬할 때는 비교 함수(compareFunction)를 사용해야 합니다.

const numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
numbers.sort((a, b) => a - b); // 오름차순
console.log(numbers); // [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]

numbers.sort((a, b) => b - a); // 내림차순
console.log(numbers); // [9, 6, 5, 5, 5, 4, 3, 3, 2, 1, 1]

 

3. 2차원 배열 정렬하기

let numMatrix = [
  [3, 2, 1],
  [1, 1, 5],
  [2, 3, 4],
  [2, 1, 3]
];

// 첫 번째 요소를 기준으로 오름차순 정렬하고,
// 같으면 두 번째 요소로 오름차순 정렬
numMatrix.sort((a, b) => {
  if (a[0] !== b[0]) {
    return a[0] - b[0];
  }
  return a[1] - b[1];
});

console.log(numMatrix);
// [
//   [1, 1, 5],
//	 [2, 1, 3],
//   [2, 3, 4],
//   [3, 2, 1]
// ]

 

4. 정렬된 배열을 인덱스로 받기

// 문자열
const strings = ['b', 'c', 'd', 'a']
const sorted = Array.from(strings.keys())
  .sort((a, b) => strings[a].localeCompare(strings[b]))
console.log(sorted) // [3, 0, 1, 2]

// 숫자
const numbers = [3, 1, 2, 4]
let sorted = Array.from(numbers.keys())
  .sort((a, b) => numbers[b] - numbers[a]);
console.log(sorted) // [3, 0, 2, 1]

 

객체 정렬하기

1. 키로 정렬하기

const obj = { b: 2, a: 1, c: 3 };
const sortedKeys = Object.keys(obj).sort();
const sortedObj = {};
sortedKeys.forEach(key => {
  sortedObj[key] = obj[key];
});
console.log(sortedObj); // { a: 1, b: 2, c: 3 }

 

2. 값으로 정렬하기

const obj = { b: 2, a: 1, c: 3 };
const sortedEntries = Object.entries(obj).sort((a, b) => a[1] - b[1]);
const sortedObj = Object.fromEntries(sortedEntries);
console.log(sortedObj); // { a: 1, b: 2, c: 3 }

 

활용 예시

1. 여러 기준으로 정렬하기

const students = [
  { name: 'Alice', grade: 'A', age: 22 },
  { name: 'Bob', grade: 'B', age: 20 },
  { name: 'Charlie', grade: 'A', age: 21 }
];

students.sort((a, b) => {
  if (a.grade !== b.grade) {
    return a.grade.localeCompare(b.grade);
  }
  return a.age - b.age;
});

console.log(students);
// [
//   { name: 'Alice', grade: 'A', age: 22 },
//   { name: 'Charlie', grade: 'A', age: 21 },
//   { name: 'Bob', grade: 'B', age: 20 }
// ]

 

2. 대소문자 구분 없이 정렬하기

const names = ['alice', 'Bob', 'charlie', 'David'];
names.sort((a, b) => a.localeCompare(b, undefined, { sensitivity: 'base' }));
console.log(names); // ['alice', 'Bob', 'charlie', 'David']

 

3. 사용자 정의 순서로 정렬하기

const fruits = ['banana', 'apple', 'orange', 'grape'];
const order = ['orange', 'banana', 'apple', 'grape'];
fruits.sort((a, b) => order.indexOf(a) - order.indexOf(b));
console.log(fruits); // ['orange', 'banana', 'apple', 'grape']

 

4. 안정(stable)한 정렬하기

자바스크립트의 sort() 메서드는 ES2019부터 안정 정렬을 보장합니다. 이전 버전에서 안정 정렬을 구현하려면 다음과 같은 방법을 사용할 수 있습니다:

let data = [
  { id: 1, value: "b" },
  { id: 2, value: "a" },
  { id: 3, value: "b" },
  { id: 4, value: "a" }
];

data
  .map((item, index) => ({ item, index }))
  .sort((a, b) => {
    // value로 먼저 정렬하고, 같으면 원래 인덱스로 정렬
    return a.item.value.localeCompare(b.item.value) || a.index - b.index;
  })
  .map(({ item }) => item);

console.log(data);
// [
//   { id: 2, value: "a" },
//   { id: 4, value: "a" },
//   { id: 1, value: "b" },
//   { id: 3, value: "b" }
// ]

 

---

Reference

Javascript: Sort array and return an array of indices

Sorting object property by values