Categories: Java Script

자바스크립트에서 선택 정렬과 삽입 정렬 구현하기

안녕하세요! 오늘은 정렬 알고리즘 중에서도 기본적이면서도 중요한 선택 정렬삽입 정렬에 대해 자바스크립트로 구현하는 방법을 알아보려고 해요. 마치 레고 블록을 크기 순서대로 정리하는 것처럼, 컴퓨터 과학에서 정렬정말 중요한 역할을 담당하고 있답니다. 데이터를 효율적으로 관리하고, 원하는 정보를 빠르게 찾기 위해서정렬 알고리즘이 필수적이죠.

혹시 정렬 알고리즘이라고 하면 어렵게 느껴지시나요? 걱정 마세요! 차근차근 설명해드릴 테니, 함께 재밌게 배워보도록 해요. 이 글을 통해 선택 정렬과 삽입 정렬의 원리를 이해하고, 자바스크립트로 직접 구현해보면서 코딩 실력도 한 단계 업그레이드할 수 있을 거예요. 자, 그럼 이제 신나는 정렬의 세계로 함께 떠나볼까요?

 

 

선택 정렬 알고리즘 이해하기

선택 정렬! 이름만 들어도 왠지 뭔가를 선택하는 느낌이 팍팍 오지 않나요? 맞아요! 선택 정렬은 정렬되지 않은 부분에서 가장 작은(혹은 가장 큰) 요소를 ‘선택’해서 정렬된 부분의 맨 끝에 넣어주는 방식으로 동작해요. 마치 장난감 블록을 크기 순서대로 정리하는 것과 비슷하죠! 가장 작은 블록을 찾아서 맨 앞에 놓고, 그다음 작은 블록을 찾아서 그 뒤에 놓고… 이 과정을 반복하면 어느새 모든 블록이 정렬되어 있겠죠? ^^

선택 정렬의 원리

자, 이제 좀 더 깊이 들어가 볼까요? 선택 정렬은 크게 두 가지 과정이 반복되는데, 첫 번째는 최솟값을 찾는 과정이고, 두 번째는 찾은 최솟값을 현재 위치와 바꿔주는 과정이에요. 예를 들어, [5, 2, 8, 1, 9, 4] 이렇게 정렬되지 않은 배열이 있다고 가정해 볼게요.

선택 정렬의 단계

1. 첫 번째 단계: 먼저 배열 전체를 쭉 훑어보면서 가장 작은 숫자를 찾아요. 여기서는 ‘1’이 가장 작네요! 그럼 이 ‘1’을 배열의 첫 번째 위치에 있는 ‘5’와 자리를 바꿔줍니다. 이제 배열은 [1, 2, 8, 5, 9, 4]가 되었어요. 첫 번째 요소가 정렬되었죠?

2. 두 번째 단계: 이제 두 번째로 작은 숫자를 찾아야겠죠? 이번에는 첫 번째 요소인 ‘1’은 제외하고 나머지 부분 [2, 8, 5, 9, 4] 에서 가장 작은 숫자를 찾아요. ‘2’가 가장 작네요? ‘2’는 이미 두 번째 위치에 있으니 자리를 바꿀 필요가 없어요! 이미 정렬된 상태죠.

3. 세 번째 단계: 이제 [8, 5, 9, 4] 에서 가장 작은 숫자인 ‘4’를 찾아서 세 번째 위치에 있는 ‘8’과 자리를 바꿔줍니다. 그러면 배열은 [1, 2, 4, 5, 9, 8] 이렇게 되겠죠?

이런 식으로 정렬되지 않은 부분에서 최솟값을 찾아서 정렬된 부분의 끝에 계속해서 추가해 나가는 거예요. 마치 퍼즐 조각을 맞추는 것처럼 하나씩 하나씩 제자리를 찾아가는 모습을 상상해보세요! 재밌지 않나요?!

선택 정렬의 시간 복잡도

