자바스크립트 단락 평가(Short-circuit Evaluation)
단락 평가는 논리 연산자 && (AND)와 || (OR)가 표현식을 평가하는 특별한 방법입니다. 불필요한 연산을 건너뛰어 코드의 효율성을 높이고, 가독성을 향상시킵니다.
자바스크립트의 단락 평가(short-circuit evaluation) 는 ||(OR), &&(AND) 연산자가 불리언 값으로만 처리되는 게 아니라, 실제 피연산자 값 자체를 반환한다는 점이 핵심입니다.
1. 논리 AND (&&) 연산자
A && B 구문에서, A가 Falsy(거짓과 같은 값)인 경우, B는 평가되지 않고 즉시 A의 값이 반환됩니다. A가 Truthy(참과 같은 값)인 경우에만 B가 평가되고, 최종적으로 B의 값이 반환됩니다.
- 왼쪽에서 오른쪽으로 평가하면서 처음 만나는 falsy 값을 반환
- falsy 값이 없으면 마지막 truthy 값을 반환
- Falsy 값:
false,0,''(빈 문자열),null,undefined,NaN - Truthy 값: Falsy 값을 제외한 모든 값
활용 예시:
조건부 실행이나 객체 속성에 접근하기 전에 존재 여부를 확인할 때 사용됩니다.
// user가 null이므로 user.name은 실행되지 않고 'null'이 반환됨.
const user = null;
const username = user && user.name;
console.log(username); // null
// message가 truthy이므로 console.log가 실행됨.
const message = 'Hello';
message && console.log('메시지 있음!'); // '메시지 있음!' 출력2. 논리 OR (||) 연산자
A || B 구문에서, A가 Truthy인 경우, B는 평가되지 않고 즉시 A의 값이 반환됩니다. A가 Falsy인 경우에만 B가 평가되고, 최종적으로 B의 값이 반환됩니다.
- 왼쪽에서 오른쪽으로 평가하면서 처음 만나는 truthy 값을 반환
- 만약 truthy 값이 없으면 마지막 falsy 값을 반환
활용 예시:
변수에 기본값을 할당할 때 자주 사용됩니다.
// name이 falsy이므로 'Guest'가 할당됨.
const name = '';
const displayName = name || 'Guest';
console.log(displayName); // 'Guest'
// user.profileImage가 존재하면 그 값을 사용하고, 없으면 기본 이미지 경로를 사용.
const userProfile = user.profileImage || 'default.png';3. Null 병합 연산자 (??)
A ?? B 구문은 || 연산자의 단점을 보완합니다. A가 null 또는 undefined인 경우에만 B가 평가되고, 그렇지 않으면 A의 값이 반환됩니다.
|| 와의 차이점:
||는 0이나 '' 같은 Falsy 값을 기본값으로 처리하지만, ??는 오직 null과 undefined만 기본값으로 처리합니다.
// || 연산자는 0을 falsy로 간주하여 '기본값'을 할당.
let count = 0;
let defaultCount = count || '기본값';
console.log(defaultCount); // '기본값'
// ?? 연산자는 0을 null 또는 undefined로 간주하지 않아 0을 그대로 유지.
let countNullish = 0;
let defaultCountNullish = countNullish ?? '기본값';
console.log(defaultCountNullish); // 0
donggyun_ee