오늘은 '불리언(Boolean)' 타입에 대해서 알아보도록 하자!

Boolean?

Boolean은 '불린'이라고도 읽고 '불리언'이라고도 읽는다.
컴퓨터 사이언스에서는 '논리적인 데이터 유형'이라고 설명하고 있다.
값으로는 true와 false만을 가지고 있으며 아래처럼 if문과 같은 조건문과 함께 자주 사용하는 데이터 유형이다.

<script>
  let a = 5;
  let b = 12;
  
 // 아래의 조건문(if)는 거짓임으로 'false'일 때 실행하는 'else'문이 실행된다
  if(a >= b){
  	console.log("a는 b보다 크거나 같다") // true일때 실행
  } else {
  	console.log("a는 b보다 작다") // false일때 실행
  }
</script>

Boolean과 비교연산자

비교연산자는 불리언 타입과 절대 떼어낼 수 없는 연산자이다.
우리가 기본적으로 아는 <, <=, >, >=등 처럼 부등호가 비교연산자라고 한다.

비교연산자는 값을 불리언 타입의 값으로 반환한다.

<script>
  console.log(5 > 1); // true
  console.log(3 >= 4); // false
  console.log(2 < 5); // true
  console.log(1 <= 0); // false
</script>

물론 변수의 값을 비교할 수도 있다.

<script>
  let value1 = 50;
  let value2 = 30;
  
  console.log(value1 > value2); // true
  console.log(value1 < value2); // false
</script>

부등호 같은 비교연산자도 있지만 처음보는 등호가 있다.

바로 ==, ===, !=, !== 이다.

• == : 동등 비교연산자, 값만 같으면 true를 반환한다. 데이터 타입은 비교하지 않는다.

<script>
  // 숫자 타입과 문자열 타입의 30
  let value1 = 30;
  let value2 = '30';
  
  value1 == value2 // true, 값이 같음
  value1 == 30 // true, 값이 같음
  value2 == 20 // false, 값이 다름
</script>

• === : 일치 비교연산자, 값과 데이터 타입이 모두 같으면 true를 반환한다.

'동등 비교연산자'와 같은 예로 비교해보면 차이를 알 수 있다.

<script>
  // 숫자 타입과 문자열 타입의 30
  let value1 = 30;
  let value2 = '30';
  
  value1 === value2 // false
  value1 === 30 // true, 값과 데이터 타입이 같음
  value2 === 20 // false
</script>

• != : 부동등 비교, 값이 다르면 true를 반환한다. 데이터 타입은 비교하지 않는다.

<script>
  // 숫자 타입과 문자열 타입의 30
  let value1 = 30;
  let value2 = '30';
  
  value1 != value2 // false, 값이 같음 
  value1 != 30 // false, 값이 같음
  value2 != 20 // true, 값이 다름
</script>

• !== : 불일치 비교, 값과 데이터형 중 하나라도 다르면 true를 반환한다.

<script>
  // 숫자 타입과 문자열 타입의 30
  let value1 = 30;
  let value2 = '30';
  
  value1 !== value2 // true, 값은 같으나 데이터 타입이 다름 
  value1 !== 30 // false, 값과 데이터 타입이 같음
  value2 !== 20 // true, 값이 다르지만 데이터 타입이 같음
</script>

비교연산자가 아닌 논리연산자인 !, !!도 불리언 타입의 값을 반환한다.

• ! : 부정의 의미를 가진 논리연산자, 값의 '반대'의 값을 반환한다.

<script>
  let value1 = true;
  let value2 = false;
  
  // 변수의 값의 반대로 반환해준다.
  !value1; // false;
  !value2; // true;
</script>

• !! : 부정의 부정의 의미를 가진 논리연산자, 값의 '반대의 반대'의 값을 반환한다.

<script>
  let value1 = true;
  let value2 = false;
  
  // 변수의 값의 반대의 반대로 반환해준다.
  !!value1; // true;
  !!value2; // false;
</script>

비교연산을 할 때 주의해라! Truthy와 Falsy 값

위에서 우리가 예제로 본 것은 명백하게 true값과 false인 것을 볼 수 있다.

하지만 true 같은 값인 Truthy, false 같은 값인 Falsy란 것이 존재한다. 물론 우리가 비교 연산을 할 때 혼란을 줄 수 있는 것임으로 반드시 알고 있어야한다.

우선 Falsy값을 정리하면 나머지는 Truthy값이라고 생각하면 된다.

Falsy

false 같은 값을 의미한다.
아래의 값 모두 false를 반환한다.

• false
• undefined
• null
• 0, -0
• NaN
• 빈 문자열 ''

Truthy

Truthy은 true 같은 값을 의미한다. 위의 Falsy값을 제외한 나머지는 true를 반환한다.

그 중에서 주의해야하는 것을 정리해보겠다.

• 빈 배열 []
• 빈 객체 {}
• 문자열 0

위의 Truthy값과 Falsy값은 꼭 알아두도록 하자!

