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

자바스크립트에는 ||(or), &&(and), !(not) 세 가지의 논리 연산자가 존재한다. 명칭은 논리 연산자지만, 불리언 뿐만이 아닌 모든 데이터 유형에 사용할 수 있다. 참고로 && 연산자가 || 연산자보다 우선 순위가 높아 먼저 실행된다.

|| (OR)

자바스크립트에서 || 연산자는 비교하는 값 중 최초의 truthy 값을 찾아 리턴한다.

result = value1 || value2 || value3;

위의 예시에서 || 연산자는 왼쪽부터 오른쪽으로 차례대로 연산을 수행하며, 결과가 true 일 경우 연산을 멈추고 해당 값을 리턴한다. 만약, 모든 값이 false 일 경우, 가장 마지막 값을 리턴한다.

 

다음은 MDN에서 소개하고 있는 || 연산자 예시다.

o1 = true || true // true
o2 = false || true // true
o3 = true || false // true
o4 = false || (3 == 4) // false
o5 = 'Cat' || 'Dog' // "Cat"
o6 = false || 'Cat' // "Cat"
o7 = '' || false // false
o8 = false || '' // ""

&& (AND)

자바스크립트에서 && 연산자는 비교하는 값 중 최초의 falsy 값을 찾아 리턴한다.

result = value1 && value2 && value3;

위의 예시에서 && 연산자는 왼쪽부터 오른쪽으로 차례대로 연산을 수행하며, 결과가 false 일 경우 연산을 멈추고 해당 값을 리턴한다. 만약, 모든 값이 true 일 경우, 가장 마지막 값을 리턴한다.

 

다음은 MDN에서 소개하고 있는 && 연산자 예시다.

a1 = true && true // true
a2 = true && false // false
a3 = false && true // false
a4 = 'Cat' && 'Dog' // "Dog"
a5 = false && 'Cat' // false
a6 = 'Cat' && false // false
a7 = '' && false // ""
a8 = false && '' // false

! (NOT)

자바스크립트에서 ! 연산자는 불리언 타입을 반대로 전환하는 역할을 한다. 즉, true 는 false 가 되고, false 는 true 가 된다.

n1 = !true // false
n2 = !false // true
n3 = !'' // true
n4 = !'Cat' // false

! 를 두 번 사용하게 될 경우, 기존 불리언 값을 리턴한다.

n1 = !!true // true
n2 = !!{} // true
n3 = !!"" // false

마치며

연산자 || 와 && 는 유사한 방식으로 작동하며, 차이점이라면 || 는 최초의 truthy 값을 리턴하고, && 는 최초의 falsy 값을 리턴한다는 것이다. 해당 연산에 부합하는 값이 없을 경우, 모두 가장 마지막 값을 리턴한다. ! 연산자는 불리언 타입을 반대로 전환하며, 이를 이를 두 번 사용 !! 할 경우, 기존 불리언 타입을 리턴한다.

 

참고 자료

• MDN, 논리 연산자
• Logical Operators