단락 평가란 무엇인가?
단락 평가(Short-circuit evaluation)는 자바스크립트에서 &&(AND)와 ||(OR) 논리 연산자를 사용할 때 적용되는 핵심 동작 방식입니다. 이름 그대로 '회로가 끊기듯' 평가 도중에 나머지 연산을 건너뛰는 것이 특징입니다.
논리 연산자를 사용한 표현식은 항상 왼쪽에서 오른쪽 순서로 평가되며, 결과가 확정되는 순간 뒤에 남은 표현식은 아예 실행되지 않습니다.
&&(AND) 연산자의 단락 평가
&& 연산자는 모든 피연산자가 true여야 전체 결과가 true가 됩니다. 따라서 첫 번째 표현식이 false로 평가되면 전체 결과가 이미 false로 확정되기 때문에, 나머지 표현식은 평가하지 않고 즉시 false를 반환합니다.
||(OR) 연산자의 단락 평가
|| 연산자는 피연산자 중 하나라도 true이면 전체 결과가 true가 됩니다. 따라서 첫 번째 표현식이 true로 평가되면 전체 결과가 이미 true로 확정되어, 나머지 표현식은 평가하지 않고 즉시 true를 반환합니다.
예제 코드
아래는 자바스크립트에서 단락 평가가 실제로 어떻게 동작하는지 확인할 수 있는 코드입니다. 각 함수가 호출될 때마다 화면에 로그가 출력되므로, 단락 평가로 인해 어떤 함수가 실행되고 어떤 함수가 건너뛰어지는지 눈으로 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 20px;
font-weight: 500;
color: blueviolet;
}
</style>
</head>
<body>
<h1>단락 평가(Short-circuit evaluation)</h1>
<div class="result"></div>
<br />
<button class="Btn">&& 단락 평가</button>
<button class="Btn">|| 단락 평가</button>
<h3>위 버튼을 클릭하면 단락 평가의 동작을 확인할 수 있습니다.</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelectorAll(".Btn");
// true를 반환하며 화면에 기록하는 함수
function retTrue() {
resEle.innerHTML += "True <br>";
return true;
}
// false를 반환하며 화면에 기록하는 함수
function retFalse() {
resEle.innerHTML += "False <br>";
return false;
}
// && 연산자: 첫 번째 값이 false이면 두 번째 함수는 호출되지 않음
BtnEle[0].addEventListener("click", () => {
resEle.innerHTML = "&& evaluation<br>";
retFalse() && retTrue();
});
// || 연산자: 첫 번째 값이 true이면 두 번째 함수는 호출되지 않음
BtnEle[1].addEventListener("click", () => {
resEle.innerHTML = "|| evaluation <br>";
retTrue() || retFalse();
});
</script>
</body>
</html>
실행 결과
'&& 단락 평가' 버튼을 클릭했을 때 — retFalse()가 먼저 실행되어 'False'만 출력됩니다. 첫 번째 표현식이 false이므로 retTrue()는 호출조차 되지 않습니다.
'|| 단락 평가' 버튼을 클릭했을 때 — retTrue()가 먼저 실행되어 'True'만 출력됩니다. 첫 번째 표현식이 true이므로 retFalse()는 실행되지 않습니다.
실무에서의 활용 예
단락 평가는 단순한 문법 지식을 넘어 실무 코드에서 매우 유용하게 사용됩니다.
- 안전한 접근(Guard):
if (user && user.name)처럼 객체가 존재할 때만 속성에 접근해 에러를 방지할 수 있습니다. - 기본값 설정:
const name = inputValue || "기본값"처럼 값이 없을 때 대체 값을 지정할 수 있습니다. (ES2020의??null 병합 연산자도 함께 알아두면 좋습니다.) - 성능 최적화: 비용이 큰 함수 호출을 조건 뒤쪽에 배치하면, 불필요한 실행을 줄여 성능을 개선할 수 있습니다.
이처럼 단락 평가를 제대로 이해하면 더 안전하고 효율적인 자바스크립트 코드를 작성할 수 있습니다.