deepClone
A customizable javascript deepClone function for object cloning that is fool proof
deepClone(source, config);
Example:
const obj = { foo: { bar: 'baz' } };
const obj2 = deepClone(obj);
obj2;
obj == obj2;
strengths
- automatically invoke object constructors before copying properties (customizable behavior)
- let you to share the
[[Prototype]]
object between source and the resulting object (customizable behavior) - let you to clone objects with circular references (customizable behavior)
- handle String, Boolean, Number and Date objects in the right way: String, Boolean, and Number objects are unwrapped - Date objects are exactly copied
- let you to copy getters and setters, non enumerables properties and also symbols (customizable behavior)
- safe similar sibilings references are not duplicated
- correct cloning of Array objects (if the
invokeConstructors
flagis setted) - correct cloning of RegExp objects
config
invokeConstructors (default true)
If you need to invoke the objects constructors for each object prop set the invokeConstructors
flag to true
:
const res = deepClone(source, {
invokeConstructors: true
});
This option will correctly set up the new object, because constructors are invoked to create it. The resulting object and each of its object property therefore will have the [[Prototype]]
and the constructor
props correctly setted up, corresponding to the source object and its object properties for everyone.
class Test {
constructor() {
console.log('constructor invoked');
}
};
const t = new Test();
t.foo = new Test();
t;
const res = deepClone(t, {
invokeConstructors: true
});
res;
res instanceof Test;
res.foo instanceof Test;
It is actually a default enabled setting, but you can disable it (loosing the ability to properly copy arrays).
If the invokeConstructors
flag is setted to false
, a plain new object will be created for each object prop and for the resulting object as well. So the constructor
prop will be set to the Object
function, and the [[Prototype]]
prop will be Object.prototype
.
Unless you use the setPrototype
flag.
setPrototype (default false)
If the invokeConstructors
flag is setted to false
we could anyway share the [[Prototype]]
object between the source object and the resulting object thanks to the setPrototype
flag, without calling the constructors.
This means that the constructor
prop will be shared as well because it is related to the [[Prototype]]
prop.
This flag affects all the object properties as weel, like the previous flag.
If the invokeConstructors
flag is setted to true
, the setPrototype
flag will be is ignored.
const res = deepClone(source, {
invokeConstructors: false,
setPrototype: true
});
The resulting object therefore will have the [[Prototype]]
and the constructor
props correctly setted up, but the constructors are not invoked.
class Test {
constructor() {
console.log('constructor invoked');
}
};
const t = new Test();
t.foo = new Test();
t;
const res = deepClone(t, {
invokeConstructors: false,
setPrototype: true
});
res;
res instanceof Test;
res.foo instanceof Test;
copyNonEnumerables (default false)
Enable it to deep copy also non enumerables properties.
Disable it to ignore them.
const res = deepClone(source, {
copyNonEnumerables: true
});
copySymbols (default false)
Enable it to deep copy also symbol properties.
Disable it to ignore them.
Symbols are shallow copied;
const res = deepClone(source, {
copySymbols: true
});
Enable it to copy also getters and setters.
Disable it to ignore them.
const res = deepClone(source, {
copyGettersSetters: true
});
allowCircularReferences (default false)
Enable it to allow circular references.
Disable it to throw an error if one is met.
const res = deepClone(source, {
allowCircularReferences: true
});
default config
The default config is the following:
deepClone(source, {
invokeConstructors : true,
setPrototype : false,
copyNonEnumerables : false,
copySymbols : false,
copyGettersSetters : false,
allowCircularReferences: false,
});
what about the 6th strength?
To understand it, let's compare the function deepClone
with the well-know JSON.parse(JSON.stringify(source))
:
const obj = { foo: 'bar'};
const source = {
a: obj,
b: obj,
};
JSON.stringify(source);
When you will use JSON.parse()
, an {"foo":"bar"}
object will be created for the a
prop and a {"foo":"bar"}
distinct object will be created for the b
prop. But this is not the initial situation where source.a == source.b; // true
.
warnings
- promises and methods are always copied by reference
super
is statically bound to a class heirarchy, remember itError
objects cannot be copied