자바스크립트 Boolean과 비교연산자 완전 정복! true, false는 이렇게 씁니다

 

✅ Boolean이란?

Boolean은 참(true)과 거짓(false)만을 나타내는 자료형입니다.
프로그래밍 언어에서는 논리적인 판단이 필요한 경우 Boolean 값이 필수적으로 사용됩니다.

console.log(true);    // true
console.log(false);   // false

위 코드를 실행해보면 true, false가 그대로 출력됩니다. 문자열이 아니라 Boolean 자료형으로 인식되기 때문에 따옴표 없이 사용해야 하며, 에러 없이 잘 실행됩니다.

console.log(typeof true); 
// "boolean"

typeof 연산자를 사용하면 값의 자료형을 확인할 수 있는데요, true는 명확히 boolean으로 반환됩니다.

❗ 예약어 주의

let false = 'hello';
// SyntaxError: Unexpected token 'false'

자바스크립트에서 true와 false는 예약어입니다. 변수명으로 사용할 수 없습니다. 변수로 선언하려고 하면 **문법 오류(SyntaxError)**가 발생하니 주의하세요.

---

✅ 자바스크립트에서 Boolean이 사용되는 곳

Boolean은 대부분 조건문이나 비교식에서 자주 등장합니다. true 혹은 false를 반환하는 연산식에 많이 사용되죠.

💡 예시 1: 조건문에서 사용

if (true) {
  console.log("조건이 참이면 실행됩니다.");
}

결과:

조건이 참이면 실행됩니다.

if (1 > 2) {
  console.log("이건 실행 안 됩니다.");
} else {
  console.log("조건이 거짓이라 else가 실행됩니다.");
}

결과:

조건이 거짓이라 else가 실행됩니다.

위 코드처럼, 조건식 안에 들어가는 값은 Boolean이어야 하며, 그렇지 않은 값도 자바스크립트는 자동으로 Boolean으로 변환하여 판단합니다.

---

✅ 자바스크립트 비교 연산자 정리

Boolean 값은 비교 연산자를 통해서도 자주 생성됩니다. 비교 연산자는 둘 이상의 값을 비교하고, 그 결과로 true 또는 false를 반환합니다.

비교 연산자 설명 예시 결과

>	크다	3 > 2	true
<	작다	3 < 2	false
>=	크거나 같다	3 >= 3	true
<=	작거나 같다	2 <= 1	false
==	값이 같다	1 == "1"	true
!=	값이 다르다	2 != 3	true
===	값과 타입이 같다	1 === "1"	false
!==	값 또는 타입이 다르다	1 !== "1"	true

---

✅ =, ==, ===의 차이

초보자들이 가장 헷갈려하는 부분 중 하나가 =, ==, ===입니다.

📌 1. 대입 연산자 =

값을 변수에 할당할 때 사용하는 연산자입니다.

let a = 10;

변수 a에 숫자 10을 대입합니다.

📌 2. 동등 연산자 ==

값만 비교합니다. 타입이 다르더라도 형변환을 통해 비교합니다.

console.log(1 == "1"); // true

문자열 "1"은 숫자 1로 암묵적으로 변환된 후 비교되므로 true가 나옵니다.

📌 3. 일치 연산자 ===

값과 타입 모두를 비교합니다.
자바스크립트에서는 가능한 === 사용을 추천합니다. 의도하지 않은 자동 형변환을 방지할 수 있기 때문입니다.

console.log(1 === "1"); // false

숫자와 문자열은 타입이 다르므로 false가 출력됩니다.

---

✅ Boolean 반환 예제: 직접 실습해보세요

console.log(0 == false);    // true
console.log(0 === false);   // false

이 코드는 자바스크립트의 형 변환 특성을 잘 보여주는 예제입니다.

• 0 == false는 true → 숫자 0과 Boolean false를 비교할 때 자동으로 형 변환이 일어나 같은 값으로 판단합니다.
• 0 === false는 false → 타입이 다르기 때문에 false로 반환됩니다.

---

✅ Boolean으로 판단되는 값들

자바스크립트에서는 조건문에서 Boolean이 아닌 값도 자동으로 true/false로 변환되어 사용됩니다.

📌 Falsy 값들: false로 간주되는 값

다음 값들은 조건문에서 false로 처리됩니다.

• false
• 0
• "" (빈 문자열)
• null
• undefined
• NaN

if (0) {
  console.log("실행 안 됨");
} else {
  console.log("0은 false로 간주되어 else 실행");
}

📌 Truthy 값들: true로 간주되는 값

다음 값들은 조건문에서 true로 처리됩니다.

• true
• 1, -1, 모든 숫자 (0 제외)
• "hello" (비어있지 않은 문자열)
• [], {} (빈 배열과 객체도 truthy입니다.)

if ("hello") {
  console.log("비어있지 않은 문자열은 true");
}

---

✅ 실전 예제: 조건문에서 Boolean 활용하기

let isLoggedIn = true;

if (isLoggedIn) {
  console.log("사용자가 로그인 상태입니다.");
} else {
  console.log("로그인이 필요합니다.");
}

Boolean 값은 위와 같은 로그인 상태 체크, 버튼 활성화 여부, 데이터 유무 판단 등 다양한 로직에 사용됩니다.

---

✅ 마무리 정리

구분 설명

Boolean	true, false 두 가지 값만 가지는 자료형
typeof	자료형 확인 시 사용, typeof true → "boolean"
예약어 주의	true, false는 변수명으로 사용할 수 없음
==	값만 비교, 자동 형 변환 발생
===	값과 자료형 모두 비교, 일치 여부만 true 반환
Falsy 값	false, 0, "", null, undefined, NaN 등
Truthy 값	true, "문자열", [], {}, 숫자 (0 제외) 등

---

✅ 결론: 자바스크립트 Boolean을 정확히 이해하면 개발이 쉬워진다!

Boolean은 단순히 true/false만 다루는 자료형 같지만, 자바스크립트에서 매우 중요한 역할을 합니다. 조건문, 반복문, 함수의 흐름 제어 등 거의 모든 로직에 사용되기 때문입니다.

비교 연산자와 함께 사용될 때 ==와 ===의 차이를 잘 이해하고 있어야 버그 없는 코드, 예상 가능한 실행 흐름을 만들 수 있습니다.

앞으로 자바스크립트를 공부하거나 사용할 때 Boolean의 동작 방식과 비교 연산자의 사용법을 잊지 마세요!