Properties that cannot be modified, known as read-only properties,

Question

Properties that cannot be modified, known as read-only properties,

While browsing through this post on read-only properties, I stumbled upon the following code snippet:

var myObject = {
    get readOnlyProperty() { return 42; }
};

alert(myObject.readOnlyProperty); // 42
myObject.readOnlyProperty = 5;    // Assignment allowed but has no effect
alert(myObject.readOnlyProperty); // 42

I understand that using an IIFE can help in hiding scope and making variables or properties "private". However, what confuses me is:

Why does the assignment work if it doesn't actually change anything? With no explicit scope indicated in this example, I find it puzzling how JavaScript treats a property as private.

javascript object

Answer 1

Answer №1

Why is assignment allowed, and if it's allowed, how can nothing happen? In this code excerpt, there is no implicit scope available, so I am puzzled by how JavaScript can infer a private property.

The reason assignments are permitted (before strict mode implementation) without throwing an error is to maintain the consistency that users expect. Although it is still possible to override this behavior by creating a setter function that generates an error when called, this non-throwing behavior is the default in JavaScript for properties. It may not be ideal, but it is the way it currently operates.

If you enable strict mode, you should encounter:

TypeError: setting a property that has only a getter

Answer 2

Why is assignment allowed, and if it's allowed, how can nothing happen? In this code excerpt, there is no implicit scope available, so I am puzzled by how JavaScript can infer a private property.

The reason assignments are permitted (before strict mode implementation) without throwing an error is to maintain the consistency that users expect. Although it is still possible to override this behavior by creating a setter function that generates an error when called, this non-throwing behavior is the default in JavaScript for properties. It may not be ideal, but it is the way it currently operates.

If you enable strict mode, you should encounter:

TypeError: setting a property that has only a getter

Answer 3

Answer №2

Using getters and setters in object literal expressions provides a convenient shorthand compared to using Object.defineProperty() in ES5.

A getter retrieves a specific value when a property of an object is accessed.

let obj = {};
obj.foo = 3; // Setting a property value
obj.foo; // Getting the property value

By defining a getter, each time you request a property, you will receive the value that the getter returns.

For example, if you have:

let obj = {};

Object.defineProperty(obj, 'readOnly', {
    'get': function() { return 42; }
});

Or

let obj = {
    get readOnly() { return 42; }
};

Your variable will always be 42, as it will consistently return that value. Attempting to set a different value for the property will not change the returned result.

To prevent assignment, you can include a setter that throws an Error.

Answer 4

Using getters and setters in object literal expressions provides a convenient shorthand compared to using Object.defineProperty() in ES5.

A getter retrieves a specific value when a property of an object is accessed.

let obj = {};
obj.foo = 3; // Setting a property value
obj.foo; // Getting the property value

By defining a getter, each time you request a property, you will receive the value that the getter returns.

For example, if you have:

let obj = {};

Object.defineProperty(obj, 'readOnly', {
    'get': function() { return 42; }
});

Or

let obj = {
    get readOnly() { return 42; }
};

Your variable will always be 42, as it will consistently return that value. Attempting to set a different value for the property will not change the returned result.

To prevent assignment, you can include a setter that throws an Error.

Properties that cannot be modified, known as read-only properties,

Answer №1

Answer №2

Similar questions

Form submission is not functioning as expected

What is the best way to execute the app functions, such as get and post, that have been defined

What is the reason for Next.js and Gatsby.js necessitating the installation of Node.js, while React.js does not have that requirement?

Having trouble with loading a new page on an HTML website

Using regular expressions in JavaScript to extract the value following a colon, without including the colon itself

Error Occurs While Getting Request Parameters with Ajax Post and Express.js

What is the NodeJs Event loop and how does it work with libuv and V8

Bootstrap Modal closing problem

Adjust positioning of navigation when hovered over

What is the best way to access the text content of a nested HTML element for automation tasks with Selenium or Protractor?

Making an AJAX call to a PHP script to add data

Javascript increasing the variable

Having trouble triggering the button with querySelector in Angular

Methods for eliminating curly braces from HTTP response in JavaScript before displaying them on a webpage

What steps do I need to follow to create a 3D shooting game using HTML5 Canvas?

I have an npm package that relies on X (let's say material-ui). What is the best way to prevent users from having to install

Using jQuery, you can disable an option upon selection and also change its border color

The functionality of the Hubot script is restricted to Slack conversations where I initiate a direct message with the

Execute HTML code within a text field

Sending the ID of a mapped button to a component