sort() 활용 - 문자, 숫자 오름차순 정렬 그리고 내림차순 정렬 원리

sort() 활용 - 문자, 숫자 오름차순 정렬 그리고 내림차순 정렬 원리

 

 

이전까지 몇번의 포스팅에서 자바스크립트의 배열을 반복적으로 다루며 정리를 해보았습니다. 그만큼 배열에 대해 이해하고 잘 다루는 게 중요하기 때문입니다.

 

이번 포스팅에서 딱 한놈만 패는 기분으로, sort() 메서드를 가지고 약간 심도 있게 다뤄보고 정리를 해봅시다. 연습문제를 푸는 마음으로 살펴 두면 도움이 될 것입니다.

 

 

sort() 메서드 활용 - 1. 문자의 오름차순 정렬

 

아래 주어진 배열를 가나순으로 정렬해보세요.

const str = ["B", "D", "A", "C"];

 

이건 이제 너무 쉽게 느껴지죠? sort() 메서드만 갖다 붙여보면 되니까요. 당장 풀어버립시다!

const str = ["B", "D", "A", "C"];

str.sort();
console.log(str); // ['A', 'B', 'C', 'D']

sort() 메서드 활용 - 1. 문자의 오름차순 정렬

 

역시 문자에 대한 오름 차순 정렬은 제일 간단합니다.

 

 

sort() 메서드 활용 - 2. 숫자의 오름차순 정렬

 

sort() 메서드는 기본적으로 '문자열'로 처리를 해서 오름차순 정렬을 실행해줍니다. 그렇다면 숫자의 경우에는 어떻게 오름차순 정렬을 할 수 있을까요? 아래 문제를 당장 풀어봅시다.

const nums = [3, 1, 5, 2, 4, 20];
nums.sort();
console.log(nums); //[1, 2, 20, 3, 4, 5]

 

배열에 그냥 sort() 만 붙이면 숫자 정렬이 일어나지 않습니다. 숫자 정렬은 배열의 원소를 2개씩 뽑아다가 빼기(-) 비교를 해줘야 합니다. 콜백함수를 하나 써줘야 합니다.

const nums = [3, 1, 5, 2, 4, 20];
nums.sort();
console.log(nums); //[1, 2, 20, 3, 4, 5]

nums.sort(function (a, b) {
  return a - b;
});
console.log(nums); //[1, 2, 3, 4, 5, 20]

sort() 메서드 활용 - 2. 숫자의 오름차순 정렬

 

이렇게 처리를 해주면 됩니다. 그렇다면 여기에서 한발 더 살펴봅시다.

숫자를 내림차순 정렬을 해주러면 어떻게 하면 좋을까요?

 

 

sort() 메서드 활용 - 3. 숫자의 내림차순 정렬

 

위 예제를 오름차순이 아니라, 내림차순으로 정렬을 하려면 어떻게 하면 좋을까요? 한번 생각해보세요.

왠지 a - b를 판단해서 돌려주는 콜백함수에 힌트가 있을 것 같지 않습니까?

 

당장 코딩으로 확인해봅시다.

const nums = [3, 1, 5, 2, 4, 20];
nums.sort();
console.log(nums); //[1, 2, 20, 3, 4, 5]

nums.sort(function (a, b) {
  return b - a;    // 여기만 순서를 바꿔줬습니다.
});
console.log(nums); //[20, 5, 4, 3, 2, 1]

sort() 메서드 활용 - 3. 숫자의 내림차순 정렬

 

간단하게 해결이 되었습니다. 그렇다면 이제 하나 남은 건 '문자의 내림차순 정렬'이 뿐입니다.

 

 

sort() 메서드 활용 - 4. 문자의 내림차순 정렬

 

sort() 메서드를 이용한 문자의 내림차순 정렬은 왠지 막막할 수도 있겠습니다. 해본 적이 없다면요.

일단 앞에서 살펴봤던 것처럼 a-b 형태로 비교하면 어떻게 될까요?

const nums = [2, 4, 1, 3];
const str = ["B", "D", "A", "C"];

