JavaScript Object.assign vs Spread: การเปรียบเทียบประสิทธิภาพและกรณีการใช้งาน

ใน JavaScript การจัดการออบเจกต์เป็นงานที่พบบ่อย วิธีการยอดนิยมสองวิธีในการทำเช่นนี้คือ Object.assign() และ spread syntax (...) แม้ทั้งสองวิธีจะสามารถใช้คัดลอกคุณสมบัติจากออบเจกต์หนึ่งหรือหลายออบเจกต์ไปยังออบเจกต์เป้าหมายได้ แต่ก็มีความแตกต่างกันในด้านลักษณะประสิทธิภาพ กรณีการใช้งาน และพฤติกรรมโดยรวม บทความนี้จะให้การเปรียบเทียบที่ครอบคลุมเพื่อช่วยให้คุณเลือกเครื่องมือที่เหมาะสมกับงาน

ทำความเข้าใจ Object.assign()

Object.assign() เป็นเมธอดที่คัดลอกค่าของคุณสมบัติที่สามารถนับได้ทั้งหมดจากออบเจกต์ต้นฉบับหนึ่งรายการขึ้นไปไปยังออบเจกต์เป้าหมาย โดยจะส่งคืนออบเจกต์เป้าหมายที่ถูกแก้ไข

ไวยากรณ์:

            Object.assign(target, ...sources)
            

              
                Copy
              
            
          

ตัวอย่าง:

            const target = { a: 1 };
const source = { b: 2, c: 3 };

const returnedTarget = Object.assign(target, source);

console.log(target); // { a: 1, b: 2, c: 3 }
console.log(returnedTarget === target); // true

            

              
                Copy
              
            
          

ในตัวอย่างนี้ คุณสมบัติ b และ c จากออบเจกต์ source ถูกคัดลอกไปยังออบเจกต์ target โดย Object.assign() จะแก้ไขออบเจกต์ target ต้นฉบับและส่งคืน

ทำความเข้าใจ Spread Syntax

Spread syntax (...) ช่วยให้ iterable เช่น อาร์เรย์หรือออบเจกต์ สามารถขยายในตำแหน่งที่คาดหวังว่าจะมีอาร์กิวเมนต์ศูนย์หรือมากกว่า (สำหรับการเรียกใช้ฟังก์ชัน) หรือองค์ประกอบ (สำหรับ array literals) หรือคู่คีย์-ค่า (สำหรับ object literals) ได้

ไวยากรณ์ (Object Literal):

            const newObject = { ...object1, ...object2 };
            

              
                Copy
              
            
          

ตัวอย่าง:

            const obj1 = { a: 1 };
const obj2 = { b: 2, c: 3 };

const mergedObj = { ...obj1, ...obj2 };

console.log(mergedObj); // { a: 1, b: 2, c: 3 }

            

              
                Copy
              
            
          

ในที่นี้ spread syntax สร้างออบเจกต์ใหม่ mergedObj โดยการรวมคุณสมบัติของ obj1 และ obj2

การเปรียบเทียบประสิทธิภาพ

ความแตกต่างของประสิทธิภาพระหว่าง Object.assign() และ spread syntax อาจแตกต่างกันไปขึ้นอยู่กับ JavaScript engine และความซับซ้อนของออบเจกต์ที่กำลังจัดการ โดยทั่วไป สำหรับการโคลนและรวมออบเจกต์อย่างง่าย spread syntax มักจะเร็วกว่าเล็กน้อย อย่างไรก็ตาม ความแตกต่างมักจะน้อยมากสำหรับออบเจกต์ขนาดเล็ก สำหรับออบเจกต์ขนาดใหญ่ สถานการณ์ที่ซับซ้อนมากขึ้น และการดำเนินการซ้ำๆ ขอแนะนำให้ทำการ micro-benchmarking เพื่อกำหนดวิธีการที่เร็วที่สุดสำหรับกรณีการใช้งานเฉพาะของคุณ มาพิจารณาสถานการณ์ต่างๆ กัน:

สถานการณ์ที่ 1: การโคลนออบเจกต์อย่างง่าย

