JavaScrpt/기초튼튼

JavaScript Array - 배열 정렬(Array.sort) - 문자열 정렬, 숫자 정렬, 객체 정렬, Ascending(ASC), Descending(DESC)

carrotweb 2022. 4. 10. 20:35
728x90
반응형

스크립트에서 배열의 정렬은 Array 객체의 sort() 메서드를 사용합니다.

Array Sort(배열 정렬)

Array 객체의 sort() 메서드 구문입니다. compareFunction은 옵션입니다.

array.sort([compareFunction]);

 

Array 객체의 sort() 메서드는 기본적으로 배열 안의 요소들을 오름차순(Ascending Order, ASC)으로 정렬합니다.

const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
months.sort();

console.log(months);
--> ['April', 'August', 'December', 'February', 'January', 'July', 'June', 'March', 'May', 'November', 'October', 'September']

 

배열 안의 요소가 숫자라도 숫자형 오름차순이 아니라 문자형 오름차순으로 정렬됩니다. 1이 우선입니다.

const number = [1, 5, 10, 15, 20, 25, 100];
number.sort();

console.log(number);
--> [1, 10, 100, 15, 20, 25, 5]

 

기본적으로 배열은 문자형 오름차순(Ascending Order, ASC)으로 정렬됩니다.

그래서 숫자형으로 정렬하기 위해서 sort() 메서드의 옵션인 compareFunction을 사용해야 합니다.

compareFunction는 두 개의 비교 객체(comp1, comp2)를 비교하여 두 객체의 크고 작음을 리턴하여 정렬시킵니다.

compareFunction(comp1, comp2)에서

리턴 값이 -1(0보다 작은 수)이면 comp1을 comp2보다 낮은 요소로 정렬됩니다.

리턴 값이 0이면 동일하게 정렬됩니다.

리턴 값이 1(0보다 큰 수)이면 comp1을 comp2보다 큰 요소로 정렬됩니다.

 

숫자 배열 정렬

const number = [1, 5, 10, 15, 20, 25, 100];

// 오름차순 정렬(Ascending Order, ASC)
number.sort(function(comp1, comp2) {
	return comp1 - comp2; 
});

console.log(number);
--> [1, 5, 10, 15, 20, 25, 100]

// 내림차순 정렬(Descending Order, DESC)
number.sort(function(comp1, comp2) {
	return comp2 - comp1; 
});

console.log(number);
--> [100, 25, 20, 15, 10, 5, 1]

 

 

문자열 배열 정렬

문자열 배열을 내림차순으로 정렬하기 위해서도 compareFunction을 사용해야 합니다.

const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

// 오름차순 정렬(Ascending Order, ASC)
months.sort(function(comp1, comp2) {
	// 대/소문자 구분 없이
	var comp1UC = comp1.toUpperCase();
	var comp2UC = comp2.toUpperCase();
	if (comp1UC < comp2UC) {
		return -1;
	} else if (comp1UC > comp2UC) {
		return 1;
	}
	return 0;
});

console.log(months);
--> ['April', 'August', 'December', 'February', 'January', 'July', 'June', 'March', 'May', 'November', 'October', 'September']

// 내림차순 정렬(Descending Order, DESC)
months.sort(function(comp1, comp2) {
	// 대/소문자 구분 없이
	var comp1UC = comp1.toUpperCase();
	var comp2UC = comp2.toUpperCase();
	if (comp1UC < comp2UC) {
		return 1;
	} else if (comp1UC > comp2UC) {
		return -1;
	}
	return 0;
});

console.log(months);
--> ['September', 'October', 'November', 'May', 'March', 'June', 'July', 'January', 'February', 'December', 'August', 'April']

문자열 배열의 요소를 대/소문자로 정렬하시려면 compareFunction 함수에서 toUpperCase() 메서드를 사용하지 않으시면 됩니다.

 

반응형

객체 배열 정렬

객체 배열을 오름차순이나 내림차순으로 정렬하기 위해서도 compareFunction을 사용해야 합니다.

const writerList = [
{no:1, writer:"testid1"},
{no:2, writer:"testid3"},
{no:3, writer:"testid2"}
];

// 이름(writer)을 기준으로 오름차순 정렬(Ascending Order, ASC)
writerList.sort(function(comp1, comp2) {
	// 대/소문자 구분 없이
	var comp1UC = comp1.writer.toUpperCase();
	var comp2UC = comp2.writer.toUpperCase();
	if (comp1UC < comp2UC) {
		return -1;
	} else if (comp1UC > comp2UC) {
		return 1;
	}
	return 0;
});

console.log(writerList);
--> [
  { no: 1, writer: 'testid1' },
  { no: 3, writer: 'testid2' },
  { no: 2, writer: 'testid3' }
]

// 이름(writer)을 기준으로 내림차순 정렬(Descending Order, DESC)
writerList.sort(function(comp1, comp2) {
	// 대/소문자 구분 없이
	var comp1UC = comp1.writer.toUpperCase();
	var comp2UC = comp2.writer.toUpperCase();
	if (comp1UC < comp2UC) {
		return 1;
	} else if (comp1UC > comp2UC) {
		return -1;
	}
	return 0;
});

console.log(writerList);
--> [
  { no: 2, writer: 'testid3' },
  { no: 3, writer: 'testid2' },
  { no: 1, writer: 'testid1' }
]

 

 

객체 배열 멀티 정렬

나이를 기준으로 내림차순으로 정렬하고 나이가 같으면 작성자 명을 기준으로 내림차순으로 정렬합니다.

const writerList = [
{no:1, writer:"testid1", age:30},
{no:2, writer:"testid3", age:31},
{no:3, writer:"testid2", age:30}
];

writerList.sort(function(comp1, comp2) {
	var comp1UC = comp1.age;
	var comp2UC = comp2.age;
	if (comp1UC < comp2UC) {
		return 1;
	} else if (comp1UC > comp2UC) {
		return -1;
	} else {
		comp1UC = comp1.writer.toUpperCase();
		comp2UC = comp2.writer.toUpperCase();
		if (comp1UC < comp2UC) {
			return 1;
		} else if (comp1UC > comp2UC) {
			return -1;
		}
	}
	return 0;
});

console.log(writerList);
--> [
  { no: 2, writer: 'testid3', age: 31 },
  { no: 3, writer: 'testid2', age: 30 },
  { no: 1, writer: 'testid1', age: 30 }
]

 

728x90
반응형