연산자(Operator)

💁‍♀️ 연산자(Operator)란,
각각의 연산을 의미하는 기호

• 연산자의 종류. 연산자는 기능에 따라 다양한 종류로 구분 가능

---

👀 비교 연산자

1) 동등 비교 & 일치 비교

💁‍♀️ 동등 비교 & 일치 비교란,

• 동등 비교 == != : 암묵적 타입 변환을 통해 타입 일치시킨 후 값은 값인지 비교 (타입이 달라도 같다는 결과 출력)
• 일치 비교 === !== : 타입과 값이 모두 일치하는지 비교

[1] 숫자 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

[2] 숫자 0, 문자 '0', 빈문자열 '', false 비교

console.log(`0 == '0' : ${ 0 == '0'}`);         // true
console.log(`0 == '' : ${ 0 == ''}`);           // true
console.log(`0 == false : ${ 0 == false }`);    // true
console.log(`0 === '0' : ${ 0 === '0'}`);       // false
console.log(`0 === '' : ${ 0 === ''}`);         // false
console.log(`0 === false : ${ 0 === false }`);  // false

[3] null과 undefined 비교

console.log(`null == undefined : ${ null == undefined }`)   // true
console.log(`null === undefined : ${ null === undefined }`) // false

[4] NaN 비교

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)}`);   // true

[5] 문자열과 비교 연산자

유니코드 순으로 비교

// 일치 비교 연산자
console.log(`'hello' === 'hello' : ${ 'hello' === 'hello'}`); // true
console.log(`'hello' !== 'hello' : ${ 'hello' !== 'hello'}`); // false

// 대소 비교 연산자 (알파벳 사전순으로 뒤에 오는 것이 더 큼)
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

---

👀 논리 연산자

1) 단축 평가 🔥중요🔥

💁‍♀️ 단축 평가란,
표현식을 평가하는 도중 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것

• AND(&&)일 때 앞이 F면 뒤를 무시, OR(||)일 때 앞이 T면 뒤를 무시

[1] boolean 값이 아닌 &&, || 연산자 표현식의 결과

◼ AND의 경우 좌항, 우항 모두 확인해야하므로 논리 연산의 결과를 결정하는 두 번째 피연산자 'banana'를 그대로 반환

console.log('apple' && 'banana');   // banana => 'apple'은 truthy한 값이지만 AND연산자 이므로 뒤의 'banana'까지 평가
console.log(false && 'banana');     // false => 이미 하나가 false이므로 뒤 평가 X (단축평가)

◼ OR의 경우 'apple'이 이미 Truthy한 값이어서 true로 평가되고 논리 연산의 결과를 결정한 첫 번째 피연산자 'apple'을 그대로 반환

console.log('apple' || 'banana');   // apple => 'apple'은 truthy한 값이므로, 이미 T인 결과로 인해 apple 출력 (단축평가)
console.log(false || 'banana');     // banana

[2] 단축평가의 활용

◼ 단축 평가를 활용하여 if문 그대로 표현 (if문 대체)

var num = 2;

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

//  단축 평가 활용
num % 2 == 0 && console.log('짝수');
num % 2 == 0 || console.log('홀수');

◼ 단축 평가를 활용하여 null 또는 undefined를 확인 후, 프로퍼티 참조

var obj = null;

// TypeError: Cannot read properties of null 오류
// var val = obj.value;

>>> obj가 Falsy(null, undefined)값이면 좌항만 실행하며 val -> null
>>> obj가 Truthy 값이면 val -> obj.value

var val = obj && obj.value; 
// obj라는 값이 있는지 먼저 판단 후, falsy한 값이면 실행X, truthy한 값이면 value 출력

---

👀 ES11ver 연산자 🔥중요🔥

1) optional chaining 연산자

💁‍♀️ optional chaining 연산자란,
좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어감

• optional chaining 연산자 이전에는 논리 연산자 &&를 사용한 단축 평가를 활용했었으나, 빈 문자열과 같은 Falsy값을 false취급해서 생기는 문제 존재

[1] optional chaining 연산자의 활용

?.

var obj = null;
// var val = obj.value;
var val = obj?.value; // obj가 null 또는 undefined면,
console.log(val); // undefined 반환

var str = '';
var len = str && str.length;
console.log(len); // 아무것도 출력 X (의도와 다름)
// 옵셔널 체이닝을 이용한다면,
var len2 = str?.length;
console.log(len2); // 0을 출력

2) null 병합 연산자

💁‍♀️ null 병합 연산자란,
좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환

• 변수에 기본 값을 설정할 때 유용
• null 병합 연산자 이전에는 논리 연산자 ||를 사용한 단축 평가로 변수에 기본 값을 설정할 수 있었으나, 빈 문자열과 같은 Falsy 값을 false로 취급해서 생기는 문제 존재

[1] null 병합 연산자의 활용

??

var obj = null;
var test = obj ?? '기본 값'; // '기본 값'은 좌항이 null이나 undefined인 경우 사용할 플랜B
console.log(test);

var val = ''|| '기본 값';
console.log(val); // '기본 값'을 출력 (빈 문자열이 false로 취급되었기 때문)
var val2 = '' ?? '기본 값'; 
console.log(val2); // 빈 문자열을 출력 (빈 문자열이 false로 취급되지 않고 그대로 출력)

---