14.4.3 `sort` - 배열을 정리정돈해주는 똑똑한 정리 도우미

📘 14.4.3 sort - 배열을 정리정돈해주는 똑똑한 정리 도우미

안녕하세요, 여러분. 이전 시간들에 find, findIndex로 원하는 것을 찾고, some, every로 전체 상황을 점검하는 방법을 배웠어요. 오늘은 배열의 모든 것들을 깔끔하게 정리정돈해주는 똑똑한 정리 도우미 sort를 만나볼 거예요.

우리가 책상 위에 흩어진 연필들을 길이 순서대로 가지런히 놓거나, 가족 사진을 날짜 순서대로 앨범에 정리하는 것처럼, sort는 배열의 모든 것들을 원하는 순서로 다시 배치해줍니다.

🧠 새로운 단어들과 친해지기

배열을 정리할 때 사용하는 중요한 단어들을 차근차근 알아볼게요.

단어	쉬운 설명
sort	배열의 모든 것들을 특정한 순서로 다시 배치하는 도우미예요.
비교 함수	sort에게 "어떤 기준으로 정리할지"를 알려주는 함수예요.
오름차순	작은 것부터 큰 것 순서로 정리하는 방식이에요.
내림차순	큰 것부터 작은 것 순서로 정리하는 방식이에요.

sort는 "정리하다, 정돈하다"라는 뜻의 영어 단어예요.

✨ sort가 뭔지 알아보기

sort는 배열의 모든 것들을 원하는 순서로 다시 배치해주는 특별한 기능이에요. 이 기능의 가장 특별한 점은 원본 배열을 직접 변경한다는 거예요. 마치 우리가 책상 위의 연필들을 길이 순서대로 다시 정리하는 것처럼 말이죠.

sort는 기본적으로 글자 순서로 정리해요. 하지만 숫자나 복잡한 정보 묶음을 정리할 때는 비교 함수라는 특별한 도우미가 필요합니다. 이 비교 함수를 통해 "이것이 저것보다 앞에 와야 해", "이것이 저것보다 뒤에 와야 해"라고 알려줄 수 있어요.

sort를 사용하면 정보를 보기 좋게 정리할 수 있어서, 사용자가 원하는 방식으로 목록을 보여주거나 정보를 분석하기 쉽게 만들 수 있습니다.

재미있는 비유: 반 친구들 키 순서로 줄 세우기

sort를 더 쉽게 이해하기 위해 '체육 시간에 친구들을 키 순서로 줄 세우는 상황'에 비유해볼게요.

체육 선생님이 "키 작은 순서대로 줄 서세요!"라고 하셨다고 생각해보세요. 처음에는 친구들이 아무 순서 없이 서 있어요: [철수(160cm), 영희(155cm), 민수(170cm), 지은(158cm)]

그러면 친구들이 서로를 비교하면서 올바른 위치를 찾아가기 시작해요. 영희가 "나는 155cm니까 가장 앞으로 가야겠다", 민수가 "나는 170cm니까 맨 뒤로 가야겠다"라고 하면서 말이죠.

마지막에는 키 순서대로 정리된 새로운 줄이 완성돼요: [영희(155cm), 지은(158cm), 철수(160cm), 민수(170cm)]

중요한 점은 원래 줄 자체가 바뀌었다는 거예요. 새로운 줄을 만든 게 아니라 기존의 줄에서 친구들이 자리를 바꾼 거죠.

🎯 왜 sort를 배워야 할까요?

우리는 왜 sort를 배워야 할까요?

첫 번째로, 정보를 보기 좋게 정리할 수 있어요. 이름순, 점수순, 날짜순 등 원하는 기준으로 정보를 정리해서 사용자가 쉽게 찾고 이해할 수 있게 도와줍니다.

두 번째로, 사용자가 더 편하게 느끼게 해줘요. 쇼핑몰에서 가격순으로 상품을 보거나, 학급에서 성적순으로 순위를 확인하는 것처럼 사용자가 원하는 방식으로 정보를 제공할 수 있어요.

세 번째로, 정보 분석에 도움이 돼요. 정리된 정보는 패턴을 찾거나 최댓값, 최솟값을 확인하기 쉬워서 분석 작업이 훨씬 쉬워집니다.

