자바스크립트

 

 

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인 경우에만 우항의 값을 반환합니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

about author

PHRASE

Level 60  라이트

관직을 다스릴 때에는 공평함만한 것이 없고, 재물에 임하여는 청렴함만한 것이 없다. -충자

댓글 ( 0)

댓글 남기기

작성