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인 경우에만 우항의 값을 반환합니다.
댓글 ( 0)
댓글 남기기