DEV Community

Kurapati Mahesh
Kurapati Mahesh

Posted on

Javascript: Clone object

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
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 😀