최신 ECMAScript 문법으로 알아보는 객체 deep copy와 error handling 연산자 소개 (structuredClone, ?=)

 

이 글은 최근에 접한 새로운 JS 문법에 대한 아카이빙입니다.

 

structuredClone

JavaScript의 객체는 별도 변수에 복사할 때 참조된 메모리 주소를 복사하기 때문에 객체 전이(Mutation)가 일어난다. 객체 전이는 쉽게 말하자면 복사해서 만든 객체의 값을 변경했을 때 원본 객체에도 영향을 주는 것을 말합니다.

그러다보니 원본 객체에 영향을 주지 않는 복사(deep copy)를 위해서 JSON.parse, JSON.stringify를 활용하거나 lodash라이브러리를 사용하는 등의 방법이 있었습니다. 이번에 객체 복사를 위해 ECMA에 추가된 메서드가 있어서 소개합니다.

 

- 기본 문법

structuredClone(value)
structuredClone(value, options)

 

- 사용

const A = {
	name : 'Jay'
};

const B = structuredClone(A);
B.name = 'Chris';

console.log(A.name); // Jay
console.log(B.name); // Chris

 

 

MDN 문서, WorkerGlobalScope: structuredClone() method

https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm

The structured clone algorithm - Web APIs | MDN

 

---

 

?= Operator

: Safe Assignment Operator

(ECMA 표준에 포함되었는지 확인 필요)

기존에는 비동기 처리에 대한 에러 핸들링 코드를 Try catch로 감싸서 한 블럭 이상 코드를 작성해야 했지만, 이 새로운 ?= 할당연산자는 이러한 수고를 한 줄로 줄여줍니다.

 

https://dev.to/paharihacker/effortless-error-handling-in-javascript-how-the-safe-assignment-operator-simplifies-your-code-15dl

 

- 예시 (출처 하단 기입의 "Bye Bye, Try-Catch Blocks: Meet JavaScript's Safe Assignment Operator Proposal😉")

   const [error, data] ?= await fetch("https://api.example.com");

 

Effortless Error Handling in JavaScript: How the Safe Assignment Operator Simplifies Your Code

https://dev.to/paharihacker/effortless-error-handling-in-javascript-how-the-safe-assignment-operator-simplifies-your-code-15dl

Effortless Error Handling in JavaScript: How the Safe Assignment Operator Simplifies Your Code

 

 

Say Goodbye to Try/Catch with This New ECMAScript Operator!

Introducing the ?= Operator: JavaScript’s New Error Handling Hero

https://javascript.plainenglish.io/say-goodbye-to-try-catch-with-this-new-ecmascript-operator-e2b798c7b7a8

Say Goodbye to Try/Catch with This New ECMAScript Operator! 🚀

 

Reddit의 pros and cons (흥미 진진 😎🍿)

https://www.reddit.com/r/javascript/comments/1ew7fkr/what_are_your_opinions_on_this_draft_for/

From the javascript community on Reddit: What are your opinions on this draft for ECMAScript Error Safe Assignment Operator?

 

JavaScript Safe Assignment Operator (?=): A Complete Guide

https://medium.com/@shahbishwa21/introduction-to-the-safe-assignment-operator-in-javascript-ddc35e87d37c

Introduction to the Safe Assignment Operator (?=) in JavaScript