간단한 코드를 통해 javascript 내에서 배열을 정렬하는 방법에 대해서 알아보겠습니다.
배열을 정렬할 때에는 sort()라는 함수를 사용합니다.
1차원 배열 정렬하기
let arr = [4, 2, 6, 7, 3, 8, 1];
arr.sort(); // [1, 2, 3, 4, 6, 7, 8]
아무런 파라미터 전달 없이 sort()를 사용하면 자동으로 오름차순 정렬이 됩니다.
문자열로 한번 더 테스트해보겠습니다.
let arr2 = ["c", "p", "a", "e", "j", "z", "A"];
arr2.sort(); //['A', 'a', 'c', 'e', 'j', 'p', 'z']
문자열로 하면 A-Z → a-z 순으로 정렬되는 것을 확인할 수 있습니다.
sort()는 유니코드를 기반으로 정렬하기 때문에 소문자보다 대문자가 더 낮은 수라고 판단됩니다.
이번에는 내림차순 정렬을 테스트해보겠습니다.sort()
내에는 인자를 전달하여 정렬 방식을 설정할 수 있습니다.
내림차순은 이 인자를 통해 정렬할 것입니다.
let arr = [4, 2, 6, 7, 3, 8, 1];
arr.sort();
// 내림차순
arr.sort((a,b) => b-a);
console.log(arr); // [8,7,6,4,3,2,1]
// 오름차순
arr.sort((a,b) => a-b);
console.log(arr); // [1,2,3,4,6,7,8]
sort 함수 내에 콜백함수를 넣어 리턴 값이 양수일 두개의 파라미터 중 뒤에 파라미터가 배열의 앞쪽에 위치됩니다.
- 내림차순 정렬 : 8-1 = 7
- 오름차순 정렬 : 1-8 = -7
그렇다면 만약 배열 내에 undefined가 있다면 어떻게 정렬될지 코드를 통해 알아보겠습니다.
let arr3 = [4, 2, undefined];
// 오름차순
arr3.sort(); // [ 2, 4, undefined ]
console.log(arr3);
// 내림차순
arr3.sort((a,b) => b-a );
console.log(arr3); //[ 4, 2, undefined ]
오름차순과 내림차순 모두 동일하게 undefined가 가장 끝에 정렬되는 것을 볼 수 있습니다.
이와 같이 배열의 요소가 undefined일 경우 무조건 맨 끝으로 정렬됩니다.
그렇다면 null은 어떨까요?
let arr3 = [4, 2, undefined, null];
// 오름차순
arr3.sort(); // [ 2, 4, null, undefined ]
console.log(arr3);
// 내림차순
arr3.sort((a,b) => b-a );
console.log(arr3); // [ 4, 2, null, undefined ]
null도 가장 뒤는 맞지만 undefined 보다는 앞에 정렬되는 것을 볼 수 있습니다.
2차원 배열 정렬
그럼 위에서 1차원 배열 정렬을 활용하여 2차원 배열을 정렬하는 방법을 알아보겠습니다.
2차원 배열은 콜백함수를 작성하여 직접 어떤 값을 기준으로 정렬할 것인지 작성해주어야 합니다.
간단한 테스트 내용은 아래같습니다.
let nums = [[20,15], [14,5], [18,20], [18,13], [5,3]];
// arr[][0] 을 기준으로 오름차순
nums.sort((a,b) => a[0]-b[0]);
console.log(nums); // [ [ 5, 3 ], [ 14, 5 ], [ 18, 13 ], [ 18, 20 ], [ 20, 15 ] ]
// arr[][0] 을 기준으로 내림차순
nums.sort((a,b) => b[0]-a[0]);
console.log(nums); // [ [ 20, 15 ], [ 18, 13 ], [ 18, 20 ], [ 14, 5 ], [ 5, 3 ] ]
// arr[][1] 을 기준으로 오름차순
nums.sort((a,b) => a[1]-b[1]);
console.log(nums); // [ [ 5, 3 ], [ 14, 5 ], [ 18, 13 ], [ 20, 15 ], [ 18, 20 ] ]
// arr[][1] 을 기준으로 내림차순
nums.sort((a,b) => b[1]-a[1]);
console.log(nums); // [ [ 18, 20 ], [ 20, 15 ], [ 18, 13 ], [ 14, 5 ], [ 5, 3 ] ]
'FrontEnd > Javascript' 카테고리의 다른 글
Redux 초기 세팅 에러 발생 (0) | 2025.01.21 |
---|---|
[js] 배열을 생성하는 법 (0) | 2024.12.02 |
[JS] Enum을 사용해보자. (0) | 2024.10.30 |
[JS] 모듈 / CommonJS와 ES Module은 무엇인가? (1) | 2024.10.22 |
[JS] node.js 콘솔에서 입력을 받아보자 - readline (0) | 2024.10.17 |