자바스크립트 단락 평가(Short-circuit Evaluation)란?
단락 평가(Short-circuit Evaluation)는 논리 연산자 &&(AND)와 ||(OR)에서 결과가 이미 확정된 경우, 나머지 피연산자를 평가하지 않고 즉시 연산을 종료하는 자바스크립트의 핵심 동작 방식입니다.
- && 연산자: 첫 번째 값이 false이면 전체 결과는 이미 false로 확정되므로, 두 번째 표현식은 아예 실행되지 않습니다.
- || 연산자: 첫 번째 값이 true이면 전체 결과는 이미 true로 확정되므로, 두 번째 표현식은 평가되지 않습니다.
아래 예제 코드를 통해 두 연산자의 단락 평가 동작을 직접 확인할 수 있습니다.
예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>불리언 단락 평가</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)</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");
function retTrue() {
resEle.innerHTML += "True <br>";
return true;
}
function retFalse() {
resEle.innerHTML += "False <br>";
return false;
}
BtnEle[0].addEventListener("click", () => {
resEle.innerHTML = "&& 평가<br>";
retFalse() && retTrue();
});
BtnEle[1].addEventListener("click", () => {
resEle.innerHTML = "|| 평가 <br>";
retTrue() || retFalse();
});
</script>
</body>
</html>실행 결과
위 코드를 브라우저에서 실행하면 두 개의 버튼과 결과를 표시하는 영역이 나타납니다.
'&& 단락 평가' 버튼을 클릭한 경우 −
retFalse()가 먼저 실행되어 False를 반환합니다. AND 연산은 첫 번째 값이 false인 순간 전체 결과가 확정되기 때문에, retTrue()는 호출조차 되지 않습니다. 화면에는 'False'만 출력됩니다.
'|| 단락 평가' 버튼을 클릭한 경우 −
retTrue()가 먼저 실행되어 True를 반환합니다. OR 연산은 첫 번째 값이 true인 순간 전체 결과가 확정되므로, retFalse()는 실행되지 않습니다. 화면에는 'True'만 출력됩니다.
정리
이처럼 단락 평가는 불필요한 함수 호출이나 연산을 건너뛰어 성능을 최적화하고, 조건부 실행이나 기본값 설정 등 다양한 패턴에서 활용됩니다. 함수 내부에 출력문을 넣어두면 어떤 표현식이 실제로 실행되었는지 눈으로 직접 확인할 수 있어 학습에 큰 도움이 됩니다.