04_자바스크립트 : 연산자 (비교연산자, 논리연산자, ES11 operator)

 

 

1 . 비교 연산자

- 좌항과 우항의 비교 연산자를 비교한 다음 그 결과를 불리언 값으로 반환

- if문이나 for문과 같은 제어문의 조건식에서 주로 사용

- 동등 비교 (==, !=) : 암묵적 타입 변환을 통해 타입 일치 시킨 후 같은 값인지 비교

- 일치 비교 (===, !==) : 타입과 값이 모두 일치하는지 비교

-

 

 

2. 논리 연산자

단축 평가 : 표현식을 평가하는 도중 평가 결과가 확정 된 경우 나머지 평가 과정을 생략하는 것 

 

OR의 경우 'apple'이 이미 Truthy 값이여서 true로 평가되고
논리 연산의 결과를 결정한 첫 번째 피연산자 apple을 그대로 반환
console.log('apple' || 'banana');
=> apple
console.log(false || 'banana');    
=> banana


AND의 경우 좌항, 우항 모두 확인해야 하므로
논리 연산의 결과를 결정하는 두 번째 피연산자 banana를 그대로 반환
console.log('apple' && 'banana');  
=> banana
console.log(false && 'banana');     
=> false

 

-  단축 평가를 활용하면 if문을 대체할 수 있음

var num = 2;

(1) if문
if(num % 2 == 0) 
    console.log('짝수');
else
    console.log('홀수');
    
(2) 단축 평가
num % 2 == 0 && console.log('짝수');
num % 2 == 0 || console.log('홀수');

 

 

3. ES11 operator

- ES11(ECMAScript2020)에서 도입된 연산자

 

옵셔널 체이닝 연산자

: 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.

 

var obj = null;
var val = obj?.value;
console.log(val);
=> undefined


옵셔널 체이닝 연산자 이전에는 논리 연산자 &&를 사용한 단축 평가를 활용했는데
빈 문자열과 같은 Falsy 값을 false 취급해서 생기는 문제가 있다

var str = '';
var len = str && str.length;    
=> str 즉 빈문자열이 담김
var len2 = str?.length;        
=>빈 문자열은 null or undefined가 아니므로 문자열 길이 값이 담김

 

 

null 병합 연산자

:  좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다. 변수에 기본 값을 설정할 때 유용하다.

 

var test = null ?? '기본 값';
console.log(test);
=> 기본 값

null 병합 연산자 이전에는 논리 연산자 || 를 사용한 단축 평가로 변수에 기본 값을 설정할 수 있었다.
단, 빈 문자열과 같은 Falsy 값을 false 취급해서 생기는 문제가 있다.
var val = '' || '기본 값';      
=> 기본 값 
(빈 문자열도 유효하게 처리하고 싶지만 기본 값 문자열이 대입)
var val2 = '' ?? '기본 값';
=> 빈 문자열 
(null, undefined가 아닌 경우 그대로 반환)