AND와 OR의 연산 방식

Falsy 값	Truthy 값
false null undefined NaN 0 ' '	나머지 값 [ ] { }

AND와 OR의 연산 방식

자바스크립트에서 논리 연산자는 항상 true나 false 값을 반환하는 것이 아니라 상황에 따라 양 쪽 값들 중 하나를 선택하는 방식으로 동작한다. 또한, AND 연산자는 OR 연산자 보다 우선순위가 더 높다. 논리 연산자가 많다면 가독성을 위해서 괄호를 사용해 연산 우선순위를 명확하게 표기하는 것이 협업하기 위한 좋은 습관이다.

console.log('Codeit' && 'Javascript');    // 'Javascript'

AND

AND 연산자는 양 쪽 값이 true일 때만 true를 반환하고 어느 한 쪽이라도 false일 경우 false를 반환하는 것으로 알고 있다. 하지만 AND 연산자는 왼쪽 값이 Truthy하면 오른쪽 값을 반환하고 왼쪽 값이 Falsy하면 그대로 왼쪽 값을 반환하는 방식으로 동작한다.

console.log(true && true);    // true
console.log(true && false);   // false
console.log(false && true);   // false
console.log(false && false);  // false

OR

OR 연산자는 양 쪽이 모두 false일 때만 false를 반환하고 어느 한 쪽이라도 true일 경우 true를 반환하는 것으로 알고 있다. 하지만 OR 연산자는 왼쪽 값이 Truthy하면 그대로 왼쪽 값을 반환하고 왼쪽 값이 Falsy하면 오른쪽 값을 반환하는 방식으로 동작한다.

console.log(true || true);     // true
console.log(true || false);    // true
console.log(false || true);    // true
console.log(false || false);   // false    

예시

console.log(null && undefined);    // null
console.log(0 || true);            // true
console.log('0' && NaN);           // NaN
console.log({} || 123);            // {}

console.log('String' && 123);      // 123
console.log({} || []);             // {}
console.log(0 && false);           // 0
console.log(null || undefined);    // undefined
console.log(NaN && 'Codeit');      // NaN
console.log('' || true);           // true
console.log('JavaScript' && null); // null
console.log(3000 || undefined);    // 3000

console.log('codeit' && undefined && null);   // undefined 
console.log('codeit' || false || null);       // codeit
console.log('codeit' && 123 || null);         // 123
console.log('codeit' || 123 && true);         // codeit