선택 정렬의 시간 복잡도는 어떨까요? 🤔 배열의 크기가 n이라고 했을 때, 최악의 경우에도 항상 n-1번 비교, n-2번 비교… 이런 식으로 비교를 해야 해요. 이걸 다 더하면 대략 n² 번 정도의 비교가 필요하게 되죠. 따라서 선택 정렬의 시간 복잡도는 O(n²)이라고 표현해요. Big-O 표기법이라고 하는데, 좀 더 자세히 알고 싶다면 따로 찾아보는 것도 좋을 것 같아요!

선택 정렬 vs 버블 정렬

버블 정렬과 비교하면 어떨까요? 버블 정렬도 시간 복잡도가 O(n²)이기 때문에 성능상 큰 차이는 없어요. 하지만 선택 정렬은 버블 정렬에 비해 자리 바꾸는 횟수(swap)가 적다는 장점이 있어요. 데이터의 이동이 잦으면 시간이 오래 걸릴 수 있으니, 이런 면에서는 선택 정렬이 조금 더 효율적이라고 할 수 있겠네요.

선택 정렬의 장단점과 활용

선택 정렬은 구현하기도 쉽고 이해하기도 쉬워서 알고리즘을 처음 배우는 사람들에게 좋은 시작점이 될 수 있어요! 하지만 데이터의 양이 많아지면 처리 시간이 기하급수적으로 늘어나기 때문에, 대규모 데이터를 정렬할 때는 다른 효율적인 알고리즘(예: 병합 정렬, 퀵 정렬)을 고려하는 것이 좋습니다. 다음에는 삽입 정렬에 대해 알아볼 텐데, 벌써부터 기대되지 않나요? 😊 각 알고리즘의 특징과 장단점을 잘 이해하고 상황에 맞게 적절한 알고리즘을 선택하는 것이 중요해요! 다음 챕터도 기대해 주세요~!

 

자바스크립트로 선택 정렬 구현하기

드디어! 선택 정렬 알고리즘자바스크립트로 구현해 볼 시간이에요! 알고리즘 자체는 간단하지만, 코드로 옮기는 건 또 다른 재미가 있죠! ^^ 준비되셨나요?

선택 정렬 알고리즘

선택 정렬은 배열에서 가장 작은 요소를 찾아서 첫 번째 위치에 놓고, 그 다음으로 작은 요소를 찾아서 두 번째 위치에 놓는 방식으로, 정렬되지 않은 부분에서 최솟값을 ‘선택’해서 앞으로 보내는 방식이에요. 마치 카드 게임에서 가장 낮은 숫자 카드를 뽑아 왼쪽으로 옮기는 것과 비슷하죠~? 이 과정을 반복하면 전체 배열이 정렬되는 거예요. 간단하죠?

자바스크립트 코드 예시

자, 이제 본격적으로 코드를 살펴볼게요. 아래 코드는 선택 정렬을 자바스크립트로 구현한 예시입니다. 주석을 꼼꼼히 달아놨으니 이해하기 쉬울 거예요!


function selectionSort(arr) {
  const n = arr.length; // 배열의 길이를 저장해 둡니다.

  for (let i = 0; i < n - 1; i++) { // n-1번 반복하면 정렬이 완료됩니다! 
    let minIndex = i; // 현재 위치 i를 최솟값의 인덱스로 가정합니다.

    for (let j = i + 1; j < n; j++) { // i 다음 요소부터 끝까지 비교합니다.
      if (arr[j] < arr[minIndex]) { // 더 작은 값을 발견하면
        minIndex = j; // minIndex를 업데이트합니다!
      }
    }

    // 현재 위치(i)와 최솟값(minIndex)을 교환합니다.
    // 자바스크립트의 멋진 기능, 구조 분해 할당을 사용했어요!
    [arr[i], arr[minIndex]] = [arr[minIndex], arr[i]];  
  }

  return arr; // 정렬된 배열을 반환합니다.
}