เมื่อโคลนออบเจกต์เดียว spread syntax โดยทั่วไปจะแสดงประสิทธิภาพที่ดีกว่า เนื่องจากการทำงานที่มีประสิทธิภาพมากกว่า

            const original = { a: 1, b: 2, c: 3 };

// Spread Syntax
const cloneSpread = { ...original };

// Object.assign()
const cloneAssign = Object.assign({}, original);

            

              
                Copy
              
            
          

สถานการณ์ที่ 2: การรวมหลายออบเจกต์

เมื่อรวมหลายออบเจกต์ ความแตกต่างของประสิทธิภาพระหว่างสองวิธีมักจะน้อยที่สุด แต่ spread syntax มักจะมีความได้เปรียบเล็กน้อย ส่วนใหญ่เป็นเพราะมีการนำไปใช้เป็น native ใน JavaScript engines สมัยใหม่

            const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = { c: 3 };

// Spread Syntax
const mergedSpread = { ...obj1, ...obj2, ...obj3 };

// Object.assign()
const mergedAssign = Object.assign({}, obj1, obj2, obj3);

            

              
                Copy
              
            
          

สถานการณ์ที่ 3: ออบเจกต์ขนาดใหญ่ที่มีคุณสมบัติจำนวนมาก

เมื่อจัดการกับออบเจกต์ขนาดใหญ่ที่มีคุณสมบัติหลายร้อยหรือหลายพัน คุณสมบัติ ความแตกต่างของประสิทธิภาพอาจเห็นได้ชัดเจนขึ้น ในกรณีเหล่านี้ spread syntax มักจะยังคงรักษาข้อได้เปรียบของมันไว้เนื่องจากการจัดสรรหน่วยความจำและการคัดลอกคุณสมบัติที่มีประสิทธิภาพมากขึ้นภายใน engine

การวัดประสิทธิภาพ (Benchmarking)

เพื่อให้ได้การวัดประสิทธิภาพที่แม่นยำ โปรดพิจารณาใช้เครื่องมือวัดประสิทธิภาพ เช่น Benchmark.js เครื่องมือเหล่านี้ช่วยให้คุณสามารถเรียกใช้การทดสอบซ้ำๆ และรวบรวมสถิติเพื่อพิจารณาว่าวิธีการใดมีประสิทธิภาพดีที่สุดภายใต้เงื่อนไขเฉพาะ

ตัวอย่างการใช้ Benchmark.js:

            const Benchmark = require('benchmark');

const suite = new Benchmark.Suite;

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = { c: 3 };

// add tests
suite.add('Spread Syntax', function() {
  const mergedSpread = { ...obj1, ...obj2, ...obj3 };
})
.add('Object.assign()', function() {
  const mergedAssign = Object.assign({}, obj1, obj2, obj3);
})
// add listeners
.on('cycle', function(event) {
  console.log(String(event.target));
})
.on('complete', function() {
  console.log('Fastest is ' + this.filter('fastest').map('name'));
})
// run async
.run({ 'async': true });

            

              
                Copy
              
            
          

โค้ดสั้นๆ นี้แสดงให้เห็นถึงวิธีการตั้งค่าการวัดประสิทธิภาพโดยใช้ Benchmark.js เพื่อเปรียบเทียบประสิทธิภาพของ spread syntax และ Object.assign() เมื่อรวมหลายออบเจกต์ อย่าลืมติดตั้งไลบรารีโดยใช้ npm install benchmark ก่อนเรียกใช้สคริปต์

กรณีการใช้งาน

แม้ว่าประสิทธิภาพจะเป็นปัจจัยหนึ่ง แต่การเลือกระหว่าง Object.assign() และ spread syntax มักจะขึ้นอยู่กับกรณีการใช้งานเฉพาะและความชอบในรูปแบบการเขียนโค้ด

กรณีการใช้งาน Object.assign()

