Lessons from opensource: Use Object.defineProperty to create an unwritable object’s property.

These lessons are picked from next.js open source code. In this article, you will learn how to create an unwritable property using Object.defineProperty.

Object.defineProperty

Object.defineProperty() is used to add a new property directly to an object.

If you are looking to practice next.js, checkout my website: https://tthroo.com/

Execute the following in your browser’s console.

const object1 = {};
 
Object.defineProperty(object1, 'property1', {
  value: 42,
  writable: false,
});

Try to make the following modification using the same console:

object1.property1 = 11

Because writable is set to false, you are not able to modify the property1 value. MDN docs has awesome documentation about this.

Object.defineProperty has data descriptor like shown in the above image and accessor descriptor (this is what is used in next.js source code explained below)

Where is Object.defineProperty used in nextjs codebase?

You can find Object.defineProperty used in next.js code here.

https://github.com/vercel/next.js/blob/canary/packages/next/src/client/router.ts#L89

Conclusion:

You do not have the flexibility to make a property unwritable when you create an object using const obj = {}. In case, if you ever need to have an unwritable property in an object, use Object.defineProperty with unwritable set to false.

About me:

Hey, my name is Ramu Narasinga. Email: ramu.narasinga@gmail.com

Tired of AI-generated code that works but nobody understands?

I spent 3+ years studying OSS codebases and wrote 350+ articles on what makes them production-grade. I built an open source tool that reviews your PR against your existing codebase patterns.

Your codebase. Your patterns. Enforced.

Get started for free — thinkthroo.com