Section 2. 자바스크립트 불리언(boolean)과 관련 연산자

불리언이라는 자료형은 true 와 false 의 값을 갖는 자료형이다. 불리언 자료형을 활용하는 예제는 다음과 같다.

let a = 1 === 2; //false
let b = 'abc' !== 'def' //true
let c = a !== b; //true
let d = typeof a === typeof b === true; 

console.log(a, typeof a); //false 'boolean'
console.log(b, typeof b); //true 'boolean'
console.log(c, typeof c); //true 'boolean'
console.log(d, typeof d); //true 'boolean'

1===2는 당연히 false다. 따라서 변수 a에는 false라는 값이 담겼다.

문자열 abc는 당연히 문자열 def와 다른다. 따라서 b에는 true라는 값이 담긴다.

a에는 false, b에는 true라는 값이 있다. 둘의 값은 당연히 다르므로 c에는 true가 담긴다.

typeof a는 boolean이다. b도 마찬가지 이다. 따라서 typeof a === typeof b는 true이다. 

이 값을 가지고 식의 맨 마지막의 true와 비교를 하면 당연히 true가 되므로 d에는 true가 담긴다.

이처럼 식이 길 때는 앞에서부터 계산을 한다는 것을 명심하자.

 

불리언의 연산자는 부정 연산자, AND 와 OR 연산자, 삼항연산자 등이 있다.

1. 부정 연산자

말그대로 boolean값을 반대로 바꾸는 연산자를 말한다. 

console.log(
  true, !true, false, !false
);

console.log(
  true, !true, !!true, !!!true
);

console.log(
  false, !false, !!false, !!!false
);

console.log(
  true === !false,
  !(1 == '1'),
  !(1 === '1'),
  !(typeof false === 'boolean')
);

단순히 !의미는 부정한다 라는 의미로 불리언 값에 적용해보면 !true 하면 false가 되고 !false 하면 true가 되는 것으로 이해하면 된다.

 

2. AND / OR 연산자

a. && 는 AND 연산자라는 의미로 양쪽이 모두 true여야 true 값을 반환한다.

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

b. || 는 OR 연산자이다. 어느 한 쪽이라도 true면 true를 반환한다.

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

 

단축평가 short circuit       평가는 실행을 말한다.

컴퓨터는 항상 가장 효율적인 메모리 사용을 하려고 한다. 

따라서 앞서 살펴본 AND, OR 연산자를 사용한다면 다음과 같이 실행 할 수 있다.

-&& : 앞의 것이 false면 뒤의 것을 평가할 필요가 없다.

-|| : 앞의 것이 true면 뒤의 것을 평가할 필요가 없다.

let error = true;
// error = false;

// 앞의 것이 true일 때만 뒤의 코드 실행
error && console.warn('오류 발생!'); //error가 true면 이것만 실행된다

// 앞의 것이 false일 때만 뒤의 코드 실행
error || console.log('이상 없음.'); //error가 true면 이건 무시된다

let x = true;
x = false;

// ⭐️ &&, || 연산자는 값 자체를 반환
let y = x && 'abc'; //무시된다
let z = x || 123;

console.log(y, z); //false 123

error 변수에는 true가 들어있다. 단축평가에 의해서 ||연산자를 사용한 식은 무시되는 것을 볼 수 있다. 컴퓨터 입장에서는 뒤의 코드를 실행할 필요도 없다는 뜻이다. 

&&앞이 false여서 아에 뒤의 코드가 무시되는 것을 볼 수 있다. 따라서 z에만 123 이라는 값이 담겼고 y에는 false라는 값이 담겼다.

 

3. 삼항연산자

문법은 다음과 같다. ~ ? ~ : ~

let x = true;
// x = false;

let y = x ? '참입니다.' : '거짓입니다.';
console.log(y); //참입니다.

풀어서 말하면 다음과 같다. 

x의 값이 참이면 ? '참입니다.' 를 반환

x의 값이 거짓이면 ? '거짓입니다.' 를 반환

즉, x는 true 값을 가져서 y는 '참입니다.' 값을 가지게 된다. 

 

Truthy 와 Falsy

말 그대로 true 또는 false로 평가되는 값들을 말한다.

 

Truthy

console.log(
  1.23 ? true : false,
  -999 ? true: false,
  '0' ? true : false,
  ' ' ? true : false,
  Infinity ? true : false,
  -Infinity ? true : false,
  {} ? true : false,
  [] ? true : false,
);

삼항 연산자 첫 부분에는 불리언이 들어가 있어야 하는데 지금은 다른 값이 들어가 있다.

Truthy 즉, true를 반환하는 값들을 삼항 연산자 첫 부분에 넣었기 때문에 출력해보면 모두 true 값을 반환한다.

*숫자는 0 과 NaN을 제외한 모든 값들이 true를 반환한다고 할 수 있다.

 

Falsy

console.log(
  0 ? true : false,
  -0 ? true : false,
  '' ? true : false,
  null ? true : false,
  undefined ? true : false,
  NaN ? true : false,
);

Falsy 즉, false를 반환하는 값들이 처음에 있기 때문에 모두 false 값을 반환한다.