• การแก้ไขออบเจกต์เป้าหมาย: Object.assign() จะแก้ไขออบเจกต์เป้าหมายโดยตรง ซึ่งมีประโยชน์เมื่อคุณต้องการอัปเดตออบเจกต์ที่มีอยู่เดิม
• ความเข้ากันได้กับเบราว์เซอร์รุ่นเก่า: Object.assign() มีการรองรับเบราว์เซอร์ที่กว้างกว่าเมื่อเทียบกับ spread syntax ทำให้เหมาะสำหรับโปรเจกต์ที่มุ่งเป้าไปที่สภาพแวดล้อมที่เก่ากว่า คุณอาจต้องใช้ polyfill สำหรับเบราว์เซอร์รุ่นเก่า
• การรวมเข้ากับ Codebase ที่มีอยู่: หากคุณกำลังทำงานกับ codebase ที่มีอยู่ซึ่งใช้ Object.assign() อย่างกว้างขวาง การใช้ต่อไปจะช่วยรักษาความสอดคล้องและลดความเสี่ยงของการเกิดข้อผิดพลาด
• การตั้งค่าเริ่มต้น: สามารถใช้เพื่อกำหนดค่าเริ่มต้นให้กับออบเจกต์ เพื่อให้แน่ใจว่าคุณสมบัติบางอย่างถูกกำหนดเสมอ

              const defaults = { a: 1, b: 2, c: 3 };
  const options = { a: 10, d: 4 };
  
  const config = Object.assign({}, defaults, options);
  console.log(config); // { a: 10, b: 2, c: 3, d: 4 }
  
              
  
                
                  Copy
                
              
            

กรณีการใช้งาน Spread Syntax

• การสร้างออบเจกต์ใหม่: Spread syntax ทำได้ดีเยี่ยมในการสร้างออบเจกต์ใหม่โดยไม่แก้ไขออบเจกต์ต้นฉบับ ซึ่งส่งเสริมหลักการไม่เปลี่ยนแปลง (immutability)
• ไวยากรณ์ที่กระชับ: Spread syntax มักจะทำให้โค้ดอ่านง่ายและกระชับขึ้น โดยเฉพาะอย่างยิ่งเมื่อรวมหลายออบเจกต์
• React และ Redux: ใน React และ Redux ซึ่งความไม่เปลี่ยนแปลงมีความสำคัญต่อประสิทธิภาพและการจัดการสถานะ spread syntax ถูกใช้อย่างแพร่หลายสำหรับการสร้างเวอร์ชันที่อัปเดตของออบเจกต์สถานะ
• Functional Programming: เข้ากันได้ดีกับหลักการเขียนโปรแกรมเชิงฟังก์ชัน ซึ่งส่งเสริมการหลีกเลี่ยงผลข้างเคียงและการทำงานกับข้อมูลที่ไม่เปลี่ยนแปลง

Shallow Copy vs. Deep Copy

สิ่งสำคัญคือต้องเข้าใจว่าทั้ง Object.assign() และ spread syntax ทำการ shallow copy (การคัดลอกแบบตื้น) ซึ่งหมายความว่า หากออบเจกต์มีออบเจกต์ซ้อนกัน เฉพาะการอ้างอิงถึงออบเจกต์ซ้อนเหล่านั้นเท่านั้นที่จะถูกคัดลอก ไม่ใช่ออบเจกต์ซ้อนเหล่านั้นเอง การแก้ไขออบเจกต์ซ้อนในออบเจกต์ที่คัดลอกจะส่งผลต่อออบเจกต์ต้นฉบับด้วย และในทางกลับกัน

ตัวอย่าง:

            const original = {
  a: 1,
  b: { c: 2 }
};

const copied = { ...original };

copied.b.c = 3;

console.log(original.b.c); // 3 - The original object is modified!

            

              
                Copy
              
            
          

หากคุณต้องการสร้าง deep copy (การคัดลอกแบบลึก) ซึ่งออบเจกต์ซ้อนกันจะถูกคัดลอกด้วย คุณสามารถใช้วิธีการต่างๆ เช่น:

• JSON.parse(JSON.stringify(object)): นี่เป็นวิธีการที่เรียบง่าย แต่อาจไม่มีประสิทธิภาพ โดยเฉพาะสำหรับออบเจกต์ขนาดใหญ่หรือซับซ้อน นอกจากนี้ยังไม่รองรับฟังก์ชันหรือการอ้างอิงแบบวนซ้ำได้อย่างถูกต้อง
• การใช้ไลบรารีเช่น _.cloneDeep() ของ Lodash: ไลบรารีเช่น Lodash มีฟังก์ชัน deep cloning ที่ปรับให้เหมาะสมซึ่งจัดการกับกรณีขอบต่างๆ ได้
• การเขียนฟังก์ชัน deep copy แบบเรียกซ้ำเอง: สิ่งนี้ช่วยให้คุณสามารถควบคุมกระบวนการโคลนและจัดการกับประเภทข้อมูลหรือโครงสร้างเฉพาะได้

