새소식

프론트엔드 공부/자바스크립트

Boolean 타입 (볼린형, 논리타입), 비교연산자, 논리연산자

  • -

Boolean 타입 (볼린형, 논리타입)

 

Boolean - JavaScript | MDN

Boolean 객체는 불리언 값을 감싸고 있는 객체입니다.

developer.mozilla.org

불린형(논리 타입)은 true와 false 두 가지 값밖에 없는 자료형이며 불린형은 긍정이나 부정을 나타내는 값을 저장할 때 사용한다. 컴퓨터과학에서 주로 참은 1, 거짓은 0에 대응하나 언어마다 차이가 있다. 숫자를 쓰지 않고 참과 거짓을 나타내는 영단어 true와 false를 쓰기도 한다.

Javascript에서 불리언 조건은 어떤 코드 부문이 실행되어야 할 지(예를 들어 if 절 안에서) 또는 어떤 코드 부문을 반복해야 할지(예를 들어 for 문 안에서) 결정하는 데 사용한다.

true;
false;


/* JavaScript if문 */
if (boolean conditional) {
  // 조건이 참일 경우 실행되는 코드
}
if (boolean conditional) {
  console.log("boolean conditional resolved to true");
} else {
  console.log("boolean conditional resolved to false");
}
/* JavaScript for 루프 */
for (control variable; boolean conditional; counter) {
  // 조건이 참일 경우 반복해서 실행할 코드
}

불린값은 비교 결과를 저장할 때도 사용된다. 아래 예시처럼 isFreater변수에 4가 1보다 큰값이다 라고 할당하고 alert로 확인하면 true값이 나오는걸 볼 수 있다.

let isGreater = 4 > 1;  // 정수 4는 정수 1보다 큰 값이다.

alert( isGreater ); // true (비교 결과: "yes")

falsy 값

불리언 타입은 아니지만, 자바스크립트에서 false로 “여겨지는” 값이 일부 있는데, 이를 falsy 값이라고 합니다. 반대로 true로 “여겨지는” 값은 truthy 값이라고 합니다. truthy 값은 매우 많아서, falsy 값을 암기하면 구분하기 쉽다.

// 대표적인 falsy 값
false
0
-0
0n
""
''
``
null
undefined
NaN

비교연산자(comparison operator)

불리언은 비교연산자(comparison operator)로 두 값이 같은지 다른지를 확인할 때 유용하다.

  • 보다 큼·작음: a > b, a < b
  • 보다 크거나·작거나 같음: a >= b, a <= b
  • 같음(동등): a === b. 등호 =가 세 개 연달아 오는 것에 유의.  a ​​= b와 같이 등호가 하나일 때는 할당을 의미한다.
  • 같지 않음(부등): 같지 않음을 나타내는 수학 기호 ≠는 자바스크립트에선 a != b로 나타냅니다. 할당연산자 = 앞에 느낌표 !를 붙여서 표시합니다.

비교 연산자설명

== 왼쪽 피연산자와 오른쪽 피연산자의 값이 같으면 참을 반환함.
=== 왼쪽 피연산자와 오른쪽 피연산자의 값이 같고, 같은 타입이면 참을 반환함.
!= 왼쪽 피연산자와 오른쪽 피연산자의 값이 같지 않으면 참을 반환함.
!== 왼쪽 피연산자와 오른쪽 피연산자의 값이 같지 않거나, 타입이 다르면 참을 반환함.

같음 연산자 ( ==, ===)

같음 연산자의 평가 결과는 항상 Boolean 형으로 비교가 참인지 나타냅니다.

 

식 및 연산자 - JavaScript | MDN

이 장은 JavaScript의 모든 연산자, 식 및 키워드를 나열합니다.

developer.mozilla.org

==동등 연산자. !=부등 연산자. === (en-US)일치 연산자. !== (en-US)불일치 연산자.

동치 비교 및 동일성 ( 자바스크립트 === 과 == 의 차이)

 

동치 비교 및 동일성 - JavaScript | MDN

ES2015에는 4가지 같음(equality) 알고리즘이 있습니다:

developer.mozilla.org

===를 사용하는 엄격한 같음

=== , !== : 엄격한 동치 연산자 두 피연산자의 값과 타입이 같으면 true, 다르면 false 를 반환합니다. 엄격한 동치 연산자는 보이는 값이 같아도, 두 값의 타입이 다르면 false 가 됩니다.

123 === (100 + 23); // true ("123의 값과 100 + 23의 값은 같다."는 사실이기 때문에 true)
123 === '123'; // false ("123의 값과 '123'의 값은 같다."는 사실이 아니기 때문에 false)
123 !== (100 + 23); // false ("123의 값과 100 + 23의 값은 같지 않다."는 사실이기 아니기 때문에 false)
123 !== '123'; // true ("123의 값과 '123'의 값은 같지 않다."는 사실이기 때문에 true)

==를 사용하는 느슨한 같음