마지막으로, 실제 개발에서 필수 기능이기 때문이에요. 거의 모든 앱에서 목록을 정리하는 기능이 필요하므로, sort는 정말 중요한 도구입니다.

⚙️ 기본 사용법 살펴보기

sort의 기본적인 사용법을 알아보겠습니다.

// 기본 정리 (글자 기준)
배열.sort();

// 비교 함수를 사용한 정리
배열.sort(function(첫번째, 두번째) {
    return 첫번째 - 두번째; // 작은 것부터 순서
});

// 더 간단하게 쓰기
배열.sort((첫번째, 두번째) => 첫번째 - 두번째);

기본 예시:

// 글자 정리
let fruits = ["바나나", "사과", "포도"];
fruits.sort();
console.log(fruits); // ["바나나", "사과", "포도"]

// 숫자 정리 (올바른 방법)
let numbers = [3, 1, 4, 1, 5];
numbers.sort(function(a, b) {
    return a - b; // 작은 순서부터
});
console.log(numbers); // [1, 1, 3, 4, 5]

🧪 직접 해보면서 배우기

이제 실제 상황에서 sort를 사용하는 예시들을 살펴보겠습니다.

🔹 첫 번째 예시: 기본적인 문자와 숫자 정리

먼저 간단한 문자와 숫자 정리를 연습해보겠습니다.

// 동물 이름 가나다순 정리
let animals = ["호랑이", "코끼리", "사자", "기린"];

console.log("정리 전:", animals);
animals.sort();
console.log("정리 후:", animals); // ["기린", "사자", "코끼리", "호랑이"]

// 숫자 정리 - 작은 순서부터 (오름차순)
let scores = [85, 92, 78, 96, 88];

console.log("점수 정리 전:", scores);
scores.sort(function(a, b) {
    return a - b;
});
console.log("점수 작은 것부터:", scores); // [78, 85, 88, 92, 96]

// 숫자 정리 - 큰 순서부터 (내림차순)
let ages = [10, 15, 8, 12, 9];
ages.sort(function(a, b) {
    return b - a; // 큰 것에서 작은 것 빼기
});
console.log("나이 큰 것부터:", ages); // [15, 12, 10, 9, 8]

이 예시에서는 문자는 자동으로 정리되지만, 숫자는 비교 함수가 필요함을 보여줍니다.

🔹 두 번째 예시: 원본 배열 보호하면서 정리하기

sort는 원본 배열을 변경하므로, 원본을 보호하는 방법을 알아보겠습니다.

// 원본 시험 점수
let originalScores = [85, 92, 78, 96, 88];

console.log("원본 점수:", originalScores);

// 원본을 복사해서 정리 (원본 보호)
let sortedScores = [...originalScores].sort(function(a, b) {
    return a - b;
});

console.log("정리 후 원본:", originalScores); // [85, 92, 78, 96, 88] (변경 없음)
console.log("정리된 복사본:", sortedScores); // [78, 85, 88, 92, 96]

// 다른 복사 방법들
let copy1 = originalScores.slice().sort((a, b) => b - a);
let copy2 = Array.from(originalScores).sort((a, b) => a - b);

console.log("복사 방법1 (큰 것부터):", copy1);
console.log("복사 방법2 (작은 것부터):", copy2);

이 예시에서는 원본 정보를 안전하게 보호하면서 정리하는 여러 방법을 보여줍니다.

🔹 세 번째 예시: 정보 묶음 배열 정리하기

우리 반 친구들 정보를 다양한 기준으로 정리해보겠습니다.

// 우리 반 친구들 정보
let classmates = [
    { name: "철수", age: 10, height: 145, score: 85 },
    { name: "영희", age: 11, height: 150, score: 92 },
    { name: "민수", age: 9, height: 142, score: 78 },
    { name: "지은", age: 10, height: 148, score: 96 }
];

// 나이순 정리 (어린 순서부터)
let sortedByAge = [...classmates].sort(function(a, b) {
    return a.age - b.age;
});

console.log("나이순 정리:");
sortedByAge.forEach(function(friend) {
    console.log(`${friend.name}: ${friend.age}세`);
});

// 키순 정리 (큰 순서부터)
let sortedByHeight = [...classmates].sort(function(a, b) {
    return b.height - a.height;
});

console.log("키순 정리 (큰 순서):");
sortedByHeight.forEach(friend => {
    console.log(`${friend.name}: ${friend.height}cm`);
});

