논리 연산자 || / && / ?? / ?. (or, and, 옵셔널 체이닝,Nullish coalescing)

|| (or)

 첫번째 true 찾는다.
1. 왼쪽부터 오른쪽으로 나가면서 true 체크해서 true면 그 놈의 원래 값을 반환
2. 앞에가 다 false면 마지막놈의 연사자값을 반환
3. 함수같은 무거운건 뒤부터놓고 가벼운 연산자는 앞에 놓고 실행하게해라

const value1 = 4 < 2
const value2 = 3-3;
function check() {
    for (let i = 0; i < 10; i++){
        console.log('wait');
    }
    return false
}
const value4 = 4+1
console.log(value1 || value2 || value4 || check() ); //5 앞에가 다 false 이므로 마지막값

 

 

 

 

---

&& (and)

 첫번째 false 찾는다.
1. 왼쪽부터 오른쪽으로 나가면서 false 체크해서 false면 그 놈의 원래 값을 반환
2. 앞에가 다 true면 마지막놈의 연사자값을 반환
3. 함수같은 무거운건 뒤부터놓고 가벼운 연산자는 앞에 놓고 실행하게해라

const value1 = 4 > 2
const value2 = 3 - 2;
function check() {
    for (let i = 0; i < 10; i++){
        console.log('wait');
    }
    return true
}
const value4 = 4+1
console.log(value1 && value2 && check() && value4); //5  앞에 다 false이므로 마지막값

---

?? (nullish-coalescing)

nullish 즉, undefined와 null에 대해서만 기본값 처리를 할 수 있다. 그외는 우측 값을 반환

let a = null ?? 'hello';
let b = '' ?? true;
let c = false ?? true;
let d = 0 ?? 1;
let e = undefined ?? 'world'; 
console.log(a);	// 'hello'
console.log(b); // ''
console.log(c); // false
console.log(d); // 0
console.log(e); // 'world'

---

?. (es2020 Optional Chaining)

객체의 속성을 접근할 때 . 연산자 대신에 ?. 연산자를 사용하면, 해당 객체가 nullish 즉, undefined나 null인 경우에 평가를 멈추고 TypeError 대신에 undefined를 얻게 됩니다.

//사례.
let user = {}; // 주소 정보가 없는 사용자
alert(user.address.seoul); // TypeError: Cannot read property 'street' of undefined

let user = {name: {first: "John", last: "Doe"}}

user?.name?.first //'John'
user?.address?.street //undefined


//?. 연산자는 배열이나 함수에서도 사용할 수 있습니다.
arr = null;
arr?.[0] //undefined


func = undefined
func?.() //undefined

?? 와 ?.를 활용해보면

user?.id ?? "아이디가없어요."  // "아이디가없어요."