[JS] 단락회로 평가 (Short-circuit Evaluation)

JavaScript 그리고 React.js 자주 쓰는 단락회로 평가가 헷갈려서 정리한다.

 

단락회로 또는 단축 평가는 피연산자 중에 뒤에 위치한 피연산자는 볼 필요없이 논리 연산을 끝내버리고 결과값을 반환한다. 이 문법은 AND(&&)와 OR(||) 논리 연산의 응용이며, 나는 주로 함수형 컴포넌트에서 조건부 렌더링을 수행하는데 사용한다.

 

AND 단락회로 평가 (&&)

---

AND 논리 연산의 결과는 피연산자 모두 참(truthy)이어야 참의 결과값을 반환하고, 하나라도 거짓(falsy)라면 거짓의 결과값을 반환한다. AND 단락회로 평가는 이 성질을 응용한다.

 

결과적으로 경우의 수는 아래와 같이 나뉜다.
(1) falsy && truthy 경우, 뒤에 위치한 피연산자는 볼 필요없이 falsy 값을 반환한다.
(2) falsy && falsy 경우, 뒤에 위치한 피연산자는 볼 필요없이 첫번째 falsy 값을 반환한다.
(3) truthy && falsy 경우, 참으로 시작하여 뒤에 위치한 피연산자까지 확인하고 false 값을 반환한다.
(4) truthy && truthy 경우, 참으로 시작하여 뒤에 위치한 피연산자까지 확인하고 두번째  truthy 값을 반환한다.
일반적으로 좀 더 빠른 논리 연산을 위한 작업이므로 (1)과 (2)의 경우에 사용한다.

 

console.log(null && 30); // null
console.log(null && undefined); // null
console.log(30 && undefined); // undefined
console.log(30 && 60); // 60

const getName = (person) => {
    return person && person.name;
};

let person = null;
const name = getName(person);
console.log(name); // null

 

요약하면, AND 단락회로 평가는 falsy 값이 처음 나올 때까지 피연산자를 조회하고 falsy 값이 없다면 마지막 truthy 값을 반환한다.

 

OR 단락회로 평가 (||)

---

OR 논리 연산의 결과는 피연산자 모두 거짓(falsy)이어야 거짓의 결과값을 반환하고, 하나라도 참(truthy)라면 참의 결과값을 반환한다. OR 단락회로 평가는 이 성질을 응용한다.

 

결과적으로 경우의 수는 아래와 같이 나뉜다.
(1) truthy || falsy 경우, 뒤에 위치한 피연산자는 볼 필요없이 truthy 값을 반환한다.

(2) truthy || truthy 경우, 뒤에 위치한 피연산자는 볼 필요없이 첫번째 truthy 값을 반환한다.
(3) falsy || truthy 경우, 거짓으로 시작하여 뒤에 위치한 피연산자까지 확인하고 truthy 값을 반환한다.
(4) falsy || falsy 경우, 거짓으로 시작하여 뒤에 위치한 피연산자까지 확인하고 두번째 falsy 값을 반환한다.

일반적으로 좀 더 빠른 논리 연산을 위한 문법이므로 (1)과 (2)의 경우에 사용한다.
게다가 AND 단락회로 평가보다 truthy로 시작하는 OR 단락회로 (1), (2) 경우를 더 많이 사용한다.

 

console.log(30 || null); // 30
console.log(30 || 60); // 30
console.log(null || 30); // 30
console.log(null || undefined); // undefined

const getName = (person) => {
    const name = person && person.name;
    return name || "객체가 아닙니다";
};

let person = null;
const name = getName(person);
console.log(name); // 객체가 아닙니다.

 

요약하면, OR 단락회로 평가는 truthy 값이 처음 나올 때까지 피연산자를 조회하고
truthy 값이 없다면 마지막 falsy 값을 반환한다.

 

 

 

 

 

참고자료: https://seo0yoon.tistory.com/163

[JS] 단락회로 평가