// 테스트 코드입니다!
const unsortedArray = [64, 25, 12, 22, 11];
const sortedArray = selectionSort(unsortedArray);
console.log(sortedArray); // [11, 12, 22, 25, 64] 가 출력됩니다!

코드 설명

코드를 보면, 바깥쪽 루프는 정렬되지 않은 부분의 시작 위치를 나타내고, 안쪽 루프는 그 위치부터 끝까지 배열을 탐색하면서 최솟값을 찾아냅니다. 최솟값을 찾으면 현재 위치의 값과 교환하는 방식이에요. 마치 퍼즐 조각을 맞추는 것 같지 않나요? 😊

시간 복잡도

이 알고리즘의 시간 복잡도O(n^2)입니다. 데이터의 양이 많아질수록 실행 시간이 기하급수적으로 늘어날 수 있다는 뜻이죠! 하지만, 코드가 간결하고 구현이 쉬워서 작은 규모의 데이터를 정렬할 때는 유용하게 사용할 수 있어요. 특히, 데이터의 이동 횟수가 최소화된다는 장점이 있어요! (최대 n-1번) 이 부분은 메모리 관리에 민감한 환경에서 중요한 요소가 될 수 있죠. 👍

선택 정렬의 특징

자, 이제 선택 정렬 알고리즘을 자바스크립트로 구현하는 방법을 알아봤어요! 어렵지 않았죠? 😄

안정 정렬 여부

선택 정렬은 안정 정렬(Stable Sort)이 아니에요. 즉, 같은 값을 가진 요소들의 상대적인 순서가 정렬 후에 바뀔 수도 있다는 뜻입니다. 예를 들어 [5, 2, 8, 5(a), 3, 5(b)] 와 같은 배열에서 5(a)와 5(b)의 순서가 정렬 후에 바뀔 수도 있어요. 이 점을 기억해 두면 좋을 것 같아요! 😉

제자리 정렬 여부

또한, 선택 정렬은 제자리 정렬(In-place Sort) 알고리즘입니다. 즉, 정렬을 위해 추가적인 메모리 공간을 거의 필요로 하지 않는다는 뜻이에요. 배열 내에서 요소들의 위치만 바꾸면서 정렬하기 때문에 메모리 효율이 좋다는 장점이 있죠. 하지만, 앞서 말했듯이 시간 복잡도가 O(n^2)이기 때문에, 대규모 데이터를 정렬할 때는 다른 알고리즘을 고려하는 것이 좋습니다. 🤔

선택 정렬의 사용

실제로 선택 정렬을 사용할 때는 배열의 크기, 데이터의 특성 등을 고려해서 사용하는 것이 좋습니다. 예를 들어, 데이터의 크기가 작고 안정성이 중요하지 않은 경우에는 선택 정렬이 좋은 선택이 될 수 있지만, 데이터의 크기가 크고 안정성이 중요한 경우에는 병합 정렬이나 퀵 정렬과 같은 다른 알고리즘을 사용하는 것이 더 효율적일 수 있습니다. 👌

알고리즘 선택의 중요성

이처럼 알고리즘을 선택할 때는 다양한 요소를 고려해야 합니다. 어떤 알고리즘이든 장단점이 있기 때문에 상황에 맞는 최적의 알고리즘을 선택하는 것이 중요해요! 다음 챕터에서는 삽입 정렬에 대해 알아볼 텐데, 선택 정렬과 비교하면서 공부하면 더욱 재미있을 거예요! 😉

 

삽입 정렬 알고리즘 이해하기

자, 이제 삽입 정렬 알고리즘의 세계로 풍덩 빠져볼까요? 선택 정렬이 좀 듬직하고 우직한 친구였다면, 삽입 정렬은 좀 더 섬세하고 재빠른 친구라고 할 수 있어요! 마치 카드 게임에서 손에 든 카드를 순서대로 정렬하는 모습을 떠올려 보세요. 새로운 카드를 받으면 이미 정렬된 카드 사이에 쏙! 하고 넣어주는 그런 느낌?! 이게 바로 삽입 정렬의 핵심 원리랍니다.^^