// 이름순 정리 (가나다순)
let sortedByName = [...classmates].sort(function(a, b) {
    return a.name.localeCompare(b.name);
});

console.log("이름순 정리:", sortedByName.map(f => f.name));

이 예시에서는 정보 묶음의 다양한 속성을 기준으로 정리하는 방법을 보여줍니다.

🔄 정리 과정 정리하기

지금까지 배운 sort의 사용 과정을 단계별로 정리해보겠습니다.

첫 번째 단계는 정리 기준 정하기입니다. 글자순인지, 숫자순인지, 정보 묶음의 어떤 속성인지 명확히 결정해야 해요.

두 번째는 비교 함수 작성 단계입니다. 글자가 아닌 경우 어떻게 비교할지 함수로 정의해야 합니다.

세 번째는 원본 보호 여부 결정 단계입니다. 원본 배열을 그대로 변경할지, 복사본을 만들어서 정리할지 선택해야 해요.

마지막으로 정리 실행 단계입니다. sort 기능을 호출하면 배열이 원하는 순서로 다시 배치됩니다.

🧠 자주 하는 실수와 주의할 점

sort를 사용할 때 자주 하는 실수들을 알아보고 피하는 방법을 살펴보겠습니다.

❌ 실수 1: 숫자를 정리할 때 비교 함수를 안 쓰기

// 잘못된 예시 - 비교 함수 없이 숫자 정리
let numbers = [10, 2, 30, 4];
numbers.sort();
console.log(numbers); // [10, 2, 30, 4] (엉망!)

// 왜 이런 결과가 나올까요?
// sort는 기본적으로 글자로 바꿔서 정리해요
// "10", "2", "30", "4" → "1"이 "2"보다 앞에 와요

// 올바른 방법
let correctNumbers = [10, 2, 30, 4];
correctNumbers.sort(function(a, b) {
    return a - b; // 진짜 숫자로 비교
});
console.log(correctNumbers); // [2, 4, 10, 30] (올바름!)

숫자는 반드시 비교 함수를 사용해야 제대로 정리돼요.

❌ 실수 2: 원본 배열이 변경된다는 걸 깜빡하기

// 위험한 예시 - 원본이 변경됨을 모르고 사용
let myScores = [85, 92, 78, 96, 88];
let displayScores = myScores.sort((a, b) => a - b);

console.log("원본 점수:", myScores);     // [78, 85, 88, 92, 96] (변경됨!)
console.log("표시 점수:", displayScores); // [78, 85, 88, 92, 96] (같은 배열)

// 안전한 방법 - 복사본 사용
let safeScores = [85, 92, 78, 96, 88];
let safeDisplay = [...safeScores].sort((a, b) => a - b);

console.log("안전한 원본:", safeScores);  // [85, 92, 78, 96, 88] (보존됨)
console.log("안전한 표시:", safeDisplay); // [78, 85, 88, 92, 96]

원본을 보존하려면 반드시 복사본을 만들어서 정리해야 해요.

❌ 실수 3: 비교 함수에서 잘못된 값 반환하기

// 잘못된 비교 함수
let numbers = [3, 1, 4, 1, 5];

// 틀린 예시 - true/false 반환
numbers.sort(function(a, b) {
    return a > b; // true나 false만 나와요 (틀림!)
});

// 올바른 예시 - 숫자 반환
let correctNumbers = [3, 1, 4, 1, 5];
correctNumbers.sort(function(a, b) {
    return a - b; // 음수, 0, 양수가 나와요 (맞음!)
});

// 더 명확한 예시
let explicitNumbers = [3, 1, 4, 1, 5];
explicitNumbers.sort(function(a, b) {
    if (a < b) return -1;  // a를 앞으로
    if (a > b) return 1;   // a를 뒤로
    return 0;              // 같으면 그대로
});

비교 함수는 반드시 음수, 0, 양수를 반환해야 해요.

✏️ 연습문제로 개념 다지기

어떤 것들이 제자리를 찾아가는 모습을 보는 건 참 마음이 놓이는 일이에요. 마치 흩어진 책들이 하나둘 제 자리로 돌아가는 것처럼 말이에요. 이제 우리도 직접 그런 정리의 기쁨을 맛보아 볼까요?

