비교 연산자

찬찬잉·2022년 3월 8일
0
post-thumbnail

해당 공부는 아래의 링크를 보며 작성하였습니다. 전 쓰면서 공부해야 공부가 되는 타입이라 해당 내용은 동일합니다. 다만 초보자로 제가 이해 안되는 부가 설명은 더 적어놧습니다.
https://ko.javascript.info/comparison

비교 연산자

자바스크립트에서 기본 수학 연산은 아래와 같은 문법을 사용해 표현할 수 있습니다.

  • 보다 큼·작음: a > b, a < b
  • 보다 크거나·작거나 같음: a >= b, a <= b
  • 같음(동등): a == b. 등호 =가 두 개 연달아 오는 것에 유의하세요. a ​​= b와 같이 등호가 하나일 때는 할당을 의미합니다.
  • 같지 않음(부등): 같지 않음을 나타내는 수학 기호 는 자바스크립트에선 a != b로 나타냅니다. 할당연산자 = 앞에 느낌표 !를 붙여서 표시합니다.

불린형 반환

다른 연산자와 마찬가지로 비교 연산자 역시 값을 반환합니다. 반환 값은 불린형입니다.

  • true가 반환되면, 긍정, , 사실을 의미합니다.
  • false가 반환되면, 부정, 거짓, 사실이 아님을 의미합니다.
  alert( 2 > 1 );  // true
  alert( 2 == 1 ); // false
  alert( 2 != 1 ); // true

반환된 불린값은 다른 여타 값처럼 변수에 할당 할 수 있습니다.

  let result = 5 > 4; // 비교 결과를 변수에 할당
  alert( result ); // true

let 변수를 선언하여 result라는 변수에 5보다 4가 작다라는 true 값을 지정합니다.
그 후 alert을 통해 result 값을 확인하면 true 되는것이지요

문자열 비교

자바스크립트는 '사전'순으로 문자열을 비교합니다.
'사전 편집(lexicographical)'순 이라고 불리기도 하는 이 기준을 적용하면 사전 뒤쪽의 문자열은 사전 앞쪽의 문자열보다 크다고 판단됩니다.

실제 단어를 사전에 실을 때 단어를 구성하는 문자 하나하나 비교하여 등재 순서를 정하는 것과 같이 자바스크립트도 문자열을 구성하는 문자 하나하나를 비교해가며 문자열을 비교합니다.

  alert( 'Z' > 'A' ); // true
  alert( 'Glow' > 'Glee' ); // true
  alert( 'Bee' > 'Be' ); // true

문자열 비교 시 적용되는 알고리즘은 다음과 같습니다.

  1. 두 문자열의 첫 글자를 비교합니다.
  2. 첫 번째 문자열의 첫 글자가 다른 문자열의 첫 글자보다 크면(작으면), 첫 번째 문자열이 두 번째 문자열보다 크다고(작다고) 결론 내고 비교를 종료합니다.
  3. 두 문자열의 첫 글자가 같으면 두 번째 글자를 같은 방식으로 비교합니다.
  4. 글자 간 비교가 끝날 때까지 이 과정을 반복합니다.
  5. 비교가 종료되었고 문자열의 길이도 같다면 두 문자열은 동일하다고 결론 냅니다. 비교가 종료되었지만 두 문자열의 길이가 다르면 길이가 긴 문자열이 더 크다고 결론 냅니다.

정확히는 사전순이 아니라 유니코드 순입니다.

다른 형을 가진 값 간의 비교

비교하려는 값의 자료형이 다르면 자바스크립트는 이 값들을 숫자형으로 바꿉니다.

  alert( '2' > 1 ); // true, 문자열 '2'가 숫자 2로 변환된 후 비교가 진행됩니다.
  alert( '01' == 1 ); // true, 문자열 '01'이 숫자 1로 변환된 후 비교가 진행됩니다.

불린 값의 경우 true1, false0으로 변환된 후 비교가 이루어집니다.

  alert( true == 1 ); // true
  alert( false == 0 ); // true

일치 연산자

동등 연산자(equality operator) ==0false를 구별하지 못합니다.

	alert( 0 == false ); // true

피연산자가 빈 문자열일 때도 같은 문제가 발생.

	alert( '' == false); //true

이런 문제는 동등 연산자 ==가 형이 다른 피연산자를 비교할 때 피연산자를 숫자형으로 바꾸기 때문에 발생합니다. 빈 문자열과 false는 숫자형으로 변환하면 0이 되죠.
그렇다면 0false는 어떻게 구별할까?

일치 연산자 (strict equality operator) '===' 를 사용하면 형 변환 없이 값을 비교할 수 있습니다.

일치 연산자는 엄격한 (strict) 동등 연산자입니다. 자료형의 동등 여부까지 검사하기 때문에 피연산자와 ab의 형이 다를 경우 a === b는 즉시 false를 반환합니다.

null이나 undefined와 비교하기

null이나 undefined를 다른 값과 비교할 땐 예상치 않은 일들이 발생합니다.

일치 연산자 ===를 사용하여 null과 undefined를 비교

두 값이 자료형이 다르기 때문에 일치 비교 시 거짓이 반환됩니다.

	alert( null === undefined ); // false

동등 연산자를 사용해 nullundefined를 비교하면 특별한 규칙이 적용돼 true가 반환됩니다. 동등 연산자는 nullundefined를 '각별한 커플'처럼 취급합니다. 두 값은 자기들끼리는 잘 어울리지만 다른 값들과는 잘 어울리지 못합니다.

	alert( null == undefined ); // true

산술 연산자나 기타 비교 연산자 <, >, <=, >=를 사용하여 nullundefined를 비교 nullundefined는 숫자형으로 변환됩니다.

null0, undefinedNaN으로 변합니다.

요약

  • 비교 연산자는 불린값을 반환합니다.
  • 문자열은 문자 단위로 비교되는데, 이때 비교 기준은 사전순입니다.(정확하겐 유니코드 순서이다.)
  • 서로 다른 타입의 값을 비교할 땐 숫자형으로 형 변환이 이뤄지고 난 후 비교가 진행됩니다. (일치 연산자는 제외)
  • nullundefined는 동등 비교 (==)시 서로 같지만 다른 값과는 같지 않습니다. === 경우엔 같지않음
  • null이나 undefined가 될 확률이 있는 변수가 >또는<의 피연산자로 올 때는 주의를 기울이시기 바랍니다. null,undefined 여부를 확인하는 코드를 따로 추가하는 습관을 들이면 좋습니다.
profile
디자이너, 기획자 출신의 개발자

0개의 댓글