3 Ways To Not Copy Objects in JavaScript (Spread, Assign & JSON)

Wings of desire

TLDR; If your object or array is of single level and contains only primitive values then you may use these methods without worry.

1. Why you should not use Object.assign()

object.assign() only does a shallow copy. Means if your object is nested. Even if your object has two levels. Object.assign won’t work.

Consider below code:

Think 🤔 of a moment, about what will be printed in the console.
.

.

.

.

.
If you think, it will print Galactus , then you’re wrong. You may check it out. It will console Thanos in the console.
Why ? Just because object.assign() does a shallow (only one level) copy.

2. Why you should not use ES6 Spread Operator to clone arrays/objects?

Let us consider below code snippet:

Take few seconds to think, what will be printed in console.
.

.

.

.

.

If you think it will console JS then you’re wrong. It’s gonna console JS always blow 🤯 my mind .Why ? Because of same reason. Spread Operator also does a shallow(one level) copy.

Now consider below code, Now I am running a map so that I can get a new array. What do you think? Will it make any difference?

.

.

.

.

.

No, The output will still be the same. JS always blow 🤯 my mind .

Why? because map us indeed returning a new array, but inside it the reference of objects are same.

How to fix it?

Only if objects inside array are single level.

3. Why you should not use JSON.stringify() to clone arrays/objects?

Consider bellow code snippet:

Take a moment, and think, what will be printed in the console?
.

.

.

.

.
If you are thinking that it will print Hello !!! then you’re wrong. It’s gonna throw an error that newObj.show() is not a function. Why?
Because once we call JSON.stringity() on any object, we simply lose any referential information the object has.

I hope, next time you use these methods, you will be aware of the consequences of using them !!!

Learn about Immutability in JavaScript and how to solve the problem which above methods are not able to do, by visiting this article.
https://rahuulmiishra.medium.com/immutability-in-javascript-892129a41497

Cheers !!!
🍻

--

--

--

A passionate iOS Developer since 2014.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

A Quick Performance Comparison of Styled-Components vs Inline Styles in React Native

Client-Side Storage in JavaScript

Quick Tip: Deno Fmt in WebStorm

The 4 Principles of OOP — Part 1: Inheritance

Daily Dose of Programming Jokes

How to Filter API Data in React

KnockoutJS — 3 simple ways of using components

The Beginner’s Guide to ReactJS — Notes Part 1

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
राहुल मिश्रा

राहुल मिश्रा

A passionate iOS Developer since 2014.

More from Medium

Asynchronous Code Execution in JavaScript

Important takeaways from the State of JavaScript

Arrow Functions in JavaScript, How is it different?

What is ES6 ?