Phân biệt deep copy và shallow copy trong Javascript

Shallow copy: Chỉ copy object cha, các property phía trong vẫn được reference về object cũ

const src = { p1: { c1: 1, c2: '2' }, p2: 'p2' }
const dist = Object.assign({}, src);
src.p1 === dist.p1 //true
src.p1.c1 = 2
console.log(dist.p1.c1) //2

Deep copy: Copy hết tất tần tật các property bên trong, dù nó có nesting bao nhiêu đi chăng nữa

// import _ from 'lodash'
const src = { p1: { c1: 1, c2: '2' }, p2: 'p2' }
const dist = _.cloneDeep(src);
src.p1 === dist.p1 //false
src.p1.c1 = 2
console.log(dist.p1.c1) //1

jQuery

// Shallow copy
var newObject = jQuery.extend({}, oldObject);

// Deep copy
var newObject = jQuery.extend(true, {}, oldObject);

Lodash

// Shallow copy
var newObject = _.clone(oldObject);

// Deep copy
var newObject = _.cloneDeep(oldObject);

JSON.stringify

// Deep copy
var newObject = JSON.parse(JSON.stringify(oldObject));
// => Bad performance
// => Lost prototype
// => Error khi có property tham chiếu lẫn nhau

Object.assign

// Shallow copy
var newObject = Object.assign({}, oldObject);

Spread operator

// Shallow copy
var newObject = {...oldObject};
var newArray = {...oldArray};