JavaScript/생활코딩

자바스크립트 기본 - 비교

점미 2018. 11. 14. 16:56



비교 - https://opentutorials.org/course/743/4722



비교는 다음 챕터인 조건문과 결합해야 프로그래밍적인 어떤 소스를 만들 수 있다.




a. 연산자

연산자는 어떠한 작업을 컴퓨터에게 지시하기 위한 기호

ex ) a = 1 에서 =는 대입연산자 -> a라는 변수에 1이라는 값을 대입해라





b. 비교연산자

두 개의 값을 비교하여 판별하는 연산자

비교연산자의 결과는 true, false 두 개의 값 중 하나를 갖게 된다.

true, false의 데이터형식은 boolean 이다. ( 1,2,3의 데이터형식이 number인 것과 비교하면 이해하기 쉽다)





  • ==

동등연산자

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


아래 두 가지는 다른의미를 가진 연산자이므로 같은 뜻이 아니다.

a = 1    -> 대입연산자

a ==1   -> 동등연산자



예제

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

<script>

alert(1==2)          

alert(1==1)         

alert("one"=="two")

alert("one"=="one")

</script>

</body>

</html>

예제를 크롬에서 열게 되면 차례대로 경고창으로 나타난다.

경고창 답

1. false

2. true

3. false

4. true









  • ===

일치연산자

좌항과 우항의 값이 정확하게 같은지 비교하는 연산자

같은의미인지 데이터의 형식이 같은지까지 비교하여 결과값을 낸다.



예제2

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

<script>

alert(1==="1")       //같은 의미, 데이터의 형식을 비교하기 때문에 다른 값으로 인식   

alert(1=="1")         //같은 의미인지 비교하기 때문에 같은 값으로 인식  

</script>

</body>

</html>

예제를 크롬에서 열게 되면 차례대로 경고창으로 나타난다.

경고창 답

1. false

2. true





예제3

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

<script>

  //null, undefined는 값이 없다는 의미의 데이터형식이지만 null은 의도적으로 값을 없게 지정, undefined는 의도하지 않는 값. 

  //null의 데이터형식은 null이며, undefined의 데이터형식은 undefined이다.

alert(null == undefined);         //같은 의미인지 비교하기 때문에 같은 값으로 인식

alert(null === undefined);       //같은 의미, 데이터의 형식을 비교하기 때문에 다른 값으로 인식 

alert(true == 1);                   //같은 의미인지 비교하기 때문에 같은 값으로 인식

alert(true === 1);                //true의 데이터형식은 boolean, 1의 데이터형식은 number이므로 다른 값으로 인식

alert(true == '1');                 //같은 의미인지 비교하기 때문에 같은 값으로 인식

alert(true === '1');              //true의 데이터형식은 boolean, "1"의 데이터형식은 string이므로 다른 값으로 인식 

 

alert(0 === -0);                

alert(NaN === NaN);      // 0/0의 결과가 NaN이다. NaN은 성립할 수 없는 값이며 계산할 수 없는 값이므로 false         

</script>

</body>

</html>

예제를 크롬에서 열게 되면 차례대로 경고창으로 나타난다.

경고창 답

1. true

2. false

3. true

4. false

5. true

6. false

7. true

8. false









  • != , !==
!는 부정을 의미한다.

!= 는 ==의 반대뜻이며
!==는 ===의 반대뜻이다.
 

예제4

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

<script>

alert(1!=2);            

alert(1!=1);            

alert("one"!="two");    

alert("one"!="one");             

</script>

</body>

</html>

예제를 크롬에서 열게 되면 차례대로 경고창으로 나타난다.

경고창 답

1. true

2. false

3. true

4. false









  • >, >=
좌항이 우항보다 클 경우 true, 작을 경우 false을 반환하는 연산자

>는 크다,작다를 비교한다.
>= 크거나같다, 작거나같다를 비교한다.

예제5

<!DOCTYPE html>

<html>
<head>
<title></title>
</head>
<body>
<script>
alert(10>20);   
alert(10>1);    
alert(10>10);    
alert(10>=20);      
alert(10>=1);       
alert(10>=10);        
</script>
</body>
</html>

예제를 크롬에서 열게 되면 차례대로 경고창으로 나타난다.

경고창 답

1. false

2. true

3. false

4. false

5. true

6. true