Colin's Blog
자바스크립트 배열의 요소를 특정 기준으로 순서대로 정렬하기

자바스크립트에서 배열의 요소를 특정 기준으로 순서대로 정렬하는 작업은 매우 유용합니다. 이를 통해 데이터를 원하는 방식으로 정렬하고, 원하는 순서로 요소를 조작할 수 있습니다. 이번 글에서는 자바스크립트에서 배열의 요소를 특정 기준으로 정렬하는 다양한 방법을 알아보겠습니다.

1. Array.prototype.sort()

Array.prototype.sort() 메서드는 배열의 요소를 정렬하는 기본적인 방법입니다. 이 메서드는 기본적으로 배열의 요소를 문자열 형태로 변환하여 유니코드 코드 포인트 순서로 정렬합니다. 하지만 숫자 정렬은 예상대로 동작하지 않을 수 있으므로 주의해야 합니다. 따라서 숫자 정렬을 원하는 경우에는 적절한 비교 함수를 제공해야 합니다.

const numbers = [5, 10, 2, 15, 1];

// 기본적인 오름차순 정렬
numbers.sort();
console.log(numbers); // [1, 10, 15, 2, 5]

// 숫자 정렬을 위해 비교 함수 제공
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 2, 5, 10, 15]

2. 비교 함수를 활용한 정렬

Array.prototype.sort() 메서드는 정렬을 위해 비교 함수를 인자로 받을 수 있습니다. 비교 함수는 두 개의 인자를 받아서 비교하고, 정렬 순서를 결정하는데 사용됩니다. 비교 함수는 다음과 같은 규칙을 따라야 합니다.

예를 들어, 객체 배열을 특정 프로퍼티에 따라 정렬하고자 할 때 비교 함수를 활용할 수 있습니다.

const people = [
  { name: 'John', age: 20 },
  { name: 'Jake', age: 30 },
  { name: 'Lisa', age: 25 }
];

// 나이를 기준으로 오름차순 정렬
people.sort((a, b) => a.age - b.age);
console.log(people);
// [
//   { name: 'John', age: 20 },
//   { name: 'Lisa', age: 25 },
//   { name: 'Jake', age: 30 }
// ]

// 나이를 기준으로 내림차순 정렬
people.sort((a, b) => b.age - a.age);
console.log(people);
// [
//   { name: 'Jake', age: 30 },
//   { name: 'Lisa', age: 25 },
//   { name: 'John', age: 20 }
// ]

3. Lodash 등의 라이브러리 활용

Lodash와 같은 유용한 자바스크립트 라이브러리를 활용하면 더 다양하고 간편한 배열 정렬을 할 수 있습니다. 예를 들면 _.orderBy() 함수를 사용하여 여러 개의 기준으로 배열을 정렬할 수 있습니다.

const users = [
  { name: 'John', age: 20 },
  { name: 'Jake', age: 30 },
  { name: 'Lisa', age: 25 }
];

const sortedUsers = _.orderBy(users, ['age', 'name'], ['asc', 'desc']);
console.log(sortedUsers);
// [
//   { name: 'John', age: 20 },
//   { name: 'Lisa', age: 25 },
//   { name: 'Jake', age: 30 }
// ]

위의 예시에서는 age를 기준으로 오름차순으로 정렬하며, 동일한 age를 가진 경우 name을 기준으로 내림차순으로 정렬하고 있습니다.

마치며

자바스크립트에서 배열의 요소를 특정 기준으로 정렬하는 방법에 대해 알아보았습니다. Array.prototype.sort() 메서드를 사용하거나 비교 함수를 활용하면 간단한 정렬 작업을 수행할 수 있습니다. Lodash와 같은 라이브러리를 활용하면 더 다양하고 복잡한 정렬도 쉽게 구현할 수 있습니다. 적절한 정렬 방법을 선택하여 데이터를 원하는 순서로 조작하는데 활용해보세요.

© 2018 Colin. All rights reserved.