[JavaScript] 자바스크립트에서 && 연산자의 동작 방식

0. 자바, 자바스크립트의 && 연산자의 근본적 차이

당연한 것이지만

자바에서 'Cat' && 'Dog'는 문법 오류(컴파일 에러)가 발생함. && 연산자는 boolean 타입에만 사용 가능하며, 문자열(String)에는 적용할 수 없다. 

1. 자바스크립트에서 && 연산자의 동작 방식

• 자바스크립트에서 && (논리 AND) 연산자는 "단축 평가" (short-circuit evaluation) 를 수행하며, 다음과 같은 방식으로 동작한다.

1. 왼쪽 피연산자가 Falsy 값이면, 그 값을 즉시 반환하고 평가를 종료한다.
2. 왼쪽 피연산자가 Truthy 값이면, 오른쪽 피연산자를 평가하고 그 값을 반환한다.

• 'Cat' && 'Dog'가 'Dog'가 되는 이유:

1. 'Cat'은 Falsy 값이 아니라 Truthy 값이다.
2. 따라서 && 연산자는 'Cat'을 무시하지 않고, 오른쪽 피연산자인 'Dog'를 평가하고 반환한다.
3. 결국 'Dog'가 최종 결과가 된다.

** 외우기
5 falsy values에는 0, ''(공백), undefined, null, NaN이 있다.
위 다섯가지는 boolean으로 형변환 하면 false로 나온다.

2. &&연산자 동작 결과

console.log('Cat' && 'Dog'); // 'Dog'
console.log('' && 'Dog');    // '' (Falsy 값)
console.log(null && 'Dog');  // null (Falsy 값)
console.log('Cat' && 0);     // 0 (Falsy 값)
console.log('Cat' && false); // false (Falsy 값)
console.log('Cat' && true);  // true
console.log('Cat' && 123);   // 123

이러한 동작 원리를 이해하면, && 연산자를 활용하여 조건부 실행 (conditional execution) 을 만들 수 있다.

 

3. 활용 예제: &&를 활용한 조건부 실행

let user = { name: 'Alice' };
user && console.log(user.name); // 'Alice'

• user가 존재하면 console.log(user.name)을 실행한다.
• user가 null이나 undefined라면 실행되지 않는다.

 

4. 결론

논리곱 연산자 &&와 논리합 연산자 ||는 이와 같이 논리 평가를 결정한 피연산자의 평가 결과를 그대로 반환한다. 이를 단축 평가(Short-Circuit evaluation)라 부른다. 단축 평가는 아래의 규칙을 따른다.

 

단축 평가 표현식평가 결과

단축 평가 표현식	평가 결과
true || anything	true
false || anything	anything
true && anything	anything
false && anything	false

 

참고 : https://poiemaweb.com/js-type-coercion