JavaScript objects as property of object reference

Question

I want to understand how objects work in JS.

const obj = { inner: { a: 'Hello' } };

const clone = { ...obj };

// obj === clone -> false
// !!! BUT !!!
// obj.inner === clone.inner -> true

clone.inner = { a: 'world' };
// obj === { inner: { a: 'Hello' } }
// clone === { inner: { a: 'World' } }

Is there a documentation on this behaviour? Can I rely on inner objects references equality while creating new object via spread operator?

only the outer objects are cloned with spread operator. the inner objects will still be references. — Dhananjai Pai
– Dhananjai Pai, Commented Sep 30, 2019 at 15:59

Code Maniac · Accepted Answer · 2019-09-30 16:01:24Z

4

... spread syntax creates a shallow copy anything deeper then level one will still stays as reference to original object

const obj = { inner: { a: 'Hello' } };

const clone = { ...obj };


console.log(obj === clone)

console.log(obj.inner === clone.inner)

answered Sep 30, 2019 at 16:01

Code Maniac

37.9k5 gold badges44 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Qasim Burhani · Accepted Answer · 2019-09-30 16:10:06Z

1

Shallow Cloning If the item being spread into the target is an object, only a reference to that object will be copied. The spread operator will not recursively deep clone properties. In addition, only own, enumerable properties are copied.

This Post will help Link

answered Sep 30, 2019 at 16:10

Qasim Burhani

462 bronze badges

1 Comment

ValeryStatinov Over a year ago

I found more detailed answer here in the drawbacks section.

Collectives™ on Stack Overflow

JavaScript objects as property of object reference

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related