스크립트에서 배열의 정렬은 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 }
]
'JavaScrpt > 기초튼튼' 카테고리의 다른 글
Javascript == vs === (0) | 2022.07.20 |
---|---|
Javascript this vs self (0) | 2022.07.15 |
jQuery $(selector)[0]이란 (0) | 2022.07.15 |
JavaScript Array - 배열 객체 생성 (0) | 2022.04.10 |
JavaScript Object 객체 생성 - Object, typeof, instanceof, prototype (0) | 2022.04.10 |