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

Determining with jQuery if the right element has been successfully "dropped"

Is it not possible to utilize async/await with MongoDB Model, despite it yielding a Promise?

AngularJS Enhanced Multi-Level Table

hold on for the arrays to be populated with data from the ajax calls

Find the current location of the scroll bar on the view port

Uh-oh: create-react-app installation has been canceled

Error: Trying to access the 'title' property of an undefined variable in Vue.js

Clicking on a card will cause it to expand

Create a recursive array structure that contains two distinct data types and specific guidelines

Achieving CommonJS imports compilation with Typescript

"Implementing a click event handler on a button within an iframe

Show notifications after being redirected to a new page

Inscribe latitude from marker onto input field

What could be causing this Angular controller to throw the error message "Error: Unknown provider: nProvider <- n"?

Is it possible to utilize AJAX to load the URL and then extract and analyze the data rather than

Extracting information from the callback function

Implementing slideDown() functionality to bootstrap 4 card-body with jQuery: A step-by-step guide

Encountering issues with loading styles in Vue single file components

How come useEffect runs only once even when multiple states in the dependency array of useEffect change simultaneously?

Uploading files with previews and no option to alter the image dimensions