자바스크립트(JavaScript) 논리 연산자 ( ||, &&, ! ) 설명

오늘은 자바스크립트의 논리 연산자에 대하여 짧고 간단하게 설명드리고자 합니다.

 

보통의 언어에서 논리 연산자는 Boolean (true / false) 값을 반환합니다.

 

하지만 자바스크립트에서 논리 연산자는 피연산자 중 하나의 값을 반환하는 용도로도 자주 사용됩니다.

 

말로 설명하니 복잡해 보이는데요.

 

예제와 함께 코드로 보시면 아주 쉽고 빠르게 이해하신 후 실제 코드에서 사용하실 수 있습니다.

 

 

우선 간단하게 논리 연산자 코드는 총 3가지로 분류됩니다.

 

연산자	표기법	구문	구문 치환	설명
논리 AND	&&	example1 && example2	example1 AND example2	example1 이 true 인 경우 example2 을 반환하고 그렇지 않은 경우 example1을 반환
논리 OR	||	example1 || example2	example1 OR example2	example1 이 true 인 경우 example1 을 반환하고 그렇지 않은 경우 example2을 반환
논리 NOT	!	!example1	NOT example1	example1 이 true 인 경우 false를 반환하고 그렇지 않은 경우 true 를 반환

 

간단하게 예시로 살펴보면 아래와 같습니다. ( 문법 예시는 MDN 예시가 가장 무난하여 공유드립니다. )

 

[논리 AND ( && ) 예시]

a1 = true  && true       // t && t returns true
a2 = true  && false      // t && f returns false
a3 = false && true       // f && t returns false
a4 = false && (3 == 4)   // f && f returns false
a5 = 'Cat' && 'Dog'      // t && t returns "Dog"
a6 = false && 'Cat'      // f && t returns false
a7 = 'Cat' && false      // t && f returns false
a8 = ''    && false      // f && f returns ""
a9 = false && ''         // f && f returns false

 

[논리 OR ( || ) 예시]

o1 = true  || true       // t || t returns true
o2 = false || true       // f || t returns true
o3 = true  || false      // t || f returns true
o4 = false || (3 == 4)   // f || f returns false
o5 = 'Cat' || 'Dog'      // t || t returns "Cat"
o6 = false || 'Cat'      // f || t returns "Cat"
o7 = 'Cat' || false      // t || f returns "Cat"
o8 = ''    || false      // f || f returns false
o9 = false || ''         // f || f returns ""
o10 = false || varObject // f || object returns varObject

 

[논리 NOT ( ! ) 예시]

n1 = !true               // !t returns false
n2 = !false              // !f returns true
n3 = !''                 // !f returns true
n4 = !'Cat'              // !t returns false

 

 

이때 가장 중요한 건 값을 true로 변환이 가능하면 참(진실)인 것이고

값을 false로 변환할 수 있으면 값이 거짓인 것입니다. 

 

그렇다면 여기서 중요한 것은 무엇일까요??

바로 참과 거짓을 판별하는 정확한 정의입니다.

 

대부분은 Boolean (true / false) 으로 논리 연산자를 사용하기 때문에 상관이 없지만 가장 위에 서술한 것처럼

 

피연산자 중 하나의 값을 반환하는 용도로 사용하는 경우

피연산자가 참인지 거짓인지의 정의를 정확하게 알아야 사용할 때

예상하지 못한 문제가 발생하는 것을 방지할 수 있습니다.

 

 

자바스크립트 논리 연산자의 거짓 정의는 아래와 같습니다.

 

1. null

2. NaN

3. 0 ( 숫자 영(Zero) 입니다. )

4. 빈 문자열 ( Empty String ) : 총 3개입니다.

 - 4-1. ""(큰따옴표)

 - 4-2. ''(작은따옴표)

 - 4-3. ``(템플릿 리터럴) 

5. undefined

 

 

JavaScript 논리 연산자를 사용하여 가장 많이 사용하는 자바스크립트 트릭은 아래와 같습니다.

 

아래와 같이 특정한 function 안에 파라미터가 들어갈 때

해당 파라미터가 없거나 할 때 기본 처리 등을 아래와 같이 단순하게 처리할 수 있습니다.

 

많이 쓰이는 경우는 보통 Ajax 등을 통하여

서버와 통신하여 받아온 JSON Data 등을 특정 function에 파라미터로 보낸 후

그 값으로 무언가 작업을 진행할 때 많이들 합니다.

 

이때 서버에서 통신 후 받은 JSON Data 가 null , NaN , Empty String , undefined 인 경우는 보통 서버에서 제대로 응답이 오지 않았다던가 하는 이유로 대부분 의도하지 않은 값이 들어오는 경우인데요.

 

이럴 때를 대비하여 아래와 같이 Default Value를 지정해두면 예외처리를 쉽게 할 수 있습니다.

 

function func(param){
    param = param || 100 ;
    console.log(param);
}

func(50); // return 50

func(); // return 100

 

 

 

 

#참고자료

MDN 논리 연산자 설명(developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/%EB%85%BC%EB%A6%AC_%EC%97%B0%EC%82%B0%EC%9E%90(Logical_Operators)

논리 연산자 - JavaScript | MDN