자바스크립트 비교 연산자 및 논리연산자

아래 코드는 내 웹사이트 직접 구현된 코드의 일부이다.

<script language="javascript">
//<![CDATA[
function SelectedCategory(relateduid,uid)
{
    if (relateduid == 0)
    {
        document.bbssearchf.cat1.value=uid;
        document.bbssearchf.cat2.value='';
    }
    else {
        document.bbssearchf.cat1.value=relateduid;
        document.bbssearchf.cat2.value=uid;
    }
    document.bbssearchf.submit();
}

//]]>
</script>

//<![CDATA[ 는 유효성 검사 오류를 막기 위해서 선언

비교 연산자

연산자	설명
==	동일한
===	데이터 및 형(type)이 일치할 때 true
!=	동일하지 않은
!==	데이터 및 형(type)이 불일치할 때 true
>	~ 보다 큰
<	~ 보다 작은
>=	~ 보다 크거나 동일한
<=	~ 보다 작거나 동일한

 

예제를 하나 살펴보면서 확인해보자.

이클립스에서 HTML5 를 선택하고 자바스크립트를 7번 라인과 8번 라인에 적었다.

7번 라인 결과는 참일까? 거짓일까?

아래 결과를 보니까 false 라고 나온다. 왜일까?

연산은 좌측에서 우측으로 계산을 한다. 1000 > 100 부터 계산을 한다. 이 두개의 비교는 참이다. 참(true) 은 1을 반환한다. 다음 계산은 1 > 10 이므로 false 가 된다.

8번 라인은 && 로 구분하여 비교를 했으므로 && 왼쪽의 수식의 결과는 true, 오른쪽의 수식의 결과도 true 이므로 결과는 true 를 반환한다.

아래는 이 코드를 직접 웹브라우저 상에서 볼 수 있도록 설정하는 방법을 화면으로 표시한 것이다.

논리 연산자

연산자	설명
&&	AND (그리고)
||	OR (또는)
!	NOT (아닌)

 

논리합 연산자는 true 가 1개라도 있으면 true 를 반환한다.

논리곱 연산자는 모두 true 이면 true 를 반환한다.

아래 예제를 통해 살펴보면, 의미가 명확해질 것이라고 본다.

console.log 는 웹 브라우저 콘솔화면에 찍겠다는 뜻이다. HTML 파일을 저장하고 웹브라우저에서 확인하면 아무것도 보이지 않는데, F12 키를 눌러서 콘솔에서 확인하면 우측 그림처럼 보인다.

console.log(a && b && c); // 변수 a 에 값이 할당되지 않았으므로 undefined 이다.

&& 연산자는 처음부터 false 이면 뒤는 계산하지 않고 바로 false 값을 돌려준다.

console.log(a || b || c ); // 변수 a 는 값이 없으므로 false, b=20 이므로 참, 결과는 20

|| 연산자는 앞에서 부터 처음으로 true 가 나오는 지점에서 더 이상 우측으로 계산을 하지 않는다.

이번에는 화면에 출력하는 코드로 작성을 했다.

줄바꿈 document.write("<br />"); 을 넣어줘야 다음 줄에 표기기 된다.