Object.preventExtensions in JavaScript.

In this article, we analyze Object.preventExtensions() usage in React source code.

Object.preventExtensions() is called when the flag hasBadMapPolyfill is false and typeof Object.preventExtensions is a function.

But what does Object.preventExtensio…


This content originally appeared on DEV Community and was authored by thinkThroo

In this article, we analyze Object.preventExtensions() usage in React source code.

Image description

Object.preventExtensions() is called when the flag hasBadMapPolyfill is false and typeof Object.preventExtensions is a function.

But what does Object.preventExtensions() do?

Object.preventExtensions

The Object.preventExtensions() static method prevents new properties from ever being added to an object (i.e. prevents future extensions to the object). It also prevents the object’s prototype from being re-assigned.

// Example picked from MDN docs
const object1 = {};
Object.preventExtensions(object1);
try {
 Object.defineProperty(object1, 'property1', {
 value: 42,
 });
} catch (e) {
 console.log(e);
 // Expected output: 
 // TypeError: Cannot define property property1, object is not extensible
}

Read MDN docs about Object.preventExtension()

How React uses Object.preventExtension?

There must be a good reason why extensions are not allowed to be added. I followed along the function in which this is used, FiberNode function

calls Object.preventExtension on this, but which function calls FiberNode?

[createFiberImplClass](https://github.com/facebook/react/blob/5d19e1c8d1a6c0b5cd7532d43b707191eaf105b7/packages/react-reconciler/src/ReactFiber.js#L213-L226)

calls Object.preventExtension.

Image description

This comment provides an explanation why an Object cannot be extended.

Although, I do not fully understand these functions, but found out how Object.preventExtensions can be used in real-world open-source projects.

About us:

At Think Throo, we are on a mission to teach the advanced codebase architectural concepts used in open-source projects.

10x your coding skills by practising advanced architectural concepts in Next.js/React, learn the best practices and build production-grade projects.

We are open source — https://github.com/thinkthroo/thinkthroo (Do give us a star!)

Up skill your team with our advanced courses based on codebase architecture. Reach out to us at hello@thinkthroo.com to learn more!

References:




This content originally appeared on DEV Community and was authored by thinkThroo


Print Share Comment Cite Upload Translate Updates
APA

thinkThroo | Sciencx (2024-09-30T19:17:17+00:00) Object.preventExtensions in JavaScript.. Retrieved from https://www.scien.cx/2024/09/30/object-preventextensions-in-javascript/

MLA
" » Object.preventExtensions in JavaScript.." thinkThroo | Sciencx - Monday September 30, 2024, https://www.scien.cx/2024/09/30/object-preventextensions-in-javascript/
HARVARD
thinkThroo | Sciencx Monday September 30, 2024 » Object.preventExtensions in JavaScript.., viewed ,<https://www.scien.cx/2024/09/30/object-preventextensions-in-javascript/>
VANCOUVER
thinkThroo | Sciencx - » Object.preventExtensions in JavaScript.. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/09/30/object-preventextensions-in-javascript/
CHICAGO
" » Object.preventExtensions in JavaScript.." thinkThroo | Sciencx - Accessed . https://www.scien.cx/2024/09/30/object-preventextensions-in-javascript/
IEEE
" » Object.preventExtensions in JavaScript.." thinkThroo | Sciencx [Online]. Available: https://www.scien.cx/2024/09/30/object-preventextensions-in-javascript/. [Accessed: ]
rf:citation
» Object.preventExtensions in JavaScript. | thinkThroo | Sciencx | https://www.scien.cx/2024/09/30/object-preventextensions-in-javascript/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.