Javascript 기본

뉴비·2024년 10월 19일

열정반

목록 보기
1/4

비교연산자

연산자설명예시결과
==두 값이 같은 경우 true (타입은 고려하지 않음)5 == "5"true
!=두 값이 다른 경우 true (타입은 고려하지 않음)5 != "3"true
===두 값과 타입이 모두 같은 경우 true5 === 5true
!==두 값 또는 타입이 다른 경우 true5 !== "5"true
>왼쪽 값이 오른쪽 값보다 큰 경우 true10 > 5true
<왼쪽 값이 오른쪽 값보다 작은 경우 true3 < 7true
>=왼쪽 값이 오른쪽 값보다 크거나 같은 경우true 5 >= 5true
<=왼쪽 값이 오른쪽 값보다 작거나 같은 경우true 2 <= 5true

예시:

let a = 10;
let b = 5;
console.log(a > b);   // true
console.log(a < b);   // false
console.log(a == b);  // false
console.log(a != b);  // true
console.log(a === b); // false
console.log(a !== b); // true
console.log(a >= b);  // true
console.log(a <= b);  // false   
console.log(5 == "5");  // true (타입이 달라도 값이 같으므로 true)
console.log(5 === "5"); // false (타입이 다르므로 false)```
  • ==(동등연산자)는 '추상적(abstract) 같음 비교'로써 자료형이 서로 다르더라도 같다고 판단할 수 있고 ===(일치연산자)는 '엄격한(strict)같음 비교'로써, 자료형과 데이터가 모두 일치해야만 같다고 판단한다.
  • ==(동등연산자) 와 !=(부등 연산자) 연산자는 타입을 고려하지 않고 값만 비교합니다. 엄격한 비교를 위해서는 === 와 !== 를 사용하는 것이 좋다.
  • ==(동등연산자) 와 !=(부등 연산자)는 타입을 비교하지 않기 때문에 원하는 결과 값을 반환 하지 못하는 경우가 생기기도 한다. 그렇기 때문에 값과 타입을 모두 비교하는 ===(일치연산자)와 !==(불일치 연산자)를 이용하여 값을 비교하는 것을 추천한다.

불린형 반환

다른 연산자와 마찬가지로 비교 연산자 역시 값을 반환한다. 반환 값은 불린형이다.
true가 반환되면, ‘긍정’, ‘참’, '사실’을 의미한다.
false가 반환되면, ‘부정’, ‘거짓’, '사실이 아님’을 의미한다.

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

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

문자열간의 비교

JavaScript의 문자열값은 '사전'순(Alphabetically)으로 비교한다. '사전편집(lexciographical)'순이라고도 불린다. 이 순서 비교의 기준은 사전 뒤쪽의 문자열이 사전 앞쪽의 문자열보다 크다고 판단한다.
(정확히는 사전 순이 아니라 utf-16 순이다. 자바스크립트는 대 소문자를 따지기 때문에 대문자 A와 소문자 a를 비교 했을 때 소문자 a가 더 크다.)
비교 연산자를 사용해서 문자열간의 크기를 비교할 수 있다. 알파벳 순서에 따라서
크기가 결정되고, 소문자는 대문자보다 크며 z는 a보다 크다.
다만 문자열간을 비교할 때, 규칙에서 벗어나는 예외 상황이 있다.

  • utf-16이란?
    자바스크립트 문자열의 표현 방식 중 하나로 흔히 볼 수 있는 문자열 인코딩 방식이다.
    우리가 사용하는 문자를 비트(bits)로 나타낸 것이다.

예시

  alert( 'a' > 'Z' );	// true, 소문자는 대문자보다 크다.
alert( 'Österreich' > 'Zealand' );	// true

// true, 발음 구별 기호가 붙은 문자는 알파벳 순서 기준을 따르지 않음
// 발음 구별 기호가 아닌 일반 O 였다면, false가 나왓을 것

다른 형을 가진 값 간의 비교

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

예시

console.log('2' > 1); //true; 문자열 2('2')가 숫자 2로 변환된 후 비교
console.log('01' = 1); //true; 문자열 '01'이 숫자 1로 변환된 후 비교
__boolean값의 경우 true1, false0으로 변환된 후 비교가 이루어집니다.__
console.log(true == 1); // true
console.log(false == 0); // true

예시2

let a = 0;
console.log(Boolean(a));	// false
let b = "0";
console.log(Boolean(b));	// true; 문자열의 값은 Boolean형으로 1
console.log(a == b); 		// true;

이런값이 나타나는 이유는 ==(동등 비교 연산자; equality operator)는 값의 형을 b의 문자열 "0"을 숫자 0으로 변환하여 비교하게 된다. ==은 유형변환 비교를 하기 때문에 비교하는 두 값을 비교한다.

일치 연산자

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

예시

console.log(0 == false); 	// true
console.log(' ' == false);	// true

동등 연산자(==)가 형이 다른 피연산자를 비교할 때 피연산자를 숫자형으로 바꾸기 때문에 발생한다.(빈문자열' ',false는 숫자형으로 변환하면 0 이다.)
그렇다면 0과 false를 구별할 수 있는 방법은 일치 연산자(strict equality operator) ===를 사용하면 형 변환 없이 값을 비교하고 구별할 수 있다.

예시

alert( 0 === false ); // false, 피연산자의 형이 다르기 때문이다.

null과 undefined 비교

  일치 연산자(===)를 사용하여 null과 undefined를 비교
두 값의 자료형의 값이 다르기 때문에 거짓(false)가 반환된다.
예시
console.log(null === undefined); // false

동등 연산자(==)를 사용하여 null과 undefined를 비교

  둘을 동등 연산하게 되면 true가 반환된다. 둘다 '없다'라는 값 자체로서 비교하게 되면 결국 같은 것이다.

예시

console.log(null == undefined);		// true
 ```
  산술 연산자나 기타 비교 연산자 <, >, <=, >=를 사용하여 nullundefined를 비교하면
  nullundefined는 숫자형으로 변환한다. null0, undefinedNaN(Not a Number)으로 변환된다.

null vs 0

  null과 0을 비교

예시

console.log(null > 0);	// false
console.log(null == 0); // false
console.log(null >= 0);	// true
  ```
기타 비교 연산자(>, <, >=, <=)를 사용하게되면 null0으로서 비교된다.

비교가 불가능한 undefined
undefined를 다른 값과 비교해서는 안 된다.

예시

console.log(undefined > 0);		// false
console.log(undefined < 0);		// false
console.log(undefined == 0);    // false	
           ```              
  - 1, 2번 줄은 undefinedNaN으로 변환되어 다른 값과 비교 연산할 경우 항상 false를 반환한다. 
  - 3번 줄에서 undefinednull과 같다. 그리고 그 이외의 값과는 같지 않기 때문에 false를 반환한다.
profile
뉴비입니다

0개의 댓글