[javascript 언어공부] 비교

이번시간에는 비교라는 주제를 다뤄보자.

값과 값이 있을 때 두개의 값이 같은지, 어떤 것이 큰지 판별하는 것이 비교이다.

이는 추후에 배울 조건문과 결합했을 때 큰 힘을 발휘한다.

우선 비교에 대한 이야기를 들어가기 전에 연산자에 대해서 먼저 알아보자.

연산자란, 어떤 작업을 컴퓨터에 지시하기 위한 기호이다.

먼저 대입연산자에 대해서 알아보자. 

ex) a=1 //a라는 변수에 1이라는 변수에 대입한다 

여기서 a는 변수이며, 1은 값(상수-변하지 않는 수)이고, 그 중간에 있는 이콜(=)은 대입연산자(좌항에 있는 값을 우항에 대입한다)이다. 

컴퓨터에 a라는 값에 1을 대입하라 라는 명령을 하는 것이다.

a=1

a=2 는 가능하고, 따라서 a는 변수이지만

1=2 라고는 할 수 없기 때문에 상수(변하지 않는 값)라고 하는 것이다.

이번에는 비교연산자에 대해서 알아보자. 

비교연산자는 a==b , a>b, a<b, a>=b, a<=b 를 판별하는 연산자가 비교연산자이며, 

비교 연산자를 통해서 만들어진 결과는 true, false 라는 값중 하나를 갖게 되는데,

true, false는 불리언(boolean)이라는 데이터 타입이다. 

이번에는 동등연산자에 대해서 알아보자.

== 이렇게 생긴 기호는 동등연산자라 하며 equal operator라고 한다. 

이것은 좌항과 우항을 비교해서 서로 값이 같다면 true, 다르면 false가 된다.

alert(1==2); //false

alert(1==1); //true

이는 숫자만 비교할 수 있는 것이 아니고, 문자와 같은 데이터타입 비교도 가능하다. 

alert('one'=='two') //false

alert('one'=='one') //true

그렇다면 

a = 1과 a == 1이 같을까?

a = 1은 대입연산자로서, 우항의 값을 좌항에 대입하는 역할을 한다.

a == 1은 동등연산자로서 좌항과 우항의 값이 같으면 true, 다르면 false를 만들어준다. 

=== 이렇게 3개 들어가는 동등영산자도 있다.

두개(==)는 equal operator이고

세개(===)는 strict equal operator (엄격한 동등 연산자) 이다. 

만약 alert(1==='1') .를 실행하면 false가 return된다. //false

하지만 alert(1 == '1')을 실행하면 true가 return된다.

즉 ===는 좌항과 우항의 값 뿐 아니라 데이터 형식도 같아야 true가 되며,

==는 좌항과 우항의 값이 데이터 타입이 다르더라도 실질정 정보가 같으면 같은값으로 인정해준다.

이는 자바스크립트라는 언어가 갖고 있는 특성을 잘 보여주는 사례로,

전통적으로 프로그래밍에서 데이터는 엄격하게 바라보는 대상인데, 

같은 정보를 갖더라도 데이터 형식이 다르면 전혀 다른 데이터로 취급하는 것이 프로그래밍의 일반적 정서이지만,

javascript는 같은 의미 갖고 있다면 그냥 인정해주는 기능을 제공하고 있다.

이는 작은 프로그래밍에서는 편리하지만

큰 프로그래밍 에서는 한번 버그가 발생하면 겉잡을 수 없을 수도 있다.

따라서 ==보다는 ===를 사용할 것을 강력 추천한다. 

좀 더 심화된 내용을 살펴보자.

null은 값이 없다는 뜻이고, undefined는 값이 정의되지 않았다는 뜻이다.

예를 들어

var a;

alert(a); 를 하면 undefined가 뜬다. 이는 a라는 변수가 존재하긴 하는데, 그 안에 어떠한 값도 현재 정의되지 않았다는 뜻이다.

만약 변수를 만들 때, 

var a = null; //값이 없는

alert(a) 를 하면 null이 뜬다.

정의되지 않은 것다 값이 없는 것은 의미론적으로는 대충 비슷한데

아주미세하고 중요한 차이가 있다.

undefined 는 값이 없다는 뜻이고

null은 값이 없는데, 프로그래머가 의도적으로 값이 없는 상태를 부여한 상황을 의도적으로 지정한 상황이다. 

그러면 이 두가지의 값을 비교해보면

alert(null == undefined);       //true

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

즉 프로그래머가 의도했던 의도하지 않았던 ==는 똑같이 값이 없다는 뜻으로 해석되는 것이고

===는 둘다 값이 없다라는 뜻이 같더라도 엄격하게 보면 프로그래머가 의도한 것과 의도하지 않은 것에 차이가 있기 때문에 다르다는 뜻이다.

이제 아까 했던 true/false를 좀 더 알아보자. 

true 라는 것은, false라는 것은 데이터의 형식이며, 이 두가지를 묶어서 boolean이라는 카테고리에 분류한다. 

-1, 0, 1, 2, 3 이런 것은 number라는 카테고리에 분류하며

'a', 'b', 'c'는 string 카테고리에 분류된다. 

number와 string은 아주 많은 정보가 카테고리에  포함되지만,

boolean은 단 두개의 데이터(true/false)만 존재한다.

null, undefined는 각각의 데이터 타입으로 분류된다.

만약 alert(true)라고 치면 true가 출력된다.

alert(true == 1);               //true

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

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

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

==에서는 1을 true로 간주하고, 1(숫자,문자)이 아닌 경우를 false로 간주한다.

하지만 ===에서는 다르게 인식된다.

그리고  

alert(0 === -0);                //true

alert(NaN === NaN);             //false

=== 에서는 결국 0이라는 숫자가 같고 결국 같은 것을 나타내기 때문에 true이며,

NaN이라는 것은 0/0일때 (성립하지 않는 수)는 NaN이라는 데이터 타입을 가지며 

NaN은 계산할 수 없음 이라는 결과에 불과하기 때문에

NaN === NaN은 false라는 것을 기억해두자.

https://dorey.github.io/JavaScript-Equality-Table/  

사이트에 접속해보면 == 인 경우의 예외 경우가 너무 많다.

따라서 ===를 이용하는 것이 훨씬 좋다.

참고: [===에서는 false , ==에서는 true가 되는 경우 - ]

alert(true==true);

alert(true == 1);

alert(true == '1');

alert(true == [1]);

alert(false == 0);

alert(false == "0");

alert(false == "");

alert(false == []);

alert(false == [[]]);

alert(false == [0]);

alert(1 == "1");

alert(1 == [1]);

alert(0 == '0');

alert(0 == []);

alert(0 == [[]]);

alert(0 == [0]);

alert(-1 == '-1');

alert('1' == [1]);

alert('0' == [0]);

alert(""==[]);

alert(""==[[]]);

alert(null == undefined); 

참고: [===와 ==에서 모두 false인 경우]

alert([] == []);

alert({}=={});

alert([[]]==[[]]);

alert([0]==[0]);

alert([1]==[1]);

alert(NaN==Nan);

다음으로 !라는 기호를 살펴보자.

!는 보통 부정을 의미한다.

1==2를 비교하면 그 결과는 false이지만

1!=2의 결과는 true가 된다.

1==1은 true이지만

1!=1은 false가 된다. 

!==도 있는데, 이것은 마치 

==와 ===와의 관계와 같다.

예를 들어 alert(1!=='1')은 true이지만

alert(1!='1')은 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

따라서 alert(10>10);은 false이지만

alert(10>=10);은 true이다.