Published
Edited
May 4, 2020
md`# JavaScript shallow copy vs. deep copy`
md`## No copy`
noCopy1 = {
const original = [1, 2, 3];
let copy = original;
copy[1] = "New value";
return {original, copy};
}
noCopy2 = {
const original = {one: 1, two: 2, three: 3};
let copy = original;
copy.two = "New value";
return {original, copy};
}
md`## Shallow copy`
md`### Arrays`
md`#### With Array.slice()`
shallowArraySlice = {
const original = [1, 2, 3, [4, {one: 1, two: 2, three: 3}, 6]];
let copy = original.slice();
copy[1] = "New value";
copy[3][0] = "New value in nested array";
copy[3][1]["one"] = "New value in nested object";
return {original, copy};
}
md`#### With the spread operator [...a]`
shallowArraySpread = {
const original = [1, 2, 3, [4, {one: 1, two: 2, three: 3}, 6]];
let copy = [...original];
copy[1] = "New value";
copy[3][0] = "New value in nested array";
copy[3][1]["one"] = "New value in nested object";
return {original, copy};
}
md`#### With Array.map()`
shallowArrayMap = {
const original = [1, 2, 3, [4, {one: 1, two: 2, three: 3}, 6]];
let copy = original.map(item => item);
copy[1] = "New value";
copy[3][0] = "New value in nested array";
copy[3][1]["one"] = "New value in nested object";
return {original, copy};
}
md`### Objects`
md`#### With Object.assign({}, anObject)`
shallowObjectAssign = {
const original = {one: 1, two: 2, three: 3, four: {five: 5, six: 6}, seven: [7, 8]};
let copy = Object.assign({}, original);
copy.two = "New value";
copy.four.five = "New value in the nested object";
copy.seven[1] = "New value in nested array";
return {original, copy};
}
md`#### With the spread operator [...anObject]`
shallowObjectSpread = {
const original = {one: 1, two: 2, three: 3, four: {five: 5, six: 6}, seven: [7, 8]};
let copy = {...original}
copy.two = "New value";
copy.four.five = "New value in the nested object";
copy.seven[1] = "New value in nested array";
return {original, copy};
}
md`## Deep copy`
md`### Arrays`
md`#### With JSON.parse() and JSON.stringify()`
deepArrayJson = {
const original = [1, 2, 3, [4, {one: 1, two: 2, three: 3}, 6]];
let copy = JSON.parse(JSON.stringify(original));
copy[1] = "New value";
copy[3][0] = "New value in nested array";
copy[3][1]["one"] = "New value in nested object";
return {original, copy};
}
md`### Objects`
md`#### With JSON.parse() and JSON.stringify()`
deepObjectJson = {
const original = {one: 1, two: 2, three: 3, four: {five: 5, six: 6}, seven: [7, 8]};
let copy = JSON.parse(JSON.stringify(original));
copy.two = "New value";
copy.four.five = "New value in the nested object";
copy.seven[1] = "New value in nested array";
return {original, copy};
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
