1. Optional Chaining (?.)

?. 연산자는 객체의 속성이나 메서드가 존재하지 않을 경우, undefined를 반환하도록 합니다. 이를 통해 null 또는 undefined 객체를 안전하게 다룰 수 있습니다.

let user = {
  name: "Alice",
  address: {
    city: "Wonderland"
  }
};

console.log(user.address?.city); // "Wonderland"
console.log(user.address?.zipCode); // undefined (zipCode가 없으므로)
console.log(user.contact?.phone); // undefined (contact가 없으므로)

• JavaScript: Optional chaining (?.)은 ECMAScript 2020 (ES11)에서 도입된 JavaScript 표준 기능입니다. 따라서 ES11을 지원하는 최신 브라우저와 Node.js 버전에서는 JavaScript에서도 사용할 수 있습니다.
• TypeScript: Optional chaining은 TypeScript에서도 사용할 수 있으며, JavaScript와 동일한 방식으로 작동합니다.

2.Non-null Assertion (!)

! 연산자는 변수나 속성이 null 또는 undefined가 아님을 TypeScript에게 확신시키는 용도로 사용됩니다. 이 연산자를 사용하면 컴파일러가 해당 값이 null 또는 undefined가 아님을 가정하게 됩니다.

let button = document.querySelector("button");

// button이 null이 아님을 확신하는 경우:
button!.addEventListener("click", () => {
  console.log("Button clicked");
});

요약

• ?. (Optional Chaining): 안전하게 객체 속성에 접근하여 null 또는 undefined가 아닐 때만 속성 값을 반환합니다. 존재하지 않을 경우 undefined를 반환합니다.
• ! (Non-null Assertion): 특정 값이 null 또는 undefined가 아님을 TypeScript 컴파일러에게 확신시킵니다. 컴파일러가 해당 값을 항상 존재한다고 가정하게 합니다.

이 연산자들을 사용하면 코드의 안전성과 가독성을 높일 수 있습니다.

TypeScript: Non-null assertion (!)은 TypeScript의 문법으로, TypeScript에서만 사용 가능합니다. 컴파일된 JavaScript 코드에서는 이 연산자가 제거됩니다.

3.Nullish Coalescing Operator (??)

이 연산자는 좌항의 값이 null 또는 undefined인 경우 우항의 값을 반환합니다. 좌항의 값이 null이나 undefined가 아닌 경우에는 좌항의 값을 반환합니다.

// JavaScript (ES11) 및 TypeScript에서 사용 가능
let foo = null ?? 'default string';
console.log(foo); // "default string"

let bar = undefined ?? 'default string';
console.log(bar); // "default string"

let baz = '' ?? 'default string';
console.log(baz); // "" (empty string이 null이나 undefined가 아니므로 좌항의 값을 반환)

let qux = 0 ?? 42;
console.log(qux); // 0 (0은 null이나 undefined가 아니므로 좌항의 값을 반환)

요약

• **Nullish Coalescing Operator (??)**는 좌항의 값이 null 또는 undefined인 경우에만 우항의 값을 반환합니다.
• 이는 ECMAScript 2020 (ES11)의 일부로, 최신 JavaScript와 TypeScript에서 모두 사용할 수 있습니다.
• ||와의 차이점은 ||는 좌항의 값이 falsy(false, 0, '', null, undefined, NaN)인 경우 우항의 값을 반환하지만, ??는 오직 null이나 undefined인 경우에만 우항의 값을 반환합니다.