본문 바로가기
JavaScript

불리언(boolean)과 관련 연산자

by chanfficial 2023. 3. 5.
console.log(true, typeof true); // true 'boolean'
console.log(false, typeof false); // false 'boolean'
let a = 1 === 2;
let b = 'abc' !== 'def'
let c = a !== b;
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. 연산자

 

(1) 부정 연산자

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

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

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

 

(2) AND / OR 연산자

 

&& - AND : 양쪽 모두 true 일 때만 true 를 반환

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

 

|| - OR : 한 쪽이라도 true 이면 true 를 반환

console.log(
  true || true,
  true || false,
  false || true,
  false || false,
); // true true true false
let x = 14;

console.log(
  (x > 10 && x <= 20) || x % 3 === 0
); // true

- () 안의 식이 true 때문에 뒤의 값과 상관없이 true 가 반환됨

 

// 💡 드 모르간의 법칙
let a = true;
let b = true;

console.log(
  !(a && b) === (!a || !b),
  !(a || b) === (!a && !b)
); // 💡 항상 true

- 드 모르간의 법칙 : 논리곱(합)의 부정은 각각 부정의 논리합(곱)과 같다.

 

💡 단축평가 short circuit

  • && : 앞의 값이 false 면 뒤의 값을 평가할 필요가 없음
  • || : 앞의 값이 true 면 뒤의 값을 평가할 필요가 없음
  • 평가는 곧 실행 - 이 점을 이용한 간결한 코드
  • 연산 부하가 적은 코드를 앞에 두면 리소스 절약 가능
let error = true;

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

// 앞의 것이 false일 때만 뒤의 코드 실행
error || console.log('이상 없음.'); // true

 

⭐️ &&|| 연산자는 값 자체를 반환

let x = true;

let y = x && 'abc';
let z = x || 123;

console.log(y, z); // abc true
let x = false;

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

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

 

(3) 삼항연산자 - ~ ? ~ : ~

  • 값이 true 이면 ? 뒤의 값을 반환하고 false 이면 : 뒤의 값을 반환함
let x = true;

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

console.log(
  'num은 3의 배수' +
  (num % 3 === 0 ? '입니다.' : '가 아닙니다.')
); // num은 3의 배수가 아닙니다.
let error = true;

error 
  ? console.error('오류 발생!') 
  : console.log('이상 없음');
// 오류 발생!

2. Truthy(참 같은 값) vs Falsy(거짓 같은 값)

: true 또는 false 로 평가되는 값들

 

(1) Truthy(참 같은 값)

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

 

⚠️ 값이 있다고 true와 '같다'는 의미는 아님

console.log(
  1.23 == true,
  ' ' == true,
  {} == true
); // false false false

 

(2) Falsy(거짓 같은 값)

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

 

💡 어떤 값들은 false로 타입변환됨

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

console.log(
  null == false,
  undefined == false,
  NaN == false,
); // false false false

 

let x = 0;
let y = 1;

x && x++;
y && y++;

console.log(x, y); // 0 2
let x = 2;
let y = 3;

console.log(
  x % 2 ? '홀' : '짝',
  y % 2 ? '홀' : '짝'
); // 짝 홀

 

let x = '';
let y = '회사원';
let z = x || y;

console.log(z); // 회사원
x = x || '단기알바';
y = y || '단기알바';

console.log(x, y); // 단기알바 회사원

 

💡 boolean으로 직접변환

// 한 번 부정
console.log(
  !1, !-999, !'hello',
  !0, !'', !null
); // false false false true true true
// ⭐️ 두 번 부정하여 해당 boolean값으로
console.log(
  !!1, !!-999, !!'hello',
  !!0, !!'', !!null
); // true true true false false false
let x = 123;

console.log(
  'x는 홀수인가?',
  !!(x % 2)
); // x는 홀수인가? true

 

 

정리참조

https://www.yalco.kr/@javascript/2-7/

 

불리언(boolean)과 관련 연산자

어려운 프로그래밍 개념들을 쉽게 설명해주는 유튜브 채널 '얄팍한 코딩사전'. 영상에서 다 알려주지 못한 정보들이나 자주 묻는 질문들의 답변들, 예제 코드들을 얄코에서 확인하세요!

www.yalco.kr

 

'JavaScript' 카테고리의 다른 글

객체와 배열 미리보기  (2) 2023.03.05
그 외의 연산자들  (0) 2023.03.05
숫자(Number)와 관련된 연산자  (0) 2023.03.05
문자열에 사용되는 연산자  (0) 2023.03.03
문자열(string) - 텍스트 데이터  (0) 2023.03.01