[JavaScript] 자바스크립트 배열(Array) 요소 정렬하기

[JavaScript] 자바스크립트 배열(Array) 요소 정렬하기

2022. 5. 30. 21:50ㆍProgram/JavaScript

053_자바스크립트 배열(Array) 요소 정렬하기

[적용 1] - 배열 요소 역순 정렬하기

배열 요소를 역순으로 정렬하고 싶을 때

[문법]

메소드	의미	반환
배열.reverse()	배열을 역순으로 정렬	배열

[내용]

reverse()는 요소를 역순으로 정렬한다.

const array1 = [1, 3, 5];
array1. reverse();
console.log(array1);  // 결과: [5, 3, 1]

[적용 2] - 배열 요소 정렬 방법 지정하기

배열 요소를 오름차순/내림차순으로 정렬하고 싶을 때

[문법]

메소드	의미	반환
배열.sort([비교함수*])	배열을 비교 함수로 정려하기	배열

* 생략 가능

[내용]

sort()는 비교 함수로 배열을 정렬한다.

비교 함수는 두 인수의 크기를 비교하여 정렬 순서를 결정한다.

두 인수(a, b)를 가지는 비교 함수의 반환값에 따라 결과는 다음과 같다.

(비교함수) 반환값 < 0 - > a,b의 순서대로 정렬
(비교함수) 반환값 = 0 -> 정렬 순서 변화 없음
(비교함수) 반환값 > 0 -> b, a의 순서대로 정렬

[1, 2, 3, 3, 4, 5]의 요소를 가지는 배열을 크기가 큰 순서대로 정렬해 보자.

if문에서 a와 b를 비교한 결과에 따라 1, 0, -1의 반환값을 가진다.

const array2 = [1, 2, 3, 3, 4, 5];

array2.sort(((a, b) => {
    // a가 b보다 작으면 a, b의 순서로 정렬
    if (a < b) {
        return 1;
    }
    
    // a와 b가 같으면 정렬 순서 변화 없음
    if (a === b) {
        return 0;
    }
    
    // a가 b보다 크면 b, a의 순서로 정렬
    if (a > b) {
        return -1;
    }
});

console.log(array2);  // 결과: [5, 4, 3, 3, 2, 1]

[적용 3] - 객체를 포함하는 배열 정렬하기

배열 요소를 오름차순/내림차순으로 정렬하고 싶을 때

[예시]

오름차순/내림차순으로 정렬하여 정렬하여 츄저 이름을 표시하는 샘플을 확인해 보자. 정렬 대상은 다음과 같이 ID와 유저 이름을 함께 가지고 있는 배열이다.

// 데이터
const userDataList = [
    { id: 2, name: '곰' },
    { id: 10, name: '여우' },
    { id: 4, name: '사자' },
    { id: 29, name: '기린' },
    { id:101, name: '호랑이' }
];

HTML에서 오름차순/내림차순 버튼을 생성하여 버튼 클릭 시 청렬 순서가 변경되도록 한다.

.user_list 요소에서 유저 이름 리스트가 표시된다.

HTML index.html

<body>
    <div class="button-wrapper">
        <button class="ascending">오름차순</button>
        <button class="decending">내림차수</button>
    </div>
    <ul class="user_list">
        
    </ul>
</body>

JavaScript main.js

// 데이터
const userDataList = [
    { id: 2, name: '곰' },
    { id: 10, name: '여우' },
    { id: 4, name: '사자' },
    { id: 29, name: '기린' },
    { id: 101, name: '호랑이' }
];

// 데이터 표시 업데이트
function updateList() {
    let listHtml = '';
    
    for (const data of userDataList) {
        listHtml += `<li>${data.id} : ${data.name}</li>`;
    }
    
    document.querySelector('.user_list').innerHTML = listHtml;
}

// 오름차순 정렬
function sortByAscending() {
    userDataList.sort((a, b) => {
        return a.id - b.id;
    });
    
    updateList();
}

// 내림차순 정렬
function sortByDescending() {
    userDataList.sort((a, b) => {
        return b.id - a.id;
    });
    
    updateList();
}

// 오름차순 버튼 클릭 시 처리 작업
Document.querySelector('.ascending').addEventListener('click', () => {
    sortByAscending();
});

// 내림차순 버튼 클릭 시 처리 작업
document.querySelector('.descending').addEventListener('.click', () => {
    sortByDescending();
});

// 오름차순으로 초기 정렬
sortByAscending();

[APPENDIX]

비교 함수를 생락하면 유니코드(Unicode) 순서로 정렬

sort()에서 비교 함수를 생략하면 문자열의 유니코드 순서대로 정렬된다.

비교 함수를 생략하게 되면 [1, 5, 10]이나 ['一', '二', '三']처럼 기대하는 정렬 결과를 얻을 수 없다.

그러므로 특별한 이유가 없다면 sort()에 비교 함수를 명시해야 한다.

const array1 = [5, 1, 10];
array1.sort();
console.log(array1);  // 결과: [1, 10, 5];

const array2 = ['三', '二', '一'];
array2.sort();
console.log(array2);  // 결과: ["一", "三", "二"];

// 각 유니코드
// 一: 19968
// 二: 20108
// 三; 19977

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김

저작자표시

'Program > JavaScript' 카테고리의 다른 글

[JavaScript] 자바스크립트 배열(Array) 요소 추출해서 새 배열 만들기 (0)	2022.05.30
[JavaScript] 자바스크립트 배열(Array) 요소 알파벳순 정렬하기 (0)	2022.05.30
[JavaScript] 자바스크립트에서 조건을 만족하는 배열 요소(값) 가져오기 (0)	2022.05.27
[JavaScript] 자바스크립트 배열(Array) 요소 검색하기(배열 값 색인) (0)	2022.05.27
[JavaScript] 자바스크립트 배열(Array) 결합하기(합치기), 문자열 만들기 (0)	2022.05.27

Playdaddy