javascript array에서 object의 property 값으로 비교하여 정렬하기

javascript logo

안녕하세요, Yo플레입니다.

오늘은 javascriptd array에서 object의 property 값으로 비교하여 정렬하는 기능을 알아보겠습니다.

예제확인

// open console;
// sort object
const objectArray = [
  {
    color: "white",
    size: "XXL"
  },
  {
    color: "red",
    size: "XL"
  },
  {
    color: "black",
    size: "M"
  }
];
console.log(objectArray);

const sortedArray = [...objectArray]; //deep copy
sortedArray.sort((a, b) => (a.color > b.color ? 1 : -1)); //sort by color of object
console.log(sortedArray);

위 예제는 제시된 array를 color를 기준으로 정렬하는 기능을 표현해놓은 것 입니다.

object의 color를 기준으로 정렬하는 기능만 다시 보겠습니다.

sortedArray.sort((a, b) => (a.color > b.color ? 1 : -1)); //sort by color of object

위 코드에서 sort 함수를 실행하면서 내부에 color를 기준으로 비교하여 1 또는 -1을 전달하는 함수가 들어있는 것을 확인 할 수 있습니다.

color가 아니라 size를 기준으로 정렬하고 싶다면 함수의 color를 size로 변경하면 됩니다.

---

array.sort()에 대해 조금 더 설명드리겠습니다.

sort함수는 기본적으로 array내의 값을 문자열로 변환하여 비교하여 정렬합니다.

따라서 가령 [1, 3, 5, 24, 41] 이라는 array가 있다면 [1, 24, 3, 41, 5]으로 정렬이 됩니다.

숫자에 맞게 정렬을 하려면 다음과 같이 비교를 해줘야 합니다.

// sort number
const numberArray = [1, 3, 5, 21, 41];
console.log(numberArray);

const sortedNumberArray = [...numberArray]; //deep copy
sortedNumberArray.sort((a, b) => (a > b ? 1 : -1)); //sort by number
console.log(sortedNumberArray);

숫자를 기준으로 정렬하는 기능을 보겠습니다.

sortedNumberArray.sort((a, b) => (a > b ? 1 : -1)); //sort by number

sort는 비교함수를 인자로 받을 수 있고, (a, b) => (a > b ? 1 : -1) 라는 함수가 sort에 인자로 사용되고 있습니다.

이 함수는 a, b 두 값을 받아서 조건이 참이면 1, 거짓이면 -1을 돌려주는 비교함수입니다.

위의 object의 color의 경우도 (a, b) => (a.color > b.color ? 1 : -1)라는 함수가 인자로 사용되고 있습니다.

이 함수 역시 a, b 두 값을 받아서 각각의 color를 비교하여 조건이 참이면 1, 거짓이면 -1을 돌려주고 있습니다.

따라서 array.sort는 비교함수로 두 값을 비교하여 결과값 1, -1 에 따라 값의 위치를 이동시켜주는 함수라고 볼 수 있습니다.

array.sort()에 대한 더 전문적인 설명은 MDN에 확인하실 수 있습니다.

참조 : flaviocopes.com/how-to-sort-array-of-objects-by-property-javascript/