Skip to content

Latest commit

 

History

History
132 lines (93 loc) · 4.78 KB

논리연산자.md

File metadata and controls

132 lines (93 loc) · 4.78 KB
Raw

논리연산자

다른 프로그래밍 언어들과 마찬가지로 자바스크립트도 논리연산자 문법을 사용할 수 있습니다. ||(OR), &&(AND), !(NOT) 총 세 종류의 논리 연산자가 존재합니다. 피연산자로 모든 타입의 값을 받을 수 있고 평가는 Boolean 형으로 변환되어 진행되게 됩니다. 결과 또한 모든 타입이 될 수 있습니다.

Boolean

javascript에서 Boolean 값은 true와 false 중 하나의 값입니다. javascript에서 거짓으로 판정되는 값(falsy)은 undefined, null, 0, -0, NaN, "" 총 6개입니다. 참으로 판정되는 값(truthy)은 앞서 거짓으로 판정되는 6개 값을 제외한 값들입니다.

|| (OR)

||(OR) 연산자는 비교하는 두 개의 인수 중 하나라도 true인 경우 true를 반환하고 그 외의 경우에 false를 반환합니다.

true || true // true
true || false // true
false || true // true
false || false // false

&& (AND)

&&(AND) 연산자는 비교하는 두 개의 인수 모두 true인 경우 true를 반환하고 그 외의 경우에 false를 반환합니다.

true && true // true
true && false // false
false && true // false
false && flase // false

&&(AND) 는 !(NOT) 보다 우선순위가 낮고 ||(OR) 보다 우선순위가 높습니다.

! (NOT)

!(NOT) 연산자는 피연산자를 Boolean 형으로 변환한 뒤 변환된 값의 역을 반환합니다.

!true // false
!false // true

!"something" // false
!undefined // true

Boolean형으로 변환된 값이 true인 경우는 false로 false인 경우는 true로 변환됩니다.

alert(!!undefined); // false
alert(Boolean(undefined)); // false

alert(!!"something") // true
alert(Boolean("something")) // true

!! 같이 사용할 경우 특정 값을 Boolean형으로 변환 가능합니다. 또한 Boolean 내장 함수를 사용해도 특정 값을 Boolean 형으로 변환 가능합니다.

연산자 우선순위

논리연산자의 연산자 우선순위는 !(NOT), &&(AND), ||(OR) 순으로 실행됩니다.

숏 서킷 평가

자바스크립트 논리연산자는 왼쪽에서 오른쪽 평가를 진행합니다. ||(OR) 연산자의 경우 평가가 진행되는 도중 truthy를 만나면 평가를 멈추는 특성을 가지게 되는데 이것을 숏 서킷 평가(short circuit evaluation)라고 합니다.

true || true;
// true
true || false;
// true
false || false;
// false

위 세 가지 경우에 대한 예제 중 첫 번째, 두 번째의 경우 모두 첫 번째 값이 truthy 이기 때문에 오른쪽 인수가 무엇이 되었든 상관없이 거기서 평가를 멈추고 true를 반환하게 됩니다.

false || alert("alert 창이 뜰까요??")
true || alert("alert 창이 뜰까요??")

다음은 숏 서킷 평가에서 truthy를 만나면 평가를 멈춘다는 것을 좀 더 명확하게 확인하기 위한 예제입니다. 첫 번째 경우는 왼쪽 인수가 false이기 때문에 다음 인수 평가로 넘어가게 되고 truthy이므로 alert 창이 뜨게 됩니다. 하지만 두 번째 경우 왼쪽 인수가 truthy 이므로 숏 서킷 평가에 의해 평가를 멈추게 되어 alert창이 뜨지 않습니다.

이렇듯 숏 서킷 평가는 왼쪽 조건이 falsy일 경우에만 오른쪽 인수를 실행하도록 할 때 사용할 수 있습니다.

var car = {
 wheel: 4
}
console.log(car.body || 'white'); // white
var car = {
 wheel: 4,
 body: 'black'
}
console.log(car.body || 'white'); // black

위 예제들과 같이 car라는 객체에 body라는 key가 없어 undfined를 반환하더라도 안전하게 처리할 수 있도록 해준다.

var a;
var b = null;
var c = undefined;
var d = 4;
var e = 'five';

var f = a || b || c || d || e;

console.log(f);

다음은 stack overflow에서 실제로 화제가 되었던 코드입니다. console에 무엇이 출력될까요?

var a; // undefined (falsy value)
var b = null; // null (falsy value)
var c = undefined; // undefined (falsy value)
var d = 4; // number (truthy)
var e = 'five'; // assigment short circuits before reaching here

var f = a || b || c || d || e;

a부터 c까지 falsy value 이므로 평가를 진행하다 d에서 truthy를 반환하므로 평가를 멈추됩니다. 따라서 변수 f 에 저장되는 값은 변수 d의 값인 4가 됩니다.

Reference