DEV Community

Kurapati Mahesh
Kurapati Mahesh

Posted on

Javascript: Clone object

#javascript #webdev #beginners #programming

Different ways to clone object without using third-party libraries.

Using Spread Operator:

const example = {first: 1, last: 10};

const {...clonedExample} = example;

clonedExample
> {first: 1, last: 10}

clonedExample.first = 2;
> 2

clonedExample
> {first: 2, last: 10}

example
> {first: 1, last: 10}
Enter fullscreen mode Exit fullscreen mode

Using Object.assign();


const example = {first: 1, last: 10};
const clonedExample = Object.assign({}, example);

clonedExample
> {first: 1, last: 10}

clonedExample.first = 2;
> 2

clonedExample
> {first: 2, last: 10}

example
> {first: 1, last: 10}
Enter fullscreen mode Exit fullscreen mode

Using JSON.parse:

const example = {first: 1, last: 10};
const clonedExample = JSON.parse(JSON.stringify(example));

clonedExample
> {first: 1, last: 10}

clonedExample.first = 2;
> 2

clonedExample
> {first: 2, last: 10}

example
> {first: 1, last: 10}
Enter fullscreen mode Exit fullscreen mode

In above methods, first two can't achieve deep cloning of objects. Only first hand objects muted not the nested objects whereas deep cloning achieved only using JSON.parse.

see below example:

const example = {first: 1, last: {nested: 3}};

// Using Spread
const {...clonedExample} = example;

clonedExample.last.nested = 5;
> 5

clonedExample
> {first: 1, last: {nested: 5}}

example
> {first: 1, last: {nested: 5}}

// Using Object.assign
const clonedExample = Object.assign({}, example);

clonedExample.last.nested = 5;
> 5

clonedExample
> {first: 1, last: {nested: 5}}

example
> {first: 1, last: {nested: 5}}

// Using JSON.parse
const clonedExample = JSON.parse(JSON.stringify(example));

clonedExample.last.nested = 5;
> 5

clonedExample
> {first: 1, last: {nested: 5}}

example
> {first: 1, last: {nested: 3}}
Enter fullscreen mode Exit fullscreen mode

You can follow me here: https://twitter.com/urstrulyvishwak

Thanks.

Top comments (4)

Collapse
 
lexlohr profile image
Alex Lohr •

JSON.stringify will fail on Symbols and recursive structures. If you only need shallow cloning, Object.assign or the spread operator will work fine, otherwise consider the new structuredClone(obj), which is available in all modern browsers (a polyfill is available: github.com/ungap/structured-clone).

Collapse
 
frankwisniewski profile image
Frank Wisniewski •

use structuredClone

Collapse
 
urstrulyvishwak profile image
Kurapati Mahesh • • Edited

Good. One thanks.


const example = {first: 1, last: {first: 3}};
const clone = structuredClone(example);

clone.last.first = 10;
> 10

clone
> {first: 1, last: {first: 10}}

example
> {first: 1, last: {first: 3}}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
r9n profile image
Ronaldo Modesto •

It is important to point out that the use of Object.assign must be done with care as it can open a gap for attacks like Prototype Pollution. Ideally, when using this method, make sure that the data of the object to be cloned has already been properly sanitized.
But it was a good tip anyway, for those new to javascript it's good to know how to do what 😀

Read next

adelbeit profile image

How to persist client-side preferences on the client in Svelte (w/o DB)

Adele Beitvashahi -

olatunjiayodel9 profile image

To create a new Node.js project and work with dependencies, you'll need to follow these steps

Olatunji Ayodele Abidemi -

shaheryaryousaf profile image

An Introduction to Python Functions

Shaheryar -

blugreenspace profile image

Finding Which Columns Value Has Actually Changed in PostgreSQL Trigger Functions

blugreenspace -