자바스크립트 - 비교

오늘은 자바스크립트의 비교 연산자에 대해서 알아보려고 한다.

 

 

자! 여기서 연산자란?

→ 값에 대해서 어떤 작업을 컴퓨터에게 지시하기 위한 기호이다.

 

우리는 이전에 이미 연산자를 사용했다.

그것은 바로 a에 1을 넣게 해주는 대입 연산자이다.

a = 1 // 대입 연산자
1 = 2 // 1에 2를 대입할 수 없기 때문에, 이러한 경우를 상수라 한다.

 

 

그러면 프로그래밍에서 비교란 무엇인가?

→ 주어진 값들이 같은지, 다른지, 큰지, 작은지를 구분하는 것을 의미한다.

 

 

이때 비교 연산자를 사용하는데 비교 연산자의 결과는 true / false 중 하나이다.

true는 비교 결과가 참이라는 것을 뜻하고. false는 거짓을 의미한다.

또, true와 false는 boolean이라는 데이터 형식을 지니고 있다.

 

 

그러면 여기서 데이터 타입을 집고 가자!

-1, 0, 1, 2, 3 → Number

"a", "b", "c" → String

undefined →undefined

null → null

 

 

또 어떤 연산자들이 존재할까?

 

 

"==" 와"==="에 대해서 알아보자.

 

== 은 동등 연산자(equal operator)로 좌항과 우항을 비교해서 서로 값이 같으면 true, 다르면 false가 된다.

'='가 두 개인 것을 주의하자!

alert(1==2)             // 결과: false
alert(1==1)             // 결과: true
alert("one"=="two")     // 결과: false 
alert("one"=="one")     // 결과: true

'='가 하나인 것은 대입 연산자로 우항의 값을 좌항의 변수에 대입할 때

사용하는 것으로, "=="와는 의미가 완전히 다르다.

 

 

=== 은 일치 연산자(strict equal operator)로 좌항과 우항이 '정확'하게 같으면 true, 다르면 false가 된다.

alert(1=='1');       // 결과: true
alert(1==='1');      // 결과: false

 

결과를 보면, === 는 숫자 1과 문자 1을 다르게 인식하고 있다.

반면에, == 는 양쪽의 값을 같은 의미, 정보로 같다고 판단하고 있다.

 

 

바로 이것이 '정확'의 의미이다.

즉, === 는 서로 같은 수를 표현하고 있더라도 데이터 형이 같은 경우에만 같다고 판단하기 때문이다.

데이터 타입이 다른 데이터는 아예 다른 정보이기 때문에, == 대신에 ===를 쓰는 것을 권장한다.

 

 

더 몇 가지 예시를 들어보겠다.

alert(null == undefined);       // 결과: true
alert(null === undefined);      // 결과: false
alert(true == 1);               // 결과: true
alert(true === 1);              // 결과: false
alert(true == '1');             // 결과: true
alert(true === '1');            // 결과: false
 
alert(0 === -0);                // 결과: true
alert(NaN === NaN);             // 결과: false

null과 undefined는 값이 없다는 의미의 데이터 형이다.

null은 값이 없음을 명시적으로 표시한 것이고, undefined는 그냥 값이 없는 상태라고 생각하자.

주의!

자바스크립트 안에 == 에서 숫자 1을 true로 간주하고, 1이 아닌 모든 수를 false로 간주한다.

 

NaN은 0/0과 같은 연산의 결과로 만들어지는 특수한 데이터 형인데 숫자가 아니라는 뜻이다.

그냥 알고만 넘어가자!

 

 

 

 

그다음 부정에 대한 연산자를 알아보자.

 

'!'는 부정을 의미하고, "같다"의 반대라고 생각하면 된다.

이것을 기호로 '!='로 표시한다.

alert(1!=2);            //결과: true
alert(1!=1);            //결과: false
alert("one"!="two");    //결과: true
alert("one"!="one");    //결과: false

결과를 보면 !=의 결과는 ==와 정반대의 결과를 보여준다.

 

또, '!==' 은 "정확하게 다르냐"를 뜻하며, 결과 또한 ===와 정반대의 결과를 보여준다.

 

이외에,

'>' 은 좌항이 우항보다 크다면 참, 그렇지 않다면 거짓임을 알려주는 연산자다. '<'는 반대의 의미로 생략.

alert(10>20);   // 결과: false
alert(10>1);    // 결과: true
alert(10>10);   // 결과: false

 

'>=' 은 좌항이 우항보다 크거나 같다. '<='는 반대의 의미로 언급은 생략.

alert(10>=20);      // 결과: false
alert(10>=1);       // 결과: true
alert(10>=10);      // 결과: true