_.extend vs _.clone in lodash

Question

To inherit properties of one object by another while dealing with JavaScript objects, I often see usage of _.clone where the intention was to create an object with another object's properties and then it would be extended.

Why can't we just use _.extend which is more relevant to extend an object?

Please tell me the difference between the two and why we can't _.extend instead of _.clone which is a costly operation.

Answer 1

_.extend mutates the object. _.clone creates a copy by values, not by reference and does not change the original object. Please note that _.extend is merely an alias for _.assignIn.

_.assignIn(object, [sources])

Note: This method mutates object.

https://lodash.com/docs/4.17.2#assignIn

Also see documenation for _.clone:

https://lodash.com/docs/4.17.2#clone

Answer 2

If you _.extend() an existing object, you mutate the object. If you _.clone() it first, the original object remains untouched.

You could of course extend an empty object with the original object's properties and some additional ones, which also leaves the original object unchanged:

_.extend({}, originalObject, {
    additionalProperty: "foo"
})

This works very similar to a shallow clone of originalObject. With ES2015, you can achieve the same goal with plain JavaScript and Object.assign().

---

Additional reading:

• Why is immutability important in JavaScript?