JavaScript

비교

프로그래밍의 비교 기능은 이것만으로는 효용이 크지 않다. 후속 수업인 조건문에서 그 효용이 드러나기 때문에 조금 지루하더라도 조건문까지만 인내하자.

연산자

연산자란 값에 대해서 어떤 작업을 컴퓨터에게 지시하기 위한 기호인데 우리는 이미 연산자를 사용했다. 아래 예제 중에서 '='는 우항의 값인 1을 좌항의 변수 a에 대입하는 '대입 연산자'다. 본 수업은 연산자가 무엇인가에 대한 이해를 돕기 위한 것일 뿐 외울 필요는 없다. 차차로 알게 된다.

a=1

비교 연산자

프로그래밍에서 비교란 주어진 값들이 같은지, 다른지, 큰지, 작은지를 구분하는 것을 의미한다. 이 때 비교 연산자를 사용하는데 비교 연산자의 결과는 true나 false 중의 하나다. true는 비교 결과가 참이라는 의미이고, false는 거짓이라는 뜻이다. true와 false는 블린(boolean)이라고 불리는 데이터 형식인데 이것은 조건문에서 비중있게 다룰 것이다. 아래는 주요한 비교 연산자들의 종류와 그에 따른 예제들이다.

==

동등 연산자로 좌항과 우항을 비교해서 서로 값이 같다면 true 다르다면 false가 된다. '='가 두개인 것을 주의하자. '='가 하나인 것은 대입 연산자로 우항의 값을 좌항의 변수에 대입할 때 사용하는 것으로 의미가 완전히 다르다.

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

===

일치 연산자로 === 좌항과 우항이 '정확'하게 같을 때 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는 그냥 값이 없는 상태라고 생각하자.

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

참고

댓글

