JavaScript Object and Reference Variables (Part 1)

โดยปกติถ้าเราจะ copy ค่าจากอีกตัวแปรนึงไปยังอีกตัวแปรนึง ก็เพียงจับตัวแปรนั้นมาให้ค่า อย่างเช่น

      let a = 1;

      const b = a;

      a = 3;

      console.log(b); // 1

      console.log(a); // 3

คราวนี้เราอยาก copy ตัวแปร object บ้าง

  const obj1 = {

      name: 'superman'

    };

    const obj2 = obj1;

    console.log(obj2); // { name: "superman" }

    console.log(obj1); // { name: "superman" }

    obj1.name = 'batman';

    console.log(obj2); // { name: "batman" }

    console.log(obj1); // { name: "batman" }

เอ๊ะ!! มีอะไรแปลกๆ

จะเห็นว่า ตอนแรก obj1.name มีค่าเป็น superman ซึ่งให้ค่า กับ obj2obj2.name ก็มีค่าเป็น superman ซักพัก เราได้ให้ค่ากับ obj1.name ให้เป็น batmanแต่กลับกลายเป็นว่า obj2 มีค่าเปลี่ยนแปลงไปด้วย เพราะอะไรกันน้าาาา???

เหตุผลก็เพราะว่า เมื่อเราให้ obj2 = obj1 นั่นหมายความว่า obj2 เป็น pointer ที่ชี้ไปยัง obj1 เมื่อเกิดการเปลี่ยนค่า obj1 ค่า obj2 ก็เปลี่ยนไปด้วย คราวนี้ มันจะมีวิธีอย่างไรให้ copy ค่าได้ล่ะ


วิธี copy หรือ clone object ใน JavaScript ก็มี 3 วิธีหลัก ๆ ดังนี้


1. Deep copy using iteration

    function iterationCopy(mainObj) {

      const copyObj = {};

      for (const key in mainObj) {

        if (mainObj.hasOwnProperty(key)) {

          copyObj[key] = mainObj[key];

        }

      }

      return copyObj;

    }

    const obj1 = {

      name: 'superman'

    };

    const obj2 = iterationCopy(obj1);

    console.log(obj2); // { name: "superman" }

    obj1.name = 'batman';

    console.log(obj2); // { name: "superman" }

    console.log(obj1); // { name: "batman" }

2. Converting to JSON and back (JSON.stringify() and JSON.parse())

    const obj1 = {

      name: 'superman'

    };

    const obj2 = JSON.parse(JSON.stringify(obj1));

    console.log(obj2); // { name: "superman" }

    obj1.name = 'batman';

    console.log(obj2); // { name: "superman" }

    console.log(obj1); // { name: "batman" }

3. using Object.assign

    const obj1 = {

      name: 'superman'

    };

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

    console.log(obj2); // { name: "superman" }

    obj1.name = 'batman';

    console.log(obj2); // { name: "superman" }

    console.log(obj1); // { name: "batman" }

ในบทถัดไปจะกล่าวถึงข้อดี ข้อเสียในแต่ละวิธี และสถานการณ์ไหนควรจะใช้วิธีไหน ซึ่งในแต่ละวิธีมันมีข้อจำกัดของมัน แล้วเจอกานนนน!!!!