[Js] 비교 연산자 | javascript 연산자 | 연산자

해당 포스팅은 "생활코딩"의 이고잉 님의 강의를 기반으로 올린 게시글 입니다.

상업적인 용도가 아닌, 개인 공부 정리 목적으로 올리는 글임을 미리 알립니다.

 

 

---

 

값과 값이 있을 때, 두 값이 같은지 혹은 어떠한 쪽이 큰지 판별하는 것을

"비교" 라고 한다.

 

 

연산자란?

어떠한 작업을 컴퓨터에게 지시하기 위한 기호를 말한다.

연산자란 값에 대해서 어떤 작업을 컴퓨터에게 지시하기 위한 기호인데 우리는 이미 연산자를 사용했다.

아래 예제 중에서 '='는 우항의 값인 1을 좌항의 변수 a에 대입하는 '대입 연산자'다.
본 수업은 연산자가 무엇인가에 대한 이해를 돕기 위한 것일 뿐 외울 필요는 없다. 차차로 알게 된다.

a = 1  // a : 변수 , = : 대입연산자, 1 : 상수

 

 

비교 연산자

좌항이 있고 우항이 있을 때, 두개가 같은지, 혹은 어떠한 값이 큰지, 작은지 또는 같거나 작은지, 크거나 작은지 

등을 비교하는 것이다.

 

프로그래밍에서 비교란 주어진 값들이 같은지, 다른지, 큰지, 작은지를 구분하는 것을 의미한다.
이 때 비교 연산자를 사용하는데 비교 연산자의 결과는 true나 false 중의 하나다.

true는 비교 결과가 참이라는 의미이고, false는 거짓이라는 뜻이다.
true와 false는 블린(boolean)이라고 불리는 데이터 형식인데 이것은 조건문에서 비중있게 다룰 것이다.
아래는 주요한 비교 연산자들의 종류와 그에 따른 예제들이다.

 

연산자는 기호로 이루어져 있다.

 

 

---

 

 == : 동등 연산자 (equal operator)

 

동등 연산자로 좌항과 우항을 비교해서 서로 값이 같다면 true 다르다면 false가 된다.

 

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

 

'='가 하나인 것은 대입 연산자로 우항의 값을 좌항의 변수에 대입할 때 사용하는 것으로 의미가 완전히 다르다.

 

<script>

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

</script>

 

 

=== : 일치 연산자 (strict equal operator)

 

일치 연산자로 === 좌항과 우항이 '정확'하게 같을 때 true 다르면 false가 된다.

 

여기서 정확하다는 말의 의미에 집중하자.

 

아래 예를보자.

 

<script>
	
    alert(1=='1');              //true
    alert(1==='1');             //false

</script>

 

즉, 정보가 같고 데이터의 형식도 정확히 같을 때만 일치하다고 하는 것이다.

 

바로 이것이 '정확'의 의미다. 즉 ===는 서로 같은 수를 표현하고 있더라도

데이터 형이 같은 경우에만 같다고 판단하기 때문이다.

 

결론부터 말하면 == 연산자 대신 === 연산자를 쓰는 것을 강력하게 권한다.

 

---

 

위와 같이 == 는 작은 프로그램에서는 편할 수 있지만,

 

큰 프로그램을 만들 때는  버그를 발생시키기 쉬운 상황을 발생시킨다.

 

 

프로그램에서는 데이터 타입이 다른 것은 엄연히 다른 것이기 때문에, '==' 보다 '=== ' 을 사용하는 것을 적극 추천 한다.

 

코드를 작성할 때 오류가 있는것이, 프로그램이 동작 될 때 오류가 발견되는 것보다 훨씬 좋은 것이다.

 

 

---

 

몇가지 사례를 더 살펴보자.

(같은 의미를 가지고 있다면, 같다고 인정해주는 것이 ==임)

 

 

 

null = 값이 없다는 의미이다.

<script>
      var a = null;
      alert(a); //null이 뜸. 값이 없다는 뜻 (프로그래머가 의도하여 지정한 상황)
</script>

 

 

undefined = 값이 정의되지 않았다.

ex) 존재는 하되, 어떠한 값도 들어있지 않다는 뜻이다.

<script>
      var a;
      alert(a); //undefined 뜸. 변수가 정의 되었지만 값이 없음.
</script>

 

 

즉 프로그래머가 의도 했건, 의도하지 않았건 값이 없다는 것만 따지는 것이 동등 연산자 이고,

값이 없는 것보다 프로그래머의 의도를 더 파악하는 것이 일치 연산자 이다.

 

<script>
    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
</script>

/*
null과 undefined는 값이 없다는 의미의 데이터 형이다. 
null은 값이 없음을 명시적으로 표시한 것이고, undefined는 그냥 값이 없는 상태라고 생각하자.

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

 

true / false = 데이터의 형식이다.

 

이 두가지의 값을 묶어서 분리하자면 Boolean이라는 카테고리에 분류 된다.

 

 

데이터의 성격에 따라 데이터의 형식이 존재한다. (데이터 타입)

데이터 타입 : 데이터

boolean : true, false
number : -1, 0, 1, 2, 3, ...
string : "a", "b", "c" 
undefined : undefined
null : null

 

 

!=

 

'!'는 부정을 의미한다. '같다'의 부정은 '같지 않다'이다.

이것을 기호로는 '!='로 표시한다. 아래의 결과는 !=의 결과인데 ==와 정반대의 결과를 보여준다.

<script>
    alert(1!=2);            //true
    alert(1!=1);            //false
    alert("one"!="two");    //true
    alert("one"!="one");    //false
</script>

 

!==

'!=='는 '!='와 '=='의 관계와 같다. 정확하게 같지 않다는 의미다. 예제는 생략한다.

 

 

>

 

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

<script>
    alert(10>20);   //false
    alert(10>1);    //true
    alert(10>10);   //false
</script>

 

>=

 

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

<script>
    alert(10>=20); //false
    alert(10>=1); //true
    alert(10>=10); //true
</script>

 

 

 

참고 : dorey.github.io/JavaScript-Equality-Table/

JS Comparison Table

▲ == 와 ===의 차이점