티스토리 뷰
sort
- 배열의 요소를 정렬한다
- sort의 기본 문법
- sort 사용 시 주의사항 : 배열을 다른 변수에 복사하여 정렬해도, 원본 배열 자체가 변경되어 버린다
// sort의 기본 문법
const arr = [3, 2, 1];
console.log(arr.sort());
// arr1을 arr2에 복사하여 sort()를 사용했으나 arr1, arr2 모두 정렬되었다
const arr1 = [3, 1, 10, 9, 2];
const arr2 = arr.sort();
console.log(arr1);
console.log(arr2);
- 1. 원본 배열의 변경 없이 정렬하는 방법
// 1. ...(전개구문 Spread syntax) 구조의 형태를 변경해준다
let originalArray = [3, 1, 4, 1, 5, 9];
let sortedArray = [...originalArray].sort(); // ...으로 [ ]를 없애고 정렬 후 다시 배열 형태로 만듬
console.log("Sorted Array: ", sortedArray);
console.log("Original Array: ", originalArray);
- 2. 원본 배열의 변경 없이 정렬하는 방법
// 2. slice();
let originalArray = [3, 1, 4, 1, 5, 9];
let sortedArray = originalArray.slice().sort(); // slice() 구분 기준으로 배열을 자르는 메소드, ()에 아무것도 없을 경우 전체를 복사해서 반환한다.
console.log("Sorted Array: ", sortedArray);
console.log("Original Array: ", originalArray);
sort( [ ] ) 비교함수
- array.sort(['비교함수 값 (compareFunction)']); [ ]에 정렬 순서를 정의하는 비교 함수를 전달할 수 있다.(optional)
- [비교 함수]를 생략할 경우 배열 요소들이 문자열로 변환되어 각 문자의 유니코드값(일관된 문자 세트)에 따라 정렬된다. (이 경우 80의 8이 9보다 앞에 있기 때문에 [1, 2, 80, 9]로 정렬된다.)
- 오름차순 정렬 (모두 같은 방법으로 함수 표기식만 다르게 작성함)
- (a - b) 1번째 index가 a / 0번째 index가 b로 배정된다.
- index 순서대로 뒤에 값과 비교했을 때, 음수면 뒤에 값이 앞으로, 양수면 그대로 둔다.
- EX) index [2, 1, 9, 80]인 경우 오름차순 정렬 시 [1번 - 0번 > 2번 - 0번 > 3번 - 0번 순차적으로 계산 후 정렬된다]
- (1-2=-1), (9-1=8 / 2가 아닌 1인 이유는 앞에서 자리를 바꿨기 때문), (80-1=79).. 동일하게 2번 - 1번 인덱스 길이만큼 계산을 반복하며 정렬한다.
const arr = [2, 1, 9, 80];
// 1. 오름차순 정렬
arr.sort(function (a, b) {
return a - b
});
// 2. 오름차순 정렬, 화살표 함수
arr.sort((a, b) => {
return a - b
});
// 3. // 오름차순 정렬, 화살표 함수 return문이 한 줄일 경우 몸체{} 생략
arr.sort((a, b) => a - b);
console.log(arr);
- 내림차순 정렬 (모두 같은 방법으로 함수 표기식만 다르게 작성함)
- (b - a) 1번째 index가 a / 0번째 index가 b로 배정된다.
- index 순서대로 뒤에 값과 비교했을 때, 음수면 뒤에 값이 앞으로, 양수면 그대로 둔다.
- EX) index [2, 1, 9, 80]인 경우 내림차순 정렬 시 [0번 - 1번 > 0번 - 2번 > 0번 - 3번 순차적으로 계산 후 정렬된다]
- (2-1=1), (2-9=-7), (9-80=-71).. 동일하게 1번 - 2번 인덱스 길이만큼 계산을 반복하며 정렬한다.
const arr = [2, 1, 9, 80];
// 1. 내림차순 정렬
arr.sort(function (a, b) {
return b - a
});
// 2. 내림차순 정렬, 화살표 함수
arr.sort((a, b) => {
return b - a
});
// 3. 내림차순 정렬, 화살표 함수 return문이 한 줄일 경우 몸체{} 생략
arr.sort((a, b) => b - a);
console.log(arr);
오름, 내림 차순 정렬 console로 확인
//오름차순 정렬
const arr = [2, 1, 9, 80];
arr.sort(function (a, b) {
console.log("----- 시작 -----");
console.log('a', a);
console.log('b', b);
console.log('a - b', a - b);
console.log(a - b >= 0 ? "안바꿔요" : "바꿔요");
console.log("----- 종료 -----");
console.log();
return a - b
});
'TIL > Javascript' 카테고리의 다른 글
[자바스크립트 JavaScript] 영화 카드 만들기 (TMDB 오픈 API) (0) | 2024.01.09 |
---|---|
[데이터 타입의 종류 및 메모리] (0) | 2024.01.08 |
[자바스크립트 JavaScript] 맵(Map) , 셋 (Set) (0) | 2024.01.04 |
[자바스크립트 JavaScript] 구조분해할당, 단축속성명, 전개구문 (0) | 2024.01.03 |
[자바스크립트 JavaScript] 조건부 실행, 객체와 배열 메서드 (0) | 2024.01.02 |