So I have a Javascript module that looks like the following:

const data = [
     {
          id: 'do not modify',
          name: 'do not modify'
     },         
     {
          id: 'do not modify 2',
          name: 'do not modify 2'
     }
];

export default data;

Is there a clean way I can recursively freeze all objects in an array without explicitly calling Object.freeze() on each and every object? I realize I could just loop through the array and freeze each of them before exporting, but I was curious to know if there was a more elegant solution.

So I have a Javascript module that looks like the following:

const data = [
     {
          id: 'do not modify',
          name: 'do not modify'
     },         
     {
          id: 'do not modify 2',
          name: 'do not modify 2'
     }
];

export default data;

Is there a clean way I can recursively freeze all objects in an array without explicitly calling Object.freeze() on each and every object? I realize I could just loop through the array and freeze each of them before exporting, but I was curious to know if there was a more elegant solution.

• javascript

• You can just freeze the array, which itself is an object – Glen Despaux Jr Commented Aug 18, 2016 at 21:11
• 4 data.forEach(obj => Object.freeze(obj)); doesn't seem plicated to me. – zzzzBov Commented Aug 18, 2016 at 21:11
• @zzzzBov: it's not plicated once you know of the Object.freeze() function, which I hadn't until just now (thanks!) :) – David Thomas Commented Aug 18, 2016 at 21:15

4 Answers 4

All you'd have to do is pass Object.freeze to Array.prototype.forEach:

'use strict';
var objs = [
  { a: 1 },
  { b: 2 },
  { c: 3 }
];

objs.forEach(Object.freeze);
objs[0].a = 4; // Fails due to being frozen

data.forEach(Object.freeze) is the best you can do.

In your case, you might be able to clean up your code like so:

const data = [
  unmodifiableObj(0, 'Foo'),
  unmodifiableObj(1, 'Bar')
]

export default data;


function unmodifiableObj(id, name) {
  return Object.freeze({ id, name })
}

You can't freeze array with elements inside without calling freeze on every object. Here you can find example of deep freeze https://developer.mozilla/pl/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze

I'm pasting code from page linked above:

obj1 = {
  internal: {}
};

Object.freeze(obj1);
obj1.internal.a = 'aValue';

obj1.internal.a // 'aValue'

// To make obj fully immutable, freeze each object in obj.
// To do so, we use this function.
function deepFreeze(obj) {

  // Retrieve the property names defined on obj
  var propNames = Object.getOwnPropertyNames(obj);

  // Freeze properties before freezing self
  propNames.forEach(function(name) {
    var prop = obj[name];

    // Freeze prop if it is an object
    if (typeof prop == 'object' && prop !== null)
      deepFreeze(prop);
  });

  // Freeze self (no-op if already frozen)
  return Object.freeze(obj);
}

obj2 = {
  internal: {}
};

deepFreeze(obj2);
obj2.internal.a = 'anotherValue';
obj2.internal.a; // undefined

Updated with sample code from MDN

Try this:

// To make obj fully immutable, freeze each object in obj.
// To do so, we use this function.
function deepFreeze(obj) {

// Retrieve the property names defined on obj
var propNames = Object.getOwnPropertyNames(obj);

// Freeze properties before freezing self
propNames.forEach(function(name) {
var prop = obj[name];

// Freeze prop if it is an object
if (typeof prop == 'object' && prop !== null)
  deepFreeze(prop);
});

// Freeze self (no-op if already frozen)
return Object.freeze(obj);
}

Which will freeze the array itself, as well as any objects it contains.