ความไม่เปลี่ยนแปลง (Immutability)

ความไม่เปลี่ยนแปลงเป็นแนวคิดการเขียนโปรแกรมที่เน้นการสร้างโครงสร้างข้อมูลใหม่แทนที่จะแก้ไขโครงสร้างข้อมูลที่มีอยู่เดิม วิธีการนี้สามารถนำไปสู่โค้ดที่คาดเดาได้ง่ายขึ้น การดีบักที่ง่ายขึ้น และประสิทธิภาพที่ดีขึ้นในบางสถานการณ์ ทั้ง Object.assign() และ spread syntax สามารถใช้เพื่อส่งเสริมความไม่เปลี่ยนแปลงได้ แต่ spread syntax มักจะได้รับความนิยมมากกว่าเนื่องจากความสามารถในการสร้างออบเจกต์ใหม่ได้โดยตรงกว่า

การใช้ Object.assign() เพื่อให้เกิดความไม่เปลี่ยนแปลงจำเป็นต้องสร้างออบเจกต์เป้าหมายใหม่ก่อน:

            const original = { a: 1, b: 2 };
const updated = Object.assign({}, original, { a: 10 });

console.log(original); // { a: 1, b: 2 }
console.log(updated);  // { a: 10, b: 2 }

            

              
                Copy
              
            
          

            const original = { a: 1, b: 2 };
const updated = { ...original, a: 10 };

console.log(original); // { a: 1, b: 2 }
console.log(updated);  // { a: 10, b: 2 }

            

              
                Copy
              
            
          

ตัวอย่างเชิงปฏิบัติ

ตัวอย่างที่ 1: การอัปเดตข้อมูลโปรไฟล์ผู้ใช้

ลองจินตนาการว่าคุณมีออบเจกต์โปรไฟล์ผู้ใช้ และคุณต้องการอัปเดตด้วยข้อมูลใหม่จากแบบฟอร์ม การใช้ spread syntax คุณสามารถสร้างออบเจกต์ใหม่พร้อมข้อมูลที่อัปเดตได้อย่างง่ายดาย:

            const userProfile = {
  id: 123,
  name: 'Alice',
  email: 'alice@example.com',
  location: 'New York'
};

const updatedData = {
  email: 'alice.new@example.com',
  location: 'London'
};

const updatedProfile = { ...userProfile, ...updatedData };

console.log(updatedProfile);
// {
//   id: 123,
//   name: 'Alice',
//   email: 'alice.new@example.com',
//   location: 'London'
// }

            

              
                Copy
              
            
          

ตัวอย่างที่ 2: การจัดการรายการสินค้าในตะกร้าสินค้า

ในแอปพลิเคชันอีคอมเมิร์ซ คุณอาจต้องอัปเดตจำนวนสินค้าในตะกร้าสินค้า การใช้ spread syntax คุณสามารถสร้างอาร์เรย์ตะกร้าสินค้าใหม่พร้อมกับสินค้าที่อัปเดตได้:

            const cart = [
  { id: 1, name: 'Product A', quantity: 2 },
  { id: 2, name: 'Product B', quantity: 1 }
];

const productIdToUpdate = 1;
const newQuantity = 3;

const updatedCart = cart.map(item =>
  item.id === productIdToUpdate ? { ...item, quantity: newQuantity } : item
);

console.log(updatedCart);
// [
//   { id: 1, name: 'Product A', quantity: 3 },
//   { id: 2, name: 'Product B', quantity: 1 }
// ]

            

              
                Copy
              
            
          

ตัวอย่างที่ 3: การกำหนดค่าการตั้งค่าแอปพลิเคชัน

เมื่อกำหนดค่าการตั้งค่าแอปพลิเคชัน คุณอาจต้องการรวมการตั้งค่าเริ่มต้นเข้ากับการตั้งค่าที่ผู้ใช้ให้มา Object.assign() สามารถเป็นประโยชน์สำหรับวัตถุประสงค์นี้ โดยเฉพาะอย่างยิ่งหากคุณต้องการแก้ไขออบเจกต์การตั้งค่าเริ่มต้นโดยตรง:

            const defaultSettings = {
  theme: 'light',
  fontSize: 'medium',
  language: 'en'
};