그 다음 혼란을 줄 것 같은 비교연산을 보도록 하자.

<script>
  // 모두 true를 반환한다.
  true == 1;
  true == "1";
  false == 0;
  false == "0"
  
  // false를 반환한다.
  true == "true";
  false == "false";
</script>

우선 불리언 타입의 true와 숫자 타입 1은 같으며 동등 연산자 ==를 사용하여 문자열 타입 "1"과 비교해도 true를 반환한다.

마찬가지로 불리언 타입의 false도 숫자 타입 0과 같으며, 문자열 타입 "0"과 비교해도 true를 반환한다.

하지만 불리언 타입 true, false 각각 문자열 타입 "true", "false"는 값이 다르다는 결과가 나오기 때문에 false가 반환된다.

가장 혼란을 일으키는 비교연산 🤷

위의 예제 코드보다 더 혼란을 일으키는 비교연산을 정리해보도록 하겠다.

정리하는 아래의 것들은 이해하기 보단 암기를 하는 것이 좋다.

빈 문자열 ''과 비교

<script>
  0 == '' // true
  false == '' // true
</script>

빈 문자열 ''은 false와 0과 같다.

null과 undefined 비교

<script>
  false == null // false
  false == undefined // false
  null == undefined // true
</script>

null은 이전 게시물에서 설명했듯이 의도적으로 값이 없다는 것을 명시하는 타입이다. 하지만 null은 타입을 알아보면 object타입으로 출력이 된다. 이것은 이전 게시물에서 설명했듯이 자바스크립트의 개발자 "브랜든 아이크"가 실수임을 인정한 바 있다.

아무튼 null과 false는 값이 다르기 때문에 false이며, undefined 또한 false와 값이 다르기 때문에 false가 반환된다.

undefined의 데이터 타입은 undefined이며 null은 개발자의 실수이지만 데이터 타입은 object이다. 명심하도록 하자!

하지만 null과 undefined는 값이 같다고 하여 true를 반환한다. 🤦

NaN 비교

<script>
  NaN == NaN // false
  NaN === NaN // false
</script>

숫자 타입이지만 숫자가 아니라는 뜻을 가진 NaN는 NaN과 비교하면 false를 반환하고 데이터 타입까지 비교하는 일치 연산자 ===로 비교를 해도 똑같이 false이다.

함수 isNaN()을 통한 비교

<script>
  isNaN(undefined) // true
  isNaN(null) // false
  isNaN(NaN) // true
  Number.isNaN(undefined) // false
  Number.isNaN(null) // false
  Number.isNaN(NaN) // true
</script>

isNaN(value)

함수 isNaN()는 어떤 값이 NaN인지 판별하여 불리언 타입의 값을 반환한다.
하지만 MDN에서는 몇몇의 혼란스러운 케이스를 가지고 있기 때문에 Number.isNaN으로 바꾸는 것을 권장하고 있다.

Number.isNaN(value)

메서드 Number.isNaN()는 주어진 값이 NaN인지 판별한다. isNaN() 함수의 더 엄격한 버전이라고 설명되어 있다. Number.isNaN()는 주어진 값이 '숫자 타입'이고 NaN이면 true, 아니면 false를 출력한다.

!를 이용한 비교

<script>
  ![] // false
  !{} // false
</script>

부정 논리 연산자 !를 통해 빈 배열 []과 빈 객체 {}가 반환값이 false가 나왔다는 것은 둘 다 true인 값이라는 것이다.

!!를 이용한 비교

아래에서 가장 주의해야할 부분은 !![], !!{}, !!""이다.

암기하도록 한다!

<script>
  !!undefined // falsy
  !!null // falsy
  !!NaN // falsy
  !!Infinity // true
  !![] // true
  !!{} // true
  !!"" // falsy
  !!0 // falsy
  !!"hello world" // true
  !!-100 // true
</script>

형 변환을 일으키는 케이스

불리언 타입의 값을 '숫자 타입'의 값으로 형 변환을 할 수 있는 방법이 있다.

<script>
  // 연산자 '+'를 값에 붙여주면 숫자 타입이 된다.
  +false // 0
  +true // 1
  
  // 연산자 '*'를 통해 1을 곱해주면 숫자 타입이 된다. 괄호를 반드시 묶어줄 것
  (false * 1) // 0
  (true * 1) // 1
</script>

---

정리를 마치며 ⛳️

정리하면서 느낀 점은 불리언 타입의 값들은 이해보다 외워야하는 것이 많은 것 같다.

이전에 내가 공부했던 것보다 더 많은 경우가 있어서 다시 한번 복습을 해봐야 할 것 같다.

점점 더 공부할 양이 늘어나서 걱정이 된다. 그래도 꾸준히 블로그 포스팅을 주 2~3회 하는 것을 다시 목표로 하려고 한다.

매일 하면서 나의 페이스를 놓치면 내가 알아야 하는 부분을 한번에 놓칠 것 같기 때문이다..

내 페이스는 내가 관리해야함을 뼈저리게 느끼는 중이다...