Ex1) 과일 이름들을 가나다순으로 줄 세워서 "정리 완료!" 메시지와 함께 보여주자

// 좋아하는 과일들 목록
let fruits = ["포도", "사과", "바나나", "딸기", "키위"];

console.log("정리 전:", fruits);

// 가나다순으로 정리
fruits.sort(); // 글자는 자동으로 가나다순 정리

console.log("정리 완료! 가나다순 과일들:", fruits);
// ["딸기", "바나나", "사과", "키위", "포도"]
console.log("🍎 과일들이 깔끔하게 정리되었어요!");

Ex2) 게임 점수를 높은 점수부터 낮은 점수 순으로 정리해서 "순위 발표!" 메시지를 띄워보자

// 게임 점수들 목록
let gameScores = [1200, 850, 1450, 990, 1300];

console.log("정리 전 점수들:", gameScores);

// 높은 점수부터 낮은 점수순 (내림차순)
gameScores.sort(function(a, b) {
    return b - a; // 두 번째에서 첫 번째를 빼서 큰 순서부터
});

console.log("순위 발표! 🏆");
console.log("높은 점수 순서:", gameScores);
// [1450, 1300, 1200, 990, 850]

gameScores.forEach(function(score, index) {
    console.log(`${index + 1}등: ${score}점`); // 각 점수를 순위와 함께 출력
});

Ex3) 책 정보를 페이지 수 순으로 정리해서 "읽기 쉬운 순서대로 정리했어요!" 메시지를 보여주자

// 읽은 책들 정보
let books = [
    { title: "어린왕자", pages: 120 },
    { title: "해리포터", pages: 350 },
    { title: "삼국지", pages: 500 },
    { title: "그리스신화", pages: 200 }
];

// 페이지 수 순으로 정리하는 기능
function sortBooksByPages(bookList) {
    // 원본 보호를 위해 복사본 생성
    let sorted = [...bookList]; // 원본 배열을 복사

    sorted.sort(function(a, b) {
        return a.pages - b.pages; // 각 책의 페이지 수를 비교해서 적은 순부터
    });

    return sorted; // 정리된 배열 반환
}

// 기능 사용하기
console.log("원본 책 목록:", books);
let sortedBooks = sortBooksByPages(books); // 정리된 책 목록 받기

console.log("읽기 쉬운 순서대로 정리했어요! 📚");
sortedBooks.forEach(function(book, index) {
    console.log(`${index + 1}번째: ${book.title} (${book.pages}페이지)`); // 각 책 정보 출력
});
console.log("얇은 책부터 읽어보세요! 😊");

📚 13단원 복습 - 비동기 처리 되돌아보기

14단원을 배우기 전에 13단원에서 배운 비동기 처리를 복습해볼까요?

복습 문제 1: async/await로 순서대로 실행하기

// async/await를 사용해서 순서대로 메시지를 출력하는 코드를 작성해보세요.
async function showMessages() {
    console.log("첫 번째 메시지");

    // 2초 기다리기
    await new Promise(function(resolve) {
        setTimeout(resolve, 2000);
    });

    console.log("두 번째 메시지 (2초 후)");

    // 1초 더 기다리기
    await new Promise(resolve => setTimeout(resolve, 1000));

    console.log("세 번째 메시지 (3초 후)");
}

showMessages();

설명: async/await를 사용하면 비동기 코드를 순서대로 실행하는 것처럼 쉽게 작성할 수 있어요. await는 약속(Promise)이 완료될 때까지 기다려줍니다.

복습 문제 2: fetch로 데이터 가져오기

// fetch를 사용해서 데이터를 가져오는 간단한 예시를 만들어보세요.
async function getUserData() {
    try {
        console.log("데이터를 가져오는 중...");

        // 가짜 API 주소 (실제로는 작동하지 않을 수 있어요)
        let response = await fetch("https://jsonplaceholder.typicode.com/users/1");

        if (response.ok) {
            let userData = await response.json();
            console.log("사용자 정보:", userData.name);
        } else {
            console.log("데이터를 가져올 수 없어요");
        }
    } catch (error) {
        console.log("오류가 발생했어요:", error.message);
    }
}

// 사용하기 (실제 인터넷이 연결되어 있어야 작동해요)
// getUserData();

설명: fetch는 인터넷에서 데이터를 가져오는 기능이에요. async/await와 try/catch를 함께 사용하면 안전하게 데이터를 가져올 수 있습니다.

