39. 옵셔널 체이닝(Opthional Chaining)

옵셔널 체이닝(Opthional Chaining)

- ECMA Script 11버전에 추가
- null 또는 undefined를 확인할 때 쓰이는 연산자
- ?., ??

 

논리 연산자 사용 예제

// 논리 연산자(&&, ||)
const obj1 = {name:'김사과'};
const obj2 = {name:'반하나', lover:'이메론'};
const bool1 = false;

// obj1과 obj2 둘다 값이 있으므로
if(obj1 || obj2){
    console.log("둘 다 또는 둘중에 하나가 True");
}

// 객체간의 논리연산자

// and 연산
let result = obj1 && obj2;
console.log(result); //{name: '반하나', lover: '이메론'}

// or 연산
result = obj1 || obj2;
console.log(result); // {name: '김사과'}

function changeLover(obj) {
    if(!obj.lover){
        throw new Error("애인이 없음");
    }
    obj.lover = "애인이 바뀜";
}

function makeNewLover(obj) {
    if(obj.lover){
        throw new Error("애인이 있음");
    }
    obj.lover = '새로운 애인이 생김';
}

// obj1.lover가 false이기 때문에, 함수가 실행안됨
obj1.lover && changeLover(obj1);
console.log(obj1); // {name: '김사과'}

// obj2.lover가 true이기 때문에, 함수가 실행됨
obj2.lover && changeLover(obj2);
console.log(obj2); // {name: '반하나', lover: '애인이 바뀜'}


// 기본값을 설정
// 자바스크립트의 default parameter: undefined
function print(message) {
    const text = message || "hello"; // or 연산은 앞의 값이 true면 뒤로 안넘어감
    console.log(text);
}
print('안녕'); // 안녕
print(); // hello
print(undefined); // hello
print(null); // hello
print(''); // hello

옵셔널 체이닝 예제

// null 또는 undefined인 경우를 확인할 때
let item = {price: 1000};
const price = item && item.price;
console.log(price); // 1000

let item2 = {price:1000};
const price2 = item2?.price; // item && item.price와 같은 의미
console.log(price2);  // 1000

let banana = {name:"반하나", lover:{name:"오렌지"}};

function printLoverName(obj) {
    const loverName = obj?.lover?.name;
    console.log(loverName);
}
printLoverName(banana); // 오렌지

let num = 0;
console.log(num || '-1');
console.log(num ?? '-1'); // null, undefiend 값을 0이라고 생각함 ??: 대체값
console.log(banana.lover?.name ?? '이메론'); // name이 있다면 name를 찍어주고 없으면 이메론