==, != : 느슨한 동치 연산자 느슨한 동치 연산자는 “대체로” 타입이 달라도 값이 같으면 true, 다르면 false를 반환합니다. 이렇게 “느슨하게” 동치 여부를 판단하기 때문에 예외가 많아 현대 웹 개발에서는 사용을 권장하지 않습니다. 참고로 다른 프로그래밍 언어에서는 == , != 를 주로 사용하는데, JavaScript에서는 ===, !== 로 비교해야 합니다.
== 은 사용하지 않는다고 한다. 그냥 그런게 있구나 하고 넘어가도록.

12 == '12' // true

관계 연산자(>, >=, <, <=)

 

식 및 연산자 - JavaScript | MDN

이 장은 JavaScript의 모든 연산자, 식 및 키워드를 나열합니다.

developer.mozilla.org

비교 연산자는 피연산자를 비교하고, 비교가 참인지 여부를 나타내는 Boolean 값을 반환합니다.

> 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 크면 참을 반환함.
>= 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 크거나 같으면 참을 반환함.
< 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 작으면 참을 반환함.
<= 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 작거나 같으면 참을 반환함.

 

in  in 연산자는 객체에 주어진 속성이 있는지를 결정합니다. instanceof instanceof 연산자는 객체가 다른 객체의 인스턴스인지 판별합니다.
< (en-US)작음 연산자. > (en-US)큼 연산자. >= (en-US)
크거나 같음 연산자.
<= (en-US)
작거나 같음 연산자.
> , < , >= , <= : 대소 관계 비교 연산자 두 피연산자의 값의 크기를 비교합니다. 수학에서의 부등호 기호의 사용법과 유사합니다.
100 > 200; // false ("100은 200보다 크다."는 거짓)
200 > 100; // true ("200은 100보다 크다."는 참) 
100 >= 100; // true ("100은 100보다 크거나 같다."는 참)
200 <= 100; // false ("200은 100보다 작거나 같다."는 거짓)

논리연산자(logical operator)

 

표현식과 연산자 - JavaScript | MDN

이번 장에서는 JavaScript의 표현식과 함께 할당, 비교, 산술, 비트 계산, 논리, 문자열, 삼항 등 다양한 연산자를 살펴보겠습니다.

developer.mozilla.org

자바스크립트엔 세 종류의 논리 연산자 ||(OR), &&(AND), !(NOT)이 있습니다.

연산자에 '논리’라는 수식어가 붙긴 하지만 논리 연산자는 피연산자로 불린형뿐만 아니라 모든 타입의 값을 받을 수 있습니다. 연산 결과 역시 모든 타입이 될 수 있습니다.

&& 논리식이 모두 참이면 참을 반환함. (논리 AND 연산)
|| 논리식 중에서 하나라도 참이면 참을 반환함. (논리 OR 연산)
! 논리식의 결과가 참이면 거짓을, 거짓이면 참을 반환함. (논리 NOT 연산)

 

  ||   : 논리합 (OR)   ‘OR’ 연산자는 두 개의 수직선 기호로 만들 수 있습니다.

두 값 중 하나만 true 여도 true 로 판단합니다.

true || false; // true
false || true; // true
100 > 200 || 200 > 100; // true ("100은 200보다 크다" 혹은 "200은 100보다 크다" 중 하나는 true)

두 값이 모두 falsefalse 로 판단합니다.

false || false // false
200 < 100 || 20 < 10; // false

 &&  : 논리곱(AND)  두 개의 앰퍼샌드를 연달아 쓰면 AND 연산자 &&를 만들 수 있습니다.

두 값이 모두 truetrue 로 판단합니다.

true && true // true
200 > 100 && 20 > 10; // true

두 값 중 하나만 false 여도 false 로 판단합니다.

true && false // false
false && true // false
100 > 200 && 200 > 100; // false
var o1 = true || true;      // t || t는 true 반환
var o2 = false || true;     // f || t는 true 반환
var o3 = true || false;     // t || f는 true 반환
var o4 = false || (3 == 4); // f || f는 false 반환
var o5 = 'Cat' || 'Dog';    // t || t는 Cat 반환
var o6 = false || 'Cat';    // f || t는 Cat 반환
var o7 = 'Cat' || false;    // t || f는 Cat 반환

논리 부정 연산자(!)의 경우, 사실 관계를 반대로 표현합니다.

   !    : 부정(NOT)

오른쪽 피연산자와 반대의 사실을 반환합니다. 단일 피연산자를 true로 변환할 수 있으면 false를 반환합니다. 그 외에는 true를 반환합니다.

!true // false
!(100 > 200) // true

var n1 = !true;  // !t는 false 반환
var n2 = !false; // !f는 true 반환
var n3 = !'Cat'; // !t는 false 반환

falsy, truthy의 반대 값을 반환합니다.

!0 // true
!'' // true
!1 // false
!'코드스테이츠' // false
Contents

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.