[JavaScript]객체 배열 정렬하는 방법

JavaScript에서 배열을 정렬하는 경우는 종종 있으며, 정렬해야 하는 기준은 객체의 특정 속성일 수 있습니다. 이번 포스팅에서는 객체를 요소로 가지는 배열을 정렬하는 방법에 대해 소개합니다.

 

다음은 객체를 요소로 가지며 정렬되지 않은 배열입니다.

let pens = [
  {color: 'red',    price: 5000, brand: 'monami'},
  {color: 'blue',   price: 3000, brand: 'paker'},
  {color: 'green',  price: 4000},
  {color: 'black',  price: 1000, brand: 'abc'},
  {color: 'yellow', price: 2000},
]

배열 pens는 객체를 요소로 가지며, 모든 객체는 "color"와 "price" 속성이 존재합니다. "brand" 속성은 특정 객체에만 존재합니다.

 

이 배열에서 "color" 속성을 기준으로 오름차순으로 정렬하고 싶은 경우 배열의 sort() 함수를 사용합니다.

let pens = [
  {color: 'red',    price: 5000, brand: 'monami'},
  {color: 'blue',   price: 3000, brand: 'paker'},
  {color: 'green',  price: 4000},
  {color: 'black',  price: 1000, brand: 'abc'},
  {color: 'yellow', price: 2000},
]

let pensByColors = pens.sort((a,b) => {
  if(a.color > b.color) return 1;
  if(a.color < b.color) return -1;
  return 0;
});

console.log(pensByColors);

실행 결과

여기서 sort() 함수는 기존 배열인 pens를 정렬하지 않고 정렬된 새로운 배열을 반환합니다. sort() 함수 내부의 변수 a와 b는 비교할 첫 번째 요소와 두 번째 요소를 나타냅니다. a.color가 b.color보다 더 큰 경우 1을 반환하며, a.color가 b.color보다 작으면 -1을 반환합니다. 만약, a.color와 b.color가 동일하면 0을 반환합니다.

 

sort() 함수 내부의 정렬 순서를 정의하는 함수는 반환 값에 따라 정렬됩니다.

if(a.color > b.color) return 1;

• a.color이 b.color보다 크고 0보다 큰 값을 반환하므로 a가 b 뒤에 정렬됩니다.

if(a.color < b.color) return -1;

• a.color이 b.color보다 작고 0보다 작은 값을 반환하므로 a가 b 앞에 정렬됩니다.

return 0;

• 반환 값이 0이면 정렬되지 않습니다.

다음은 숫자 타입의 "price" 속성을 기준으로 배열을 정렬하는 경우입니다. "color" 속성을 기준으로 정렬한 코드와 동작 방식은 동일하지만, sort() 함수 내부의 정렬 순서를 정의하는 함수를 보다 간결하게 작성할 수 있습니다.

let pens = [
  {color: 'red',    price: 5000, brand: 'monami'},
  {color: 'blue',   price: 3000, brand: 'paker'},
  {color: 'green',  price: 4000},
  {color: 'black',  price: 1000, brand: 'abc'},
  {color: 'yellow', price: 2000},
]

let pensByColors = pens.sort((a,b) => (a.price - b.price));

console.log(pensByColors);

실행 결과

오름차순이 아닌 내림차순으로 정렬하고 싶은 경우 a.price - b.price를 b.price - a.price로 변경합니다.

let pensByColors = pens.sort((a,b) => (b.price - a.price));

 

다음은 "brand" 속성을 기준으로 정렬하는 경우입니다.

let pens = [
  {color: 'red',    price: 5000, brand: 'monami'},
  {color: 'blue',   price: 3000, brand: 'paker'},
  {color: 'green',  price: 4000},
  {color: 'black',  price: 1000, brand: 'abc'},
  {color: 'yellow', price: 2000},
]

let pensByColors = pens.sort((a,b) => {
  if(a.brand > b.brand) return 1;
  if(a.brand < b.brand) return -1;
  return 0;
});

console.log(pensByColors);

실행 결과

"brand" 속성을 기준으로 정렬하면 배열이 정렬되지 않습니다. 2, 4번째 요소에서 "brand" 속성을 접근하면, undefined이므로 sort() 함수 내부에서 if문을 만족하지 않고 항상 0을 반환합니다. 그렇기 때문에 정렬되지 않습니다.