Using Object.freeze does not freeze the elements within an array

Question

Using Object.freeze does not freeze the elements within an array

When I execute the following:

var test = {
    'test': 5
};

Object.freeze(test);

// Throws an error
test.test = 3;

An error is thrown (as expected), but when I try this instead

var nestedTest = [
    {'test': 5},
    {'test': 6},
    {'test': 7},
    {'test': 8}
];

// Freezing all objects in the array
for (var i = 0; nestedTest.length > i; i++) {
    Object.freeze(i);
};

// Overwrites successfully
nestedTest[0].test = 3;

I find that I am able to modify the values of those objects.

Initially, I thought that being in an array wouldn't affect the behavior of the objects.

Could someone please explain what exactly is happening here?

javascript object

Answer 1

Answer №1

You've mistakenly frozen the index i instead of the object at this index. Your logic should be:

Object.freeze(nestedTest[i]);

Instead of:

Object.freeze(i);

Within the for loop, here's the corrected code:

// Freeze all objects in the array
for (var i = 0; nestedTest.length > i; i++) {
    Object.freeze(nestedTest[i]);
};

NOTE: There's a small typo in the last line, it should be:

nestedTest[0].test = 3;

I hope this explanation helps clarify things.

var nestedTest = [
    {'test': 5},
    {'test': 6},
    {'test': 7},
    {'test': 8}
];

// Freeze all objects in the array
for (var i = 0; nestedTest.length > i; i++) {
    Object.freeze(nestedTest[i]);
};

// Attempting to overwrite
nestedTest[0].test = 3;

// Not overwritten
console.log(nestedTest[0]);

Answer 2

You've mistakenly frozen the index i instead of the object at this index. Your logic should be:

Object.freeze(nestedTest[i]);

Instead of:

Object.freeze(i);

Within the for loop, here's the corrected code:

// Freeze all objects in the array
for (var i = 0; nestedTest.length > i; i++) {
    Object.freeze(nestedTest[i]);
};

NOTE: There's a small typo in the last line, it should be:

nestedTest[0].test = 3;

I hope this explanation helps clarify things.

var nestedTest = [
    {'test': 5},
    {'test': 6},
    {'test': 7},
    {'test': 8}
];

// Freeze all objects in the array
for (var i = 0; nestedTest.length > i; i++) {
    Object.freeze(nestedTest[i]);
};

// Attempting to overwrite
nestedTest[0].test = 3;

// Not overwritten
console.log(nestedTest[0]);

Answer 3

Answer №2

It is recommended to use <code>Object.freeze(nestedTest[i]);

instead of Object.freeze(i);. Also, replace test[0].test = 3; with nestedTest[0].test = 3;

Answer 4

It is recommended to use <code>Object.freeze(nestedTest[i]);

instead of Object.freeze(i);. Also, replace test[0].test = 3; with nestedTest[0].test = 3;

Answer 5

Answer №3

To improve the conciseness of your syntax, I recommend leveraging Javascript's functional features. For example, using .map for Iterateable data structures eliminates the need for cumbersome and error-prone for loops.

A more concise approach would be:

var nestedTest = [
    {'test': 5},
    {'test': 6},
    {'test': 7},
    {'test': 8}
].map(item => Object.freeze(item));

Alternatively, you could use:

var nestedTest = [
    {'test': 5},
    {'test': 6},
    {'test': 7},
    {'test': 8}
].map(freezeArrayItem);

const freezeArrayItem = (item) => Object.freeze(item);

Answer 6

To improve the conciseness of your syntax, I recommend leveraging Javascript's functional features. For example, using .map for Iterateable data structures eliminates the need for cumbersome and error-prone for loops.

A more concise approach would be:

var nestedTest = [
    {'test': 5},
    {'test': 6},
    {'test': 7},
    {'test': 8}
].map(item => Object.freeze(item));

Alternatively, you could use:

var nestedTest = [
    {'test': 5},
    {'test': 6},
    {'test': 7},
    {'test': 8}
].map(freezeArrayItem);

const freezeArrayItem = (item) => Object.freeze(item);

Using Object.freeze does not freeze the elements within an array

Answer №1

Answer №2

Answer №3

Similar questions

Having trouble importing Bootstrap into Next.js? It seems like the issue may be related to the

Several radial progress charts in JavaScript

Opening a browser tab discreetly and extracting valuable data from it

Gradually appear/disappear div element with a delay added

Using Sequelize to Include Model Without Specifying Table Name

Implement the Show/Hide TinyMCE Functionality in your <textarea></textarea> Box

Navigating between pages using React and Material UI

Clicking will open the link in both a new tab and the current tab

What makes it possible for Vue v3 to handle variables that are undefined?

An argument error in IE 8 caused by an invalid procedure call

Using AngularJS to send a model to ui-select

Submitting a JSPX form to interact with PHP backend

I am encountering issues where none of the NPM commands are functioning properly even after updating the

Pause until the array is populated before displaying the components

JavaScript function is not identifiable

Retrieve the dimensions of an image once rendering is complete, using Angular

Assistance in configuring Zurb Foundation 5 for optimal integration with Laravel

Establish a buffering system for the <video> element

Displaying a div in Vue.js when a button is clicked and an array is filled with

Issue with Angular: Unable to update model before modal closure on submit