[JavaScript] "?"의 기능들

1. 삼항 연산자(Ternary Operator)

if-else 문으로 처리할 수 있지만 삼항 연산자를 사용하면 가독성은 떨어질 수 있지만 간결하게 표현이 가능하다. 브런치(Branch)문의 원래 기능처럼 런타임에 변수나 상태 등을 변경할 때 사용할 수 있다.

 

Fig 1. 삼항연산자

const actions = ["Work", "Eat", "Leave"];

console.log(actions.includes("Eat") ? "Hamburger" : "Coding");
// "Hamburger"

 

2. 선택적 체인(Optional Chaining)

존재하지 않는 속성(property)을 호출하면 오류를 반환한다. 이때 오류가 아닌 undefined를 반환하도록 하는 선택적 체인(Optional Chaining) 방법이 있다. And를 계속 나열하는 것보다는 가독성이 좋다.

 

const obj = {
    do : {
        eat: "Hamburger",
        drink: "Coke",
        smoke: "cigar",
        work: "coding"
    },
    work: true
}

// Error
console.log(obj.work.eat.code())

// Optional Chaining
console.log(obj.work?.eat?.code())
// undefined

// Optional Chaining with Ternary Operator
console.log(obj && obj.work && obj.do ? true : false)
console.log(obj?.do?.work ? true : false)
// true

 

3. Nullish 통합 연산자(Nullish Coalescing Operator)

Nullish 병합 연산자(Nullish Coalescing Operator) ??를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 확정되어있는 변수를 찾을 수 있다. or 연산과 비슷해 보이지만 null 또는 undefined를 제외하고 무조건 왼쪽의 변수를 선택하여 코드 구조를 더 예측 가능하고 이해하기 쉽게 구성할 수 있다.

 

const batman = {
    name : null || "batman",
    real_name : "" || "wayne",
    iq : 0 || 300,
    power : 300 || 0,
    money : undefined || 1000
}
console.log(batman)
// { name: 'batman', real_name: 'wayne', iq: 300, power: 300, money: 1000 }

const hulk = {
    name : null ?? "Hulk",
    real_name : "" ?? "Bruce",
    iq : 0 ?? 300,
    power : 300 ?? 0,
    money : undefined ?? 1000
}
console.log(hulk)
// { name: 'Hulk', real_name: '', iq: 0, power: 300, money: 1000 }

 

---

참고 자료

 

https://ichi.pro/ko/javascript-ui-mabeob-217281274422961