const userSettings = {
  theme: 'dark',
  fontSize: 'large'
};

Object.assign(defaultSettings, userSettings);

console.log(defaultSettings);
// {
//   theme: 'dark',
//   fontSize: 'large',
//   language: 'en'
// }

            

              
                Copy
              
            
          

ในกรณีนี้ defaultSettings จะถูกแก้ไข ณ ที่เดิม ซึ่งอาจเป็นที่ต้องการหรือไม่เป็นที่ต้องการก็ได้ ขึ้นอยู่กับความต้องการของแอปพลิเคชันของคุณ

แนวทางปฏิบัติที่ดีที่สุด

• ทำความเข้าใจ Shallow Copying: โปรดทราบว่าทั้งสองวิธีทำงานแบบ shallow copy สำหรับ deep copying ให้ใช้เทคนิคหรือไลบรารีที่เหมาะสม
• พิจารณา Immutability: เมื่อเป็นไปได้ ให้เลือกใช้ spread syntax เพื่อสร้างออบเจกต์ใหม่และส่งเสริมความไม่เปลี่ยนแปลง
• ทำการ Benchmark เมื่อจำเป็น: สำหรับโค้ดที่สำคัญต่อประสิทธิภาพ ให้ทำการ benchmark ทั้งสองวิธีเพื่อกำหนดตัวเลือกที่เร็วที่สุดสำหรับกรณีการใช้งานเฉพาะของคุณ
• เลือกตามบริบท: เลือกวิธีที่สอดคล้องกับสไตล์การเขียนโค้ด ความต้องการของโปรเจกต์ และความเข้ากันได้ของคุณมากที่สุด
• ใช้ Linters และ Code Style Guides: บังคับใช้การใช้งาน Object.assign() และ spread syntax อย่างสม่ำเสมอผ่าน linters และ code style guides
• บันทึกการตัดสินใจของคุณ: อธิบายเหตุผลในการเลือกใช้วิธีใดวิธีหนึ่งอย่างชัดเจน โดยเฉพาะใน codebase ที่ซับซ้อน

สรุป

Object.assign() และ spread syntax เป็นเครื่องมือที่มีคุณค่าสำหรับการจัดการออบเจกต์ใน JavaScript ในขณะที่ spread syntax มักจะให้ประสิทธิภาพที่ดีกว่าเล็กน้อยและส่งเสริมความไม่เปลี่ยนแปลง Object.assign() ยังคงมีความเกี่ยวข้องสำหรับการแก้ไขออบเจกต์ที่มีอยู่และรักษาความเข้ากันได้กับสภาพแวดล้อมที่เก่ากว่า การทำความเข้าใจความแตกต่างของแต่ละวิธีช่วยให้คุณตัดสินใจได้อย่างมีข้อมูลและเขียนโค้ดที่มีประสิทธิภาพและบำรุงรักษาได้ง่ายขึ้น

ด้วยการพิจารณาลักษณะประสิทธิภาพ กรณีการใช้งาน และแนวทางปฏิบัติที่ดีที่สุดที่ระบุไว้ในบทความนี้ คุณสามารถใช้ประโยชน์จากทั้ง Object.assign() และ spread syntax ได้อย่างมีประสิทธิภาพเพื่อปรับปรุงเวิร์กโฟลว์การพัฒนา JavaScript ของคุณ และสร้างแอปพลิเคชันที่แข็งแกร่งและปรับขนาดได้สำหรับผู้ชมทั่วโลก อย่าลืมให้ความสำคัญกับความชัดเจนของโค้ดและการบำรุงรักษาเสมอ พร้อมทั้งเพิ่มประสิทธิภาพเมื่อจำเป็น การทำ micro-benchmarking และการ profiling โค้ดของคุณยังสามารถช่วยให้คุณระบุปัญหาคอขวดด้านประสิทธิภาพและทำการตัดสินใจโดยใช้ข้อมูลว่าควรใช้วิธีใดในสถานการณ์เฉพาะ