อย่ามองข้าม Shallow Copy และ Deep Copy ใน JavaScript

เคยเจ็บปวดกับ pass by reference หรือ same memory location ไหม

https://developer.apple.com/library/content/documentation/Cocoa/Conceptual/Collections/Articles/Copying.html

หากเคยเจอสถานการณ์เหล่านี้ อยาก copy object A ไปยัง B จากนั้นทำการ แก้ไข B ดันไป side effect กับ A … WTF!!!


เริ่มเรื่องกันเลย นั่น คือ สิ่งที่เขาเรียกว่า Shallow Copy บางที่ก็เรียกว่า Mutable object

Shallow Copy

การสร้างตัวแปรโดยที่ยัง reference ไปยังตัวแปรต้นฉบับ

// declare variable
const a = { model: 'iPhone X' };
const b = a;
// print
console.log('a => ', a);
console.log('b => ', b);
// I just need change object b
b.model = 'iPhone 7 Plus';
console.log('a => ', a);
console.log('b => ', b);

ซวยแล้วววว!!!!

memory same address

งานเข้า ขะเข้…นี่แหละ shallow copy ใช้ memory location address เดียวกัน เวลาแก้ไข ไม่ว่า A หรือ B กระทบกันไปหมด

Deep Copy

คัดลอก object จาก A มายัง B และไม่ให้เกิดผลกระทบไปยัง A

const a = { model: 'iPhone X' };
let b = Object.assign({}, a, {model: 'iPhone 7 Plus'});
console.log('a => ', a);
console.log('b => ', b);

const a = { model: 'iPhone X' };
let b = JSON.parse(JSON.stringify(a));
b.model = 'iPhone 7 Plus';
console.log('a => ', a);
console.log('b => ', b);

const a = { model: 'iPhone X' };
const b = {...a};
b.model = 'iPhone 7 Plus';
console.log('a => ', a);
console.log('b => ', b);
B = memory new address

ยังไม่พูดถึง perf นะว่าอันไหนดีกว่ากัน นอกจากนี้เรายังสามารถใช้ jQuery, lodash, others lib ในการช่วยแก้ไขปัญหานี้ได้อีก