댓글 본문
작성자
비밀번호
  1. 감사합니다!!!
  2. 완료!
    완료! 감사합니다.
  3. 솔군
    2016.10.06 강의 시청
  4. 비티민C플러스
    해당 영상 우측하단 설정에서 변경가능합니다.
    대화보기
    • 강부장짤
      1.5베 속도로 듣는거 어떻게 하는 건가요?
    • wonhee lee
      ==와 ===의 차이 궁굼해서 구글링해서도 못찾았는데 드디어 알게되었네요!
    • 동찜
      감사합니다
    • 김철수
      1.5배속으로 강의를 듣는 사람입니다.
      오늘 처음 정속으로 들어보고 목소리가 좋으시구나 느꼈습니다.
    • yihsang
      감사합니다.
    • Rhys Jung
      거듭 감사드립니다.
    • kimhomework
      감사합니다
    • joo0914krs
      감사합니다
    • JustStudy
      고맙습니다
    • Byeong Koo Kang
      좋은 강의 감사합니다.
    • 삼십대학생
      좋은 강의 감사합니다. 늘 정말 수고 많으십니다.
    • Ella Halevi
      수업 잘들었습니다 선생님 엘라
    • 리치
      좋은강의 감사합니다.
    • ff
    • gg
    • 존코더
      아래 통조림님의 댓글에 오류가 있어 정정 의견 드립니다.

      ' !==' 와 '!=' 관계는 '===' 와 '=='의 관계와 같다. 가 true 입니다.;;; 참고하시길 ^^
    • 통조림
      '!=='는 '!='와 '=='의 관계와 같다. -> 이부분...
      '!=='와 '!='의 관계는 '=='와 '='의 관계와 같다. -> 이렇게 설명하면 더 직관적일 것 같아요!^^;
    • gagdoc
      와... 고맙습니다
    • 아라횽
      HTML, CSS , Javascript까지 잘 보고 있습니다. 감사합니다. 이고잉님~
    • pupu
      항상 차분하게 쉽게 설명을 해주시네요. 감사합니다.
    • kush
      이고잉님 입장에서는 정말 너무 기초적인 강의이실텐데도 꼼꼼하게 강의해주셔서 정말 감사합니다. 설레는 맘 갖고 조건문 들으러가겠습니다~
    • YellowBall
      잘 들었습니다.
    • 늘생릭코네
      영상 굿
    • 이네스김
      최고
    • 민팀장
      동영상보고나서 댓글을 꼭 봐야 밥먹고 나서 숭늉으로 마무리한 느낌!
    • 조신부리
      감사합니다
    • 생각없음
      그러니까 일치 연산자는 "내용" 만이 아닌 "종류" 까지 확인하는 연산자라는 거네요 ㅋㅋ
    • egoing
      대화보기
      • 샤핀
        === 정확하게 같은지를 비교할 때는 이걸 쓰는 걸 추천하셨는데,
        부정비교 할 경우도 !== 으로 쓰는 게 추천되나요?
      • 코난도일
        네, 이고잉님께서 수정하신 것 같네요.
        대화보기
        • 나무마루
          저도 이렇게 생각합니다. 잘못 나온거죠?
          대화보기
          • 코코딩
            오오... ===이게 왜 있나 했는데
            그래서였군요. 좋은 정보 너무나 고맙습니다.
          • ShotgunBlues
            null은 typeof 사용 시, 'object'라고 나타낸다. null은 프로그래머가 임의로 '아직 값이 없음'을 나타내기 위해 '기입'하는 것으로서 null은 object임을 나타낸다. 즉, 원시값(문자열, 숫자, 불린)이 아닌 '객체'라 생각하면 쉽다.
          • egoing
            수정했습니다. 고맙습니다. ^^
            대화보기
            • 코난도일
              < '='가 두개인 것을 주의하자. '='가 하나인 것은 대입 연산자로 좌항의 값을 우항의 변수에 대입할 때 사용하는 것으로 의미가 완전히 다르다.>

              이 부분 오타인 듯 합니다. 우항의 값을 좌항의 변수에 대입하는 것 아닐까요?
            • 소피아
              유용한 수업 잘 듣고 있습니다. 감사감사여^^
            • 정은경
              제가 찾던 딱 그 강좌네요. 기초가 없어도 잘 이해되요^^
            • CHAELIN
              좋은 공부했습니다! 다음 강좌 조건문 이어서 바로 수강합니다~
            • 서울
              감사합니다~~
            • 요즘 봤던 부분이라 많이 반갑네요.연산자 연산 순서 입니다.
              1 () []2 ! ~ ++ --3 * / %4 + -5 << >>6 < <= > >=7 == !=8 &9 ^10 |11 &&12 ||13 ?:14 = += -= *= ...
            • 정보문
              신세계가 따로 없군요. 앞으로는 무조건 === 를 쓰겠습니다.
            • daejin
              전에 어떤 뛰어난 분(?)이 '===' 이렇게 코드를 작성하셨는데, 다른 업체분이 오타라고 '==' 수정하고 코멘트가 달려있었서....당황스러웠던 기억이 나네요.
              대화보기
              • egoing
                그런 이유로 CoffeeScript에서는 ==가 ===로 자동으로 변환되더군요. ==의 사용을 아예 언어 차원에서 금지하고 있습니다.
                대화보기
                • daejin
                  더글라스 크락포드의 '자바스크립트 핵심 가이드'에 보면 자바스크립트의 나쁜 점이라고 하여 '==' 부분을 설명하는 부분이 있습니다. 자세한 내용은 책을 참조바라며, 요약을하면
                  '=='는 비교를 위해 양쪽 형일치를 하는데, 이때 자동으로 형변환이 일어나도록 되어 있습니다. 하지만 이 형변환이 예상하지 못하는 오류의 원인이 될 수 있습니다.
                  따라서 '===' 형까지 동일할 때 동작하는 연산자만을 사용하면 알수없는 많은 오류를 줄일 수 있다고 합니다.
                버전 관리
                egoing
                현재 버전
                선택 버전
                graphittie 자세히 보기