삽입 정렬의 원리

좀 더 자세히 설명해 드릴게요. 삽입 정렬은 데이터를 하나씩 가져와서 이미 정렬된 부분의 적절한 위치에 삽입하는 방식으로 동작해요. 처음에는 첫 번째 요소가 이미 정렬된 상태로 간주됩니다. (당연히 하나니까요!ㅎㅎ) 두 번째 요소를 가져와서 첫 번째 요소와 비교하고, 순서에 맞게 배치합니다. 이 과정을 세 번째, 네 번째… 요소까지 반복하면서 정렬되지 않은 부분을 하나씩 줄여나가는 거죠. 마치 퍼즐 조각을 맞추듯이 말이에요!

삽입 정렬 예시

예를 들어, [5, 2, 4, 6, 1, 3] 이라는 배열을 삽입 정렬로 정렬한다고 생각해 보세요.

1. 첫 번째 요소 (5): 5 하나만 있는 상태이므로, 이미 정렬된 것으로 봅니다.
2. 두 번째 요소 (2): 2를 가져와서 5와 비교합니다. 2가 5보다 작으므로, 2를 5 앞에 삽입합니다. 배열은 [2, 5, 4, 6, 1, 3]이 됩니다.
3. 세 번째 요소 (4): 4를 가져와서 이미 정렬된 [2, 5] 부분에 삽입할 위치를 찾습니다. 2보다는 크고 5보다는 작으므로, 2와 5 사이에 삽입합니다. 배열은 [2, 4, 5, 6, 1, 3]이 됩니다.
4. 네 번째 요소 (6): 6을 가져오면 이미 정렬된 [2, 4, 5] 부분과 비교합니다. 6은 가장 크므로 5 뒤에 삽입합니다. 배열은 [2, 4, 5, 6, 1, 3]이 됩니다.
5. 다섯 번째 요소 (1): 1을 가져와서 [2, 4, 5, 6]과 비교합니다. 1은 가장 작으므로 맨 앞에 삽입합니다. 배열은 [1, 2, 4, 5, 6, 3]이 됩니다.
6. 여섯 번째 요소 (3): 마지막으로 3을 가져와서 [1, 2, 4, 5, 6]과 비교합니다. 2와 4 사이에 삽입합니다. 최종적으로 정렬된 배열은 [1, 2, 3, 4, 5, 6]이 됩니다!

삽입 정렬의 이해

어때요? 좀 더 감이 잡히시나요? 삽입 정렬은 이미 정렬된 부분에 새로운 요소를 삽입할 때, 적절한 위치를 찾기 위해 앞에서부터 순차적으로 비교하는 과정을 거칩니다. 이 부분이 삽입 정렬의 시간 복잡도를 결정하는 중요한 요소인데, 최악의 경우 (역순으로 정렬된 배열)에는 O(n^2)의 시간 복잡도를 갖게 됩니다. 하지만 이미 거의 정렬된 배열이나 데이터의 개수가 적을 때는 매우 효율적이에요! (최선의 경우 O(n)!!) 특히, 데이터가 실시간으로 입력되는 상황에서 유용하게 활용될 수 있답니다.

삽입 정렬의 장단점

삽입 정렬의 장점은 단순하고 구현하기 쉽다는 점, 그리고 메모리 사용량이 적다는 점이에요. 또한, 안정 정렬(Stable Sort)이기 때문에 같은 값을 가진 요소들의 상대적인 순서가 유지된다는 장점도 있죠! 반면, 데이터의 양이 많아질수록 성능이 떨어진다는 단점이 있지만, 특정 상황에서는 퀵 정렬이나 병합 정렬보다 더 효율적일 수 있다는 점! 꼭 기억해 두세요~! 다음에는 이 삽입 정렬을 자바스크립트로 어떻게 구현하는지 살펴보도록 할게요. 기대해주세요! 😉

 

자바스크립트로 삽입 정렬 구현하기