nums.sort(function (a, b) {
  console.log(a, b);
  return a - b;
});
console.log(nums);   //[1, 2, 3, 4]

str.sort(function (a, b) {
  console.log(a, b);
  return a - b;
});
console.log(str);   //['B', 'D', 'A', 'C']

 

숫자는 오름차순으로 정렬이 잘 되는 반면, 문자는 오름차순 정렬이 잘 안되고 있습니다. 그러면 내림 차순으로 바꿔서 해보면 어떻게 될까요? 역시 숫자는 내림차순으로 정렬이 잘 되지만, 문자는 동일하게 나타날 것입니다.

 

뭔가 희한한 느낌이 드는 지점이죠? 아무튼 문자는 저런 식으로 정렬을 하는 게 아닌 것이 됩니다. 물론 틀린 방법이긴 하지만, 왜 이런 현상이 나타나는 것인지 눈으로 확인해보면 좋겠죠? console.log로 다 찍어보는 거죠 뭐.

const nums = [2, 4, 1, 3];
const str = ["B", "D", "A", "C"];

nums.sort(function (a, b) {
  console.log("a: ", a, "b: ", b);
  console.log("b - a =", b - a);
  return b - a;
});
console.log(nums); //[4, 3, 2, 1]

str.sort(function (a, b) {
  console.log("a: ", a, "b: ", b);
  console.log("b - a =", b - a);
  return b - a;
});
console.log(str); //['B', 'D', 'A', 'C']

문자는 b-a를 해주는 경우, NaN이 나옵니다. 그래서 계산이 안되는듯요.

 

빼기 연산이 안되고는 있지만, 문자의 경우 부등호를 이용한 크기 비교는 가능하잖아요?

const a = "A";
const b = "B";

if (a < b) {
  console.log(`${a}보다 ${b}가 큽니다`);
} else if (a > b) {
  console.log(`${a}보다 ${b}가 작습니다`);
} else {
  console.log(`${a}와 ${b}는 같습니다`);
}

문자열은 사칙연산은 안되도, 크기 비교는 가능하다는 중요한 사실.

 

그러면, sort() 메서드는 a - b를 했을 때, 양수가 나오면 a를 배열의 우측으로 보내고, 음수가 나오면 B를 배열의 우측으로 보낸다고 했으니, 크기 비교를 통해서 양수/음수 형태를 return 해주면 되는 거 아닐까요?

 

말보다는 코드를 보고 확인하는데 더 간단하니까, 당장 코드를 살펴봅시다.

const str = ["B", "D", "A", "C"];

str.sort(function (a, b) {
  if (a > b) {
    return -1; //내림차순이니까 음수를 돌려줍니다.
  }
  if (a < b) {
    return 1;
  } else {
    return 0; // 같은 문자인 경우
  }
});
console.log(str); //['D', 'C', 'B', 'A']

배열 원소의 크기 비교를 통해, 내림차순(역순) 정렬을 완성했습니다

 

return 값으로 -1 또는 1을 준 것은 아무 숫자로나 음수 또는 양수를 주면 됩니다. 양수냐 음수냐 하는 것이 중요한 것 뿐이니까요. 저기에서 리턴값의 부호만 서로 바꿔준다면 당연히 오름차순 정렬이 되겠죠?

 

 

 

마치며

 

sort() 메서드의 동작원리만 잘 이해해둔다면, 숫자던 문자던 간에 활용할 수 있도록 단계를 나누어 정리를 해보았습니다. 저는 sort() 메서드를 가만히 살펴보자면, 아주 옛날에 만들어서 그렇겠지만... 너무 프로그래머 입장만 생각해서 만든 메서드라는 생각이 들곤합니다. 명령어의 활용자체가 좀 불친절하고 대중적이지 않다는 생각이 좀 들곤합니다.

 

하지만 그리 어려운 로직도 아니고 활용법도 간단하기에, 이참에 조금만 학습해둔다면 기묘한 Javascript의 골때리는 매력에 한층 더 빠져드는 변태스러운 생각도 생길지 모를 일 입니다. 아무튼 JS는 참 재미있습니다.

 

 

 

https://app.kincoding.com 

WANTED MBTI