[JavaScript] 속성(property) 값(value)으로 객체 배열을 정렬(sort)하는 방법

JavaScript에서 속성(property) 값을 기준으로 객체 배열을 정렬하는 것은 실제로 매우 쉽습니다. 이 포스트에서 우리는 자바스크립트에서 속성(property) 값을 기준으로 객체 배열을 정렬하는 방법에 대해 다룰 것입니다.

 

JavaScript에서 속성(property) 값으로 객체 배열을 정렬하는 것은 Array.prototype.sort 메서드 덕분에 실제로 매우 간단합니다.

 

Array.prototype.sort 배열에 있는 각 항목의 순서를 결정하기 위해 실행되는 콜백 함수를 허용하며 이것이 JavaScript에서 속성(property) 값으로 개체 배열을 정렬하는 방법을 확인하는 데 사용할 것입니다.

 

정렬 방법은 콜백을 제공하지 않고 배열에서 호출할 수 있습니다. 이는 알파벳순으로 정렬할 문자열 배열이나 숫자(일종의) 순서로 정렬할 숫자와 같은 간단한 배열에서 잘 작동합니다.

 

내가 숫자순으로 정렬하기 위해 "종류"라고 말하는 이유는 가장 작은 것부터 큰 것, 큰 것에서 작은 것 순이 아니라 숫자의 각 문자별로 정렬되기 때문입니다.

 

다음은 이에 대한 예입니다.

[1, 30, 4, 22, 21, 10000].sort() // [1, 10000, 21, 22, 30, 4]

 

Array.prototype.sort를 사용할 때 항상 고유한 비교 콜백 함수를 제공하여 예상치 못한 결과를 얻지 않도록 하는 것이 가장 좋습니다.

 

sort 메소드에 전달한 콜백은 두 개의 배열 항목( arrayItemA, 그리고 arrayItemB), 0, 0보다 크거나 0보다 작은 정수를 반환해야 합니다.

 

여기서는 간단하게 -1,  0그리고 1. 사용할 것입니다. 

const sortCallback = (arrayItemA, arrayItemB) => { ... }

-1(또는 0보다 작은 정수) 이면, arrayItemA는 arrayItemB보다 먼저 정렬되도록 정렬됩니다.

0이면, arrayItemA 및 arrayItemB는 동일한 값이므로 정렬되지 않습니다.

1(또는 0보다 큰 정수) 이면, arrayItemA는 arrayItemB 다음에 오도록 정렬됩니다.

 

JavaScript에서 속성(property) 값으로 객체 배열을 정렬하는 방법

JavaScript에서 속성(property) 값으로 객체 배열을 정렬하기 위해 Array.prototype.sort를 사용하려면 정렬 콜백에서 속성(property) 값을 비교한 다음 반환하기만 하면 됩니다.

 

JavaScript에서 속성(property) 값을 기준으로 객체 배열을 정렬하는 방법의 예를 살펴보겠습니다.

const arrayOfObjects = [
{ apples: 5 },
{ apples: 2 },
{ apples: 30 },
{ apples: 1 },
]

const objectComparisonCallback = (arrayItemA, arrayItemB) => {
	if (arrayItemA.apples < arrayItemB.apples) {
		return -1
	}

	if (arrayItemA.apples > arrayItemB.apples) {
		return 1
	}

	return 0
}

// [{ apples: 1 }, { apples: 2 }, { apples: 5 }, { apples: 30 }]
arrayOfObjects.sort(objectComparisonCallback)

 

이 예에서는 apples 속성(property)을 가진 객체 배열을 사용하고 있습니다. 각 apples 속성(property)을 사용하여 정렬하며,보시다시피 정렬 콜백 함수를 사용하여 반환합니다.

 

arrayItemB에 있는 사과의 양이 arrayItemA에 있는 사과의 양보다 크면 -1 반환,

arrayItemA에 있는 사과의 양이 arrayItemB 사과양보다 크면 1 반환합니다.

마지막으로 이러한 조건 중 어느 것도 아니면 동일하다고 판단하여 0을 반환합니다.

 

그런 다음 배열의 값을 기준으로 오름차순으로 배열이 정렬됩니다. 정렬합니다. 

객체의 여러 속성(property)을 기준으로 정렬해야 하는 경우에도 동일한 원칙이 배열의 모든 유형의 값에 적용됩니다.

비교 콜백 함수가 예상대로 작동하는지 항상 확인하기만 하면 됩니다.

따라서 키 값 쌍, 날짜, 숫자 또는 문자열이 있는지 여부에 관계없이 항상 이 방법을 사용하여 객체 배열을 정렬하고 정렬할 수 있습니다.

 

 

JavaScript에서 여러 속성(property)으로 객체 배열을 정렬하는 방법

여러 속성(property)을 기준으로 개체 배열을 정렬하는 것은 속성(property) 계층을 순서대로 결정해야 한다는 점을 제외하고 단일 속성(property) 값으로 배열을 정렬하는 것과 거의 같습니다.

이전 예를 사용하여 다시 한 번 다음을 포함하는 객체 배열을 만들어 보겠습니다. apples값 추가로 price속성(property)을 지정하고 이 배열을 먼저 가격별(price)로 정렬한 다음 사과(apples)별로 정렬하려고 합니다.

이것이 JavaScript에서 어떻게 보이는지 살펴보겠습니다.

const arrayOfObjects = [
{ price: 5, apples: 4 },
{ price: 3, apples: 2 },
{ price: 5, apples: 3 },
{ price: 3, apples: 2 },
{ price: 3, apples: 3 },
]

const comparePrices = (arrayItemA, arrayItemB) => {
	if (arrayItemA.price < arrayItemB.price) {
		return -1
	}

	if (arrayItemA.price > arrayItemB.price) {
		return 1
	}

	return 0
}

const compareApples = (arrayItemA, arrayItemB) => {
	if (arrayItemA.apples < arrayItemB.apples) {
		return -1
	}

	if (arrayItemA.apples > arrayItemB.apples) {
		return 1
	}

	return 0
}

const objectComparisonCallback = (arrayItemA, arrayItemB) => {
	// first sort by price

	const priceOutcome = comparePrices(arrayItemA, arrayItemB)
	if (priceOutcome !== 0) {
		return priceOutcome
	}

	// at this point we will be looking at two equal prices so we now need to compare apples
	return compareApples(arrayItemA, arrayItemB)
}

arrayOfObjects.sort(objectComparisonCallback)
// [
// { price: 3, apples: 2 },
// { price: 3, apples: 2 },
// { price: 3, apples: 3 },
// { price: 5, apples: 3 },
// { price: 5, apples: 4 },
// ]

 

보시다시피 이것은 이제 여러 속성(property)을 사용하여 객체 배열을 정렬하고 있습니다.

먼저 가격별로 정렬한 다음 올바른 가격 순서를 갖게 되면 각 가격 브래킷 내에서 사과를 정렬하여 배열에서 오름차순으로 정렬합니다.

여기서 다른 유일한 차이점은 비교 콜백이 모든 것을 더 쉽게 읽고 유지 관리할 수 있도록 더 작은 도우미 함수로 분할되었다는 것입니다.

 

 

 

 

 

 

 

참고: https://atomizedobjects.com/blog/javascript/how-to-sort-an-array-of-objects-by-property-value-in-javascript/