[JS] ||과 &&

자료 출처 - 모던 JavaScript 튜토리얼

||의 활용법

||은 하나만 참이면 나머지 값과 상관없이 항상 참이기 때문에 앞에서부터 첫번째 truthy값이 나올 때까지만 연산을 한다.

let firstName = "";
let lastName = "";
let nickName = "바이올렛";

alert( firstName || lastName || nickName || "익명"); // 바이올렛

빈 문자열은 falsy다. 위에서 alert문은 앞에서부터 차례대로 truthy 값을 찾을 것이다. 해당 alert문은 처음 truthy값이 나오는 nickname까지 연산을 하고 nickname을 화면에 출력할 것이다. 만약, nickname도 빈 문자열과 같은 falsy 값이었다면, 익명이 화면에 출력되었을 것이다.

alert는 return 값이 없다

alert( alert(1) || 2 || alert(3) );

위 코드의 결과는 화면에 1이 출력되고, 2가 출력된다. 3은 안 된다. || 연산에서 처음 alert(1)을 평가할 때 1이 출력된다. 하지만 alert 메소드는 return 값이 없어서 undefine을 반환한다. undefine은 falsy 값이라 다음 항목으로 넘어간다. 2는 truthy값이기 때문에 2를 화면에 출력하고 다음으로 넘어가지 않고 종료한다.

alert( alert(1) && alert(2) );

&& 연산은 하나라도 falsy 값이 있으면 무조건 false이기 때문에 첫 falsy 값을 찾을 때까지만 연산을 한다. 위 코드에서 alert(1)을 평가하면 화면에 1이 출력된다. 하지만 리턴 값이 없어서 undefine이 전달되고 falsy 값을 전달 받은 && 연산자는 다음 항목을 검사하지 않고 종료한다.

&&는 || 보다 우선 순위가 높다

a && b || c && d
(a && b) || (c && d)

위 두 코드는 결과가 같다. && 연산은 || 연산보다 우선 순위가 높아 괄호가 없어도 먼저 연산한다.