🤔 심화 문제로 실력 확인하기

더 깊이 있는 문제들을 통해 sort에 대한 이해를 확인해보겠습니다.

Q1. sort를 친구에게 설명한다면 어떻게 설명하겠나요?

정답: "sort는 정리정돈과 같아요. 예를 들어 연필들을 길이 순서대로 정리하거나, 반 친구들을 키 순서대로 줄 세우는 것과 같아요. 중요한 건 새로운 줄을 만드는 게 아니라 원래 있던 줄에서 직접 순서를 바꾸는 거예요."

Q2. 다음 코드의 결과를 예측해보세요.

let arr = [10, 2, 30, 4];
console.log(arr.sort());

정답: [10, 2, 30, 4]가 출력됩니다. sort()는 기본적으로 모든 것을 글자로 바꿔서 정리하기 때문에 "10", "2", "30", "4" 순서로 정리되어 숫자 크기와는 다른 결과가 나옵니다.

🧚‍♀️ 이야기로 다시 배우기: 학교 도서관의 정리 도우미 대모험

마지막으로 sort를 하나의 이야기로 정리해볼게요.

우리 학교 도서관에 정리 도우미 소트(Sort)라는 똑똑한 친구가 있었어요. 이 친구는 어떤 것이든 원하는 순서로 정리할 수 있는 놀라운 능력을 가지고 있었답니다.

어느 날, 도서관의 책들이 완전히 뒤섞여 있었어요: 과학책, 요리책, 동화책, 역사책이 아무 순서 없이 놓여 있었죠. 도서관 선생님이 소트에게 부탁했어요. "가나다 순으로 정리해주세요!"

소트는 책들을 하나씩 살펴보기 시작했어요. 각 책이 자신의 이름을 다른 책들과 비교하면서 올바른 자리를 찾아갔답니다. [과학책, 동화책, 역사책, 요리책] 순서로 깔끔하게 정리되었어요.

다른 날에는 사서 선생님이 "페이지 수가 적은 순서대로 정리해주세요!"라고 부탁했어요. 이번에는 소트가 특별한 비교 방법을 사용했어요. 각 책들이 페이지 수를 서로 비교해서 얇은 책부터 두꺼운 책 순서로 다시 배치되었답니다.

중요한 점은 소트의 정리가 기존 책장을 직접 바꾼다는 거였어요. 새로운 책장을 만드는 게 아니라 원래 책장에서 책들의 순서만 바꾸는 거죠. 하지만 가끔 원본을 보존하고 싶을 때는 복사본을 먼저 만든 다음 정리했어요.

어떤 친구가 숫자가 적힌 카드들을 가져와서 정리해달라고 했는데, 처음에는 이상하게 정리되었어요. 10, 2, 30, 4가 10, 2, 30, 4 순서로 그대로 있었거든요! 소트가 설명해주었어요. "숫자는 특별한 비교 방법이 필요해요!" 그래서 "숫자 크기 비교 방법"을 사용하니 2, 4, 10, 30 순서로 올바르게 정리되었답니다.

이처럼 sort라는 정리 도우미는 어떤 정보든 원하는 순서로 깔끔하게 정리해주는 똑똑한 친구예요. 여러분도 이제 이 기능을 배웠으니, 어떤 배열이든 아름답게 정리할 수 있게 되었답니다!

✅ 학습 완료 체크리스트

이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요!

학습 내용	이해했나요?
sort의 기본 개념	✅
기본 사용법과 문법	✅
주요 특징과 차이점	✅
자주 하는 실수들	✅
실전 예제 이해	✅
13단원 복습 완료	✅

📂 마무리 정보

오늘 배운 14.4.3 내용이 여러분의 자바스크립트 지식에 잘 저장되었나요? 다음 시간에는 더 재미있는 내용으로 만나요!

기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.

🚀 더 체계적인 JavaScript 학습을 원하신다면?

이 포스팅에서 다룬 내용을 실제로 실습해보세요!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.

📝 실시간 코드 실행 📊 학습 진도 관리 👥 체계적 커리큘럼

📚 171개 체계적 학습레슨 · 📋 855개 4지선다 연습문제 · 🆓 완전 무료 · ⚡ 즉시 시작

💻 무료로 학습하러 가기

---