[JavaScript] 문자열 비교의 원리 - 유니코드

[yunseorim1116]

[JavaScript] 문자열 비교의 숨은 원리 - 유니코드를 알면 쉽다!

JavaScript에서 문자열 비교가 어떻게 이루어지는지, 특히 숫자 문자열의 비교가 어떻게 동작하는지 알아보겠습니다.

유니코드란 무엇인가?

컴퓨터는 모든 문자를 숫자로 저장합니다. 이때 사용되는 것이 '유니코드'입니다. 숫자 문자(0-9)의 유니코드 값을 보면 다음과 같습니다:

"0" = 48
"1" = 49
"2" = 50
"3" = 51
"4" = 52
"5" = 53
"6" = 54
"7" = 55
"8" = 56
"9" = 57

문자열 비교는 어떻게 동작할까?

JavaScript에서 다음과 같은 코드를 보신 적 있나요?

javascriptCopyif (input >= "0" && input <= "9") {
    console.log("이건 숫자입니다!");
}

이 코드가 동작하는 원리를 살펴봅시다.

예시 1: input이 "5"일 때
javascriptCopy"5" >= "0" && "5" <= "9"

유니코드 값으로는
53 >= 48 && 53 <= 57 // true

예시 2: input이 "a"일 때
javascriptCopy"a" >= "0" && "a" <= "9"'

유니코드 값으로는
97 >= 48 && 97 <= 57 // false

⚠️주의할 점

여기서 중요한 점! 두 자리 이상의 숫자는 예상과 다르게 동작할 수 있습니다.
"12" >= "0" && "12" <= "9" // false
=> 왜냐구요?
"12"의 첫 번째 문자인 "1"만 비교하기 때문입니다. ("1"의 유니코드 값 = 49)

실제 숫자 비교가 필요하다면?

실제 숫자 값으로 비교하고 싶다면 Number()를 사용하세요:

Number("12") >= 0 && Number("12") <= 9  // false
Number("5") >= 0 && Number("5") <= 9    // true

정리

문자열 비교는 유니코드 값으로 이루어집니다.
숫자 문자("0""9")는 4857의 유니코드 값을 가집니다.
문자열 비교는 한 글자씩 이루어집니다.
두 자리 이상의 숫자는 Number()로 변환해서 비교하세요.

실제 활용 예시

javascriptCopyfunction validateInput(char) {
    // 한 글자 숫자인지 검증
    if (char >= "0" && char <= "9") {
        return "숫자입니다!";
    }
    return "숫자가 아닙니다!";
}

console.log(validateInput("5"));  // "숫자입니다!"
console.log(validateInput("a"));  // "숫자가 아닙니다!"
console.log(validateInput("12")); // "숫자가 아닙니다!" (주의!)

이 글의 예제들은 모두 실제 JavaScript 환경에서 테스트되었습니다.

[lukasjhan]

좋은글 감사해영. 컴퓨터가 문자를 표현하는 방법에대해서 아는것은 정말 중요하죠.
Javascript를 처음 배워서 썼을때 sort함수가 문자열 비교로 동작하는걸 보고 놀란적이 있었어요. C++을 주로 썼었던 저에겐 상상하지 못했던 방법이었거든요. 정작 C++을 썼었을때는 UTF-8이랑 UTF-16을 맞추느라 고생했었다죠. ㅎㅎㅎ

[yunseorim1116]

C++은 또 다르군요 ㅋㅋ 이래서 다양한 언어를 많이 배워봐야 하는 것 같습니다 !

[lukasjhan]

맞아요. C++같은 저수준 언어는 JS나 python같은 고수준언어에 비해 정말정말 어려운 문자열 처리 방식을 가지고 있어요 ㅠㅠ. 머리 부서질만큼 처리하기 어렵답니다. 유니코드는 UTF-8, 16, 32같은 표현법을 가지는데요. 한 글자를 표현하기위해 최대 4바이트까지 쓴답니다.

[lukasjhan]

운영체제 마다도 기본적으로 쓰는 표현법이 다르구요 ㅠㅠㅠㅠ

[yunseorim1116]

JavaScript sort() 함수의 숨겨진 비밀 - 문자열 비교 함정

• JavaScript 개발자들이 자주 마주치는 sort() 함수의 특징과 주의점

1. sort() 함수의 기본 동작

const fruits = ['banana', 'apple', 'orange'];
fruits.sort();
console.log(fruits); // ['apple', 'banana', 'orange']

이건 예상대로 동작하네요! 하지만...

2. 함정 발견! 숫자 정렬의 비극

const numbers = [1, 5, 10, 2, 30];
numbers.sort();
console.log(numbers); // [1, 10, 2, 30, 5] 😱

어라? 뭔가 이상하죠? 이게 바로 sort()의 숨겨진 비밀입니다.

왜 이런 일이 발생할까요?

개발자한테 가장 중요한건 "왜" 겠죠.
sort() 함수는 기본적으로 모든 요소를 _문자열로 변환_한 후 비교합니다: ###### (매우중요)

• 1 → "1"
• 5 → "5"
• 10 → "10"
• 2 → "2"
• 30 → "30"

문자열 비교에서는:

• "10"이 "2"보다 앞에 옵니다 (첫 글자 "1"이 "2"보다 작으므로)
• "30"이 "5"보다 앞에 옵니다 (첫 글자 "3"이 "5"보다 작으므로)

3. 해결 방법

3.1 숫자 정렬을 위한 비교 함수

const numbers = [1, 5, 10, 2, 30];

// 오름차순 정렬
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 2, 5, 10, 30]

// 내림차순 정렬
numbers.sort((a, b) => b - a);
console.log(numbers); // [30, 10, 5, 2, 1]

[lukasjhan]

한번 당한뒤로는 코드리뷰할때 sort함수 정말 유심히 본답니다 ㅎㅎㅎㅎ

[yunseorim1116]

저는 오름차순,내림차순 정렬 문법처럼 외워서 실제 사용할때 문제가 없긴 했는데, 모든 요소를 문자열로 반환해 비교한다는 비밀이 숨어있었군요.
엄청 흥미로웠습니다 ^ㅁ^ 역시 컴퓨터에 마법은 없다는거~~~

[lukasjhan]

마법은 없다는말 너무 멋집니다. ㅎㅎㅎㅎ
아마 JS구현하던 개발자도 sort를 처리하기 힘들어서 문자열로 바꿔서 처리해버린것 같네요 ㅠㅠㅠ

[yunseorim1116]

오오 좋은 추측입니다...
js로 개발을 처음 시작한 저에게 넘나 흥미로운 사실 !!^_^b