Object copying in JavaScript
Object.assign, concat, filter, map, reduce are always going to return a brand new object.
- shallow copy
- deep copy (clone)
- freeze
- deepFreeze
- side effects
Object copying
Shallow copy, deep copy (and others, e.g. lazy copy) are methods of copying an object. > Copying is done mostly so the copy can be modified or moved, or the current value preserved. If either of these is unneeded, a reference to the original data is sufficient and more efficient, as no copying occurs. https://en.wikipedia.org/wiki/Object_copying#Lazy_copy
Shallow vs. Deep copy
Shallow copies duplicate as little as possible. A shallow copy of a collection is a copy of the collection structure, not the elements. With a shallow copy, two collections now share the individual elements.
Deep copies duplicate everything. A deep copy of a collection is two collections with all of the elements in the original collection duplicated. stackoverflow
Object.assign()
const a = {name: "Will", age: 35}
const b = Object.assign({}, a, {name: "Fred"})
With Object.assign()
you first created a brand new object {}
, then passed everything in a
to that new object, and then passed your changes {name: "Fred"}
to that new object which was a copy of a
(essentially creating a new copy first and then overwriting whatever you want in the new copy).
https://www.youtube.com/watch?v=9M-r8p9ey8U
JS only really has two types of data: primitive
and reference
.
Primitives are strings, booleans, numbers etc. You are storing values. Primitives are immutable.
Strings in JavaScript are immutable. All methods in the String prototype perform either read operations or return new strings. link
Reference are arrays and objects. You are storing references to values. Reference data is mutable.