Object.freeze() ทำให้ Nested Object เป็น Immutable ได้หรือไม่ใน JavaScript

Object.freeze() ทำให้ออบเจ็กต์ immutable แต่กรณี nested object ไม่สามารถป้องกัน mutability ได้ Object.freeze() ให้ immutability แค่ parent object ภายนอก ไม่เข้าถึง child objects (nested) ได้

ตัวอย่างที่ 1 - ไม่มี Nested Object

Object.freeze() freeze ทั้งออบเจ็กต์ property "name" ไม่เปลี่ยนหลัง freeze

<html> <body> 
    <script> 
        const person = { 
            "name": "Suresh", 
            "Country": "India", 
            "Designation": "Mayor" 
        }; 
        document.write("Before freeze the name is " + person.name); 
        document.write("<br>"); 
        Object.freeze(person); 
        person.name = "John"; 
        document.write("After freeze the name is " + person.name); 
    </script> 
</body> </html>

ผลลัพธ์

Before freeze the name is Suresh After freeze the name is Suresh

ตัวอย่างที่ 2 - มี Nested Object

แม้ freeze ด้วย Object.freeze() property ของ nested object ยังเปลี่ยนได้

<html> <body> <script> 
    const person = { 
        "name": "Suresh", 
        "Country": "India", 
        "Designation": "Mayor", 
        "CompaniesOwned": { 
            "Company1": "Tesla", 
            "Company2": "SolarCity", 
            "Company3": "Spacex" 
        } 
    }; 
    document.write("Before freeze Company2 is " + person.CompaniesOwned.Company2); 
    Object.freeze(person); 
    document.write("<br>"); 
    person.CompaniesOwned.Company2 = "Neuralica"; 
    document.write("After freeze Company2 is " + person.CompaniesOwned.Company2); 
</script> </body> </html>

ผลลัพธ์

Before freeze Company2 is SolarCity After freeze Company2 is Neuralica