Operator

2-1. Comparison-Operator

1) comparison operator

• 동등비교(==, !=)
  • 암묵적 타입 변환을 통해 타입을 일치 시킨 후 같은 값인지 비교
• 일치비교(===, !==)
  • 타입과 값이 모두 일치하는지 비교
• 비교 예시

// 숫자 1, 문자 1 비교, true 비교
console.log(`1 == '1' : ${ 1 == '1'}`);		//true
console.log(`1 == true : ${ 1 == true }`);	//true
console.log(`1 === '1' : ${ 1 === '1' }`);	//false
console.log(`1 === true : ${ 1 === true }`);//false

// null과 undefined 비교
// 둘 다 Falsy한 값으로 판단되기 때문에 동등비교는 true
console.log(`null == undefined : ${ null == undefined }`);	//true
console.log(`null === undefined : ${ null === undefined }`);//false

//NaN은 자신과 일치하지 않는 유일한 값이다.
console.log(`NaN == NaN : ${ NaN == NaN }`);	//false
console.log(`NaN === NaN : ${ NaN === NaN }`);	//false
//빌트인 함수 Number.isNaN을 사용해서 확인해야 한다.
console.log(`Number.isNaN(NaN) : ${ Number.isNaN(NaN) }`);

• 문자열 끼리도 비교 가능하며 유니코드 순으로 비교

// 대소 비교 연산자
console.log(`'apple' < 'banana' : ${ 'apple' < 'banana' }`);	//true
console.log(`'apple' > 'banana' : ${ 'apple' > 'banana' }`);	//false
console.log(`'cat' < 'Zoo' : ${ 'cat' < 'Zoo' }`);				//false
console.log(`'cat' > 'Zoo' : ${ 'cat' > 'Zoo' }`);				//true

2-2. Logical Operator

1) short circuit evaluation

• 단축 평가
  • 표현식을 평가하는 도중 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것
  • && || 연산자 표현식의 결과는 때로는 불리언 값이 아닐 수도 있다.
• OR(||)
  • 하나라도 true일 경우 true / 둘 다 false여야만 false

  //apple값이 true 이므로 banana의 참 거짓을 판별할 필요 없이 apple 반환
  console.log('apple' || 'banana');
  //처음 값이 false 이므로 뒤에 banana 까지 비교해서 banana 값이 반환
  console.log(false || 'banana');

• AND(&&)
  • 하나라도 false인 경우 false / 둘 다 ture여야 true

  //처음 apple 값이 true 이므로 뒤의 banana까지 비교하여 banana 반환
  console.log('apple' && 'banana');
  //처음 값이 false 이므로 뒤의 banana를 비교하지 않고 false 반환
  console.log(false && 'banana');

• 단축 평가를 활용한 if문 대체

var num = 2;

if(num%2 == 0){
    console.log('짝수');
}else{
    console.log('홀수');  
}  

num % 2 == 0 && console.log('짝수');
num % 2 == 0 || console.log('홀수');

// obj == null 혹은 obj == undefined일 경우 false 로 판단
// obj가 Falsy 값이면 좌항만 실행하여 val -> null
// obj가 Truthy 값이면 val -> obj.value
var obj = null;
var val = obj && obj.value;

2-3. ES11 Operator

1)Optional chaining operator

• 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고 그렇지 않으면 우항의 프로퍼티 참조를 이어간다
• 옵셔널 체이닝 연산자 이전에는 논리 연산자 &&을 사용한 단축 평가를 활용했었는데 빈 문자열과 같은 Falsy 값을 false 취급해서 생기는 문제가 있다.

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

2) nullish coalescing operator

• null 병합 연산자
• 좌항의 피연산자가 null 또는 undefined 인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환
• 변수에 기본 값을 설정할 때 유용
• null 병합 연산자 이전에는 논리 연산자 || 를 사용한 단축 평가로 변수에 기본 값을 설정할 수 있었다. 단, 빈 문자열과 같은 Falsy 값을 false로 취급해서 생기는 문제가 있다.

var obj = null;
var test = obj??'기본값';	//obj가 null 이므로 기본값 반환
console.log(test);