1. Introduction
As you can see, many times we want to clone an object by attaching it to another variable.
1 2 3 4 5 6 7 8 9 10 | const obj_1 = { username: "chamdev.com" }; const obj_2 = obj_1; obj_1.age = 10; console.log("obj_2", obj_2); // {username: "chamdev.com", age: 10} |
But you can’t clone like that @@, because Object is a reference types. When you do the above means you are taking the value and taking its memory address on memory already.
And so, to solve for all clone, we will have to resort to a number of ways to clone.
2. Details
We will have 4 main ways to clone an Object: Spread, Object.assign (), JSON methods, Library 3nd. Specifically how I will write below.
But these 4 ways are divided into 2 main groups: Deep clone and Shallow copy. Mostly we will use Shallow copy in reality only you guys.
Using Spread (Shallow copy)
This is a very powerful feature in ES6 (A version of JS released in 2015). This is a great way to clone Objects and is used by many programmers.
1 2 3 4 5 6 7 8 9 10 11 12 13 | const obj_1 = { username: "chamdev.com", getUsername() { return this.username; } }; const obj_2 = {...obj_1}; obj_1.age = 10; console.log("obj_2", obj_2); // {username: "chamdev.com", getUsername: ƒ} |
But let’s try one more example ^^. Here you will see the limitations of the Clone Object Spread.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | const obj_1 = { username: "chamdev.com", info: { address: "https://chamdev.com" } }; const obj_2 = {...obj_1 }; obj_1.age = 10; obj_1.info.address = "Not found"; console.log("obj_2", obj_2); // {username: "chamdev.com", info: {address: "Not found"}} |
Ok, did you see anything @@, it can’t be deep clone. What a surprise – what a new feature it looks like. HAHA. I don’t know if it will update later, but now when I write this article, it is like that.
Using Object.assign () (Shallow copy)
The first thing I want to say is that this is probably the most common way libraries and frameworks. Let’s take a look at an example.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | const obj_1 = { username: "chamdev.com", info: { address: "https://chamdev.com" }, getUsername() { return this.username; } }; const obj_2 = Object.assign({}, obj_1); obj_1.age = 10; console.log("obj_2", obj_2); // {username: "chamdev.com", info: {address: "https://chamdev.com"}, getUsername: ƒ} |
Thus, we can still clone the normal Object. Ok the same way above, but try to see if it can deeping clone okay.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | const obj_1 = { username: "chamdev.com", info: { address: "https://chamdev.com" }, getUsername() { return this.username; } }; const obj_2 = Object.assign({}, obj_1); obj_1.age = 10; obj_1.info.address = "Not found"; console.log("obj_2", obj_2); // {username: "chamdev.com", info: {address: "Not found"}, getUsername: ƒ} |
The answer is no @@, so how do you guys want to have a deep clone? How ??? See more will see offline. ?
Using JSON methods (Deep clone – half hearted)
Here we will use two methods that are parse () and stringify (). Let me say a little parse () is when you want to turn a String with fomat is json on Object. And stringify () is when we want to convert an Object to a JSON string.
Here you understand simply that it first turns our Object into JSON and then the parse transforms into Object itself.
Let’s take a look at the example below ^^:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | const obj_1 = { username: "chamdev.com", info: { address: "https://chamdev.com" }, getUsername() { return this.username; } }; const obj_2 = JSON.parse(JSON.stringify(obj_1)); obj_1.age = 10; console.log("obj_2", obj_2); // {username: "chamdev.com", info: {address: "https://chamdev.com"}} |
So, you can see it still clones very well. But one thing is not very good that it is not clone method for us. WTH. Now what to do. But before I answer, let’s see if it can deeping clone or not.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | const obj_1 = { username: "chamdev.com", info: { address: "https://chamdev.com" } }; const obj_2 = JSON.parse(JSON.stringify(obj_1)); obj_1.age = 10; obj_1.info.address = "Not found"; console.log("obj_2", obj_2); // {username: "chamdev.com", info: {address: "https://chamdev.com"}} |
There, this is the answer for these two guys. This method has been fixed when we have deep clone but how to clone method now. ??? The answer is to use the library as lodash, it has methods for us to clone and then use it. The advantage is that you do not have to write a lot of code, you do not have to think much, but the downside is that we eat too much.
Library 3nd (Deep clone) – Lodash
Deep clone and Shallow copy respectively are examples below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | const _ = require("lodash"); const obj_1 = { username: "chamdev.com", info: { address: "https://chamdev.com" }, getUsername() { return this.username; } }; const obj_2 = _.cloneDeep(obj_1); const obj_3 = _.clone(obj_1); obj_1.age = 10; obj_1.info.address = "Not found"; console.log("obj_2", obj_2); // {username: "chamdev.com", info: {address: "https://chamdev.com"}, getUsername: ƒ} console.log("obj_3", obj_3); // {username: "chamdev.com", info: {address: "Not found"}, getUsername: ƒ} |
3. Conclusion
So, you have seen a small job clone an Object thought it was easy to turn out many ways to do – many techniques spread. ^^
Bonus that I had a lot of miserable times with this clone Object, the code it ran distorted according to their own, debug forever new. @@. But those are times when I want to leave my hometown to raise fish and grow vegetables. ^^
Those are the 4 most commonly used ways, you guys have any new or better way, do not hesitate to comment below.
3s of advertising. I just wrote blogs from the beginning of March, so there are many things I hope you give up for it https://chamdev.com/how-to-clone-object-in-js/ .