JavaScript에서 Boolean(불리언) 값을 전환(toggle)하는 것은 true를 false로, false를 true로 바꾸는 작업을 의미합니다. UI 상태 관리, 체크박스 처리, 모달 창 열기/닫기 등 다양한 상황에서 자주 사용되는 기본적인 기법입니다.
Boolean 전환의 기본 원리
가장 간단하고 널리 사용되는 방법은 논리 NOT 연산자(!)를 활용하는 것입니다. NOT 연산자는 현재 값의 반대 값을 반환하기 때문에, 변수에 자신의 반대 값을 다시 할당하면 손쉽게 전환이 이루어집니다.
let boolVal = true; boolVal = !boolVal; // false boolVal = !boolVal; // true
이 외에도 숫자형으로 변환하여 XOR 비트 연산(^= 1)을 사용하거나, 삼항 조건 연산자를 활용하는 방법도 있습니다.
실전 예제 코드
다음은 버튼 클릭 시 화면에 표시된 Boolean 값이 실시간으로 전환되는 완전한 예제입니다.
<!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-weight: 500;
font-size: 18px;
color: blueviolet;
}
</style>
</head>
<body>
<h1>JavaScript로 Boolean 값 전환하기</h1>
<div class="result"></div>
<button class="Btn">Toggle</button>
<h3>위 버튼을 클릭하면 Boolean 값이 전환됩니다</h3>
<script>
let BtnEle = document.querySelector(".Btn");
let resEle = document.querySelector(".result");
let boolVal = true;
resEle.innerHTML = boolVal;
BtnEle.addEventListener("click", () => {
boolVal = !boolVal;
resEle.innerHTML = boolVal;
});
</script>
</body>
</html>코드 설명
document.querySelector()를 사용해 버튼 요소와 결과를 표시할 div 요소를 선택합니다.- 변수
boolVal을true로 초기화하고, 페이지 로드 시 결과 영역에 현재 값을 출력합니다. - 버튼에 클릭 이벤트 리스너를 등록하고, 클릭이 발생할 때마다
boolVal = !boolVal;구문으로 값을 반전시킨 뒤 화면을 갱신합니다.
실행 결과
페이지를 처음 열면 결과 영역에 true가 표시됩니다.
Toggle 버튼을 클릭하면 값이 false로 전환됩니다. 버튼을 누를 때마다 true와 false가 번갈아 나타나는 것을 확인할 수 있습니다.
마무리
NOT 연산자(!)를 활용한 Boolean 전환은 JavaScript에서 가장 직관적이고 효율적인 방법입니다. 한 줄의 코드로 상태를 반전시킬 수 있어 다크 모드 전환, 아코디언 메뉴, 좋아요 버튼 등 인터랙티브한 웹 기능을 구현할 때 폭넓게 활용됩니다.