후~ 드디어 선택 정렬을 끝내고 삽입 정렬 차례네요! 삽입 정렬은 선택 정렬보다 조금 더 복잡하지만, 성능 면에서는 훨씬 효율적일 수 있어요. 마치 카드 게임에서 손에 든 카드를 순서대로 정렬하는 것과 비슷하다고 생각하면 이해하기 쉬울 거예요. 새로운 카드를 받으면 손에 있는 카드들을 하나씩 비교해가면서 적절한 위치에 끼워 넣는 방식이죠! 이러한 삽입 정렬의 특징 덕분에 이미 어느 정도 정렬된 배열에서는 훨씬 빠른 속도를 보여준답니다. 시간 복잡도 측면에서 보면, 최악의 경우와 평균적인 경우에는 O(n²)이지만, 이미 정렬된 배열에서는 O(n)의 시간 복잡도를 갖게 돼요. 엄청나죠?!

삽입 정렬 알고리즘 구현

자, 그럼 이제 삽입 정렬 알고리즘을 자바스크립트로 구현하는 방법을 살펴볼까요? 아래 코드를 보면서 차근차근 설명해 드릴게요. 걱정 마세요! 어렵지 않아요~

function insertionSort(arr) {
  const n = arr.length; // 배열의 길이를 저장해둬요!

  for (let i = 1; i < n; i++) { // 첫 번째 요소는 이미 정렬된 것으로 간주하므로 두 번째 요소부터 시작!
    let key = arr[i]; // 현재 정렬할 요소를 key 변수에 저장해둡니다.
    let j = i - 1; // key의 왼쪽에 있는 요소들을 비교하기 위한 인덱스

    // key보다 큰 요소들을 한 칸씩 오른쪽으로 이동시킵니다.
    while (j >= 0 && arr[j] > key) { 
      arr[j + 1] = arr[j]; // 자리를 비워주는 작업이죠!
      j--; // 이전 요소와 비교하기 위해 j 값을 감소시켜요.
    }

    arr[j + 1] = key; // key를 적절한 위치에 삽입합니다! 드디어 자리를 찾았네요!
  }

  return arr; // 정렬된 배열을 반환합니다.
}


// 테스트를 위한 배열!
let unsortedArray = [5, 2, 4, 6, 1, 3];

// 삽입 정렬 함수 호출~
let sortedArray = insertionSort(unsortedArray);

// 결과 출력!
console.log("정렬된 배열:", sortedArray); // [1, 2, 3, 4, 5, 6] 이 출력될 거예요!

코드를 보면 insertionSort 함수가 배열을 인자로 받아서 정렬된 배열을 반환하는 구조예요. 핵심은 바깥쪽 for 루프와 안쪽 while 루프의 조합인데요. 바깥쪽 루프는 정렬할 요소(key)를 선택하고, 안쪽 루프는 key가 삽입될 위치를 찾을 때까지 왼쪽 요소들을 비교하며 자리를 이동시키는 역할을 해요. 마치 카드 게임처럼 말이죠!

while 루프 내부의 arr[j + 1] = arr[j] 부분이 바로 요소들을 오른쪽으로 이동시키는 부분이에요. 이렇게 자리를 비워둔 후에, while 루프가 종료되면 arr[j + 1] = key를 통해 key 값을 적절한 위치에 삽입해요.

이렇게 하면 배열의 요소들이 하나씩 정렬되어 최종적으로는 완전히 정렬된 배열을 얻을 수 있어요! 참 쉽죠? ^^

코드 분석

자, 그럼 이 코드를 조금 더 자세히 분석해 볼까요?

  1. for (let i = 1; i < n; i++): i는 현재 정렬할 요소의 인덱스를 나타내요. 삽입 정렬은 첫 번째 요소는 이미 정렬된 것으로 간주하기 때문에 i는 1부터 시작해요. i가 배열의 길이보다 작을 때까지 반복하면서 모든 요소를 정렬합니다.
  2. let key = arr[i]: 현재 정렬할 요소를 key 변수에 저장해요. 이 key 값을 적절한 위치에 삽입하는 것이 목표예요!
  3. let j = i - 1: jkey의 왼쪽에 있는 요소들의 인덱스를 나타내요. key와 비교할 요소의 인덱스죠.
  4. while (j >= 0 && arr[j] > key): j가 0보다 크거나 같고, arr[j]key보다 큰 동안 반복해요. 즉, key보다 큰 요소들을 오른쪽으로 이동시키는 작업을 반복하는 거죠.
  5. arr[j + 1] = arr[j]: key보다 큰 요소를 한 칸 오른쪽으로 이동시켜요. 이렇게 하면 key가 삽입될 위치에 빈 공간이 생기게 돼요.
  6. j--: j 값을 감소시켜서 이전 요소와 비교할 수 있도록 해요.
  7. arr[j + 1] = key: while 루프가 종료되면 j + 1 위치에 key를 삽입해요. 이 위치가 바로 key가 있어야 할 정렬된 위치랍니다!

이해가 잘 되셨나요? 삽입 정렬은 처음에는 조금 복잡해 보일 수 있지만, 원리를 이해하고 나면 코드 구현도 어렵지 않아요. 코드를 직접 실행해보고, 배열의 값을 바꿔가면서 테스트해보면 더욱 쉽게 이해할 수 있을 거예요! 😊 다음에는 또 다른 정렬 알고리즘을 자바스크립트로 구현하는 방법을 알아볼 테니 기대해주세요!

 

자, 이렇게 선택 정렬과 삽입 정렬자바스크립트로 구현하는 방법을 알아봤어요! 어때요, 생각보다 재밌지 않았나요? 처음엔 복잡해 보였지만, 하나씩 뜯어보니 그 원리가 참 쉽죠? 직접 코드를 작성하고 실행해보면서 정렬 알고리즘의 매력에 푹 빠져보셨으면 좋겠어요. 이 두 알고리즘기본적인 정렬 알고리즘이지만, 앞으로 더 복잡한 알고리즘을 배우는 멋진 밑거름이 될 거예요. 다음에는 또 다른 재미있는 알고리즘 이야기로 찾아올게요! 그때까지 열심히 코딩하며 즐거운 시간 보내세요!

 

Itlearner

Share
Published by
Itlearner

Recent Posts

R에서 산술 연산자 및 논리 연산자 (+, -, *, ==, !=, &, |)

안녕하세요, 여러분! 😊 오늘은 R과 함께 신나는 데이터 분석 여행을 떠나볼까요? 데이터 분석에서 가장 기본적이면서도…

2시간 ago

R에서 요인(Factor) 데이터 타입 활용법 (factor(), levels())

안녕하세요! 데이터 분석하면 왠지 어렵고 복잡하게 느껴지시죠? 그런데 막상 배우다 보면 생각보다 재미있는 부분도 많답니다.…

7시간 ago

R에서 데이터 프레임(Data Frame) 만들기와 변형 (data.frame(), dplyr)

안녕하세요! 데이터 분석에 관심 있는 분들, R을 배우고 싶은 분들 모두 환영해요! R에서 데이터를 다루는…

13시간 ago

R에서 행렬(Matrix)과 배열(Array) 다루기

안녕하세요! 데이터 분석의 세계에 뛰어들고 싶은데, 뭔가 막막한 기분 느껴본 적 있으세요? R 언어를 배우다…

18시간 ago

R에서 리스트(List) 생성과 활용 (list(), 리스트 요소 접근)

안녕하세요! R 언어로 데이터 분석하는 재미에 푹 빠져계신가요? 오늘은 R에서 정말 유용하게 쓰이는 리스트(List)에 대해…

23시간 ago

R에서 벡터(Vector) 만들기와 활용 (c(), seq(), rep())

R 언어로 데이터 분석을 시작하셨나요? 그렇다면 제일 먼저 친해져야 할 친구가 있어요. 바로 벡터(Vector)랍니다! R은…

1일 ago