The value of a constant variable inside IIFE is being changed outside of it? How is this possible?

Question

I have a constant variable inside an IIFE. This variable is being returned and I don't know why it can be changed.

My code looks like this:

const main = (function(args) {
    "use strict";

    let window = args.window, document = window.document, location = window.location;
    let $ = args.jQuery || null;

    const CONSTANTS = {
        config: {
            appRoot: "http://localhost/development/.../console/",
            apiRoot: "http://localhost/development/.../api/"
        }
     }

    return {
        CONSTANTS
    };
}({ window, jQuery }));

console.log(main.CONSTANTS);
console.log(main.CONSTANTS.config.appRoot = null);  /* returns null */
console.log(main.CONSTANTS);  /* value of appRoot is null now */

Now, when I open the console and write main.CONSTANTS.config.appRoot = null, it simply returns null. I don't want this value to be changed. Am I doing something wrong? Have I missed something too basic?

Also, where is this main stored? It is not stored in the window object as typeof window.main returns undefined & typeof main returns object.

Declaring a reference as "const" doesn't make what it refers to immutable. — Dave Newton, Apr 22 '21 at 17:25
A followup question might ask why you need the object to be immutable? If it's for "security" then you are never going to be satisfied while executing code on the client side. — Deadron, Apr 22 '21 at 20:12
Ohh no it's not for security . I am actually using these in some other functions so I don't want these values to be editable. — Rocker2102, Apr 22 '21 at 21:07

Ben Stephens · Accepted Answer · 2021-04-22T20:09:22.173

2

Maybe try Object.freeze

const main = (function(args) {
  const CONSTANTS = Object.freeze({
    config: Object.freeze({
      appRoot: "http://localhost/development/.../console/",
      apiRoot: "http://localhost/development/.../api/"
    })
  });

  return Object.freeze({
    CONSTANTS
  });
}());

console.log(main.CONSTANTS);
console.log(main.CONSTANTS.config.appRoot = null);
console.log(main.CONSTANTS.config = null);
console.log(main.CONSTANTS);

edited Apr 22 '21 at 20:09

answered Apr 22 '21 at 17:30

Ben Stephens

3,303
1
4
8

Yes, it works for most of my cases, but fails in case of nested objects. – Rocker2102 Apr 22 '21 at 18:27
@Rocker2102 My example has nested objects and it seems to work. Could you be more specific in how to make it not work? (Note: my example uses Object.freeze twice.) – Ben Stephens Apr 22 '21 at 20:07
@Rocker2102 I've edited this to add another Object.freeze in case it was the writable config key that was the issue. – Ben Stephens Apr 22 '21 at 20:10
Yeah, thanks for all your help, but what if I had many more properties in the object. It would lead to many Object.freeze() which I don't think is good? – Rocker2102 Apr 22 '21 at 20:50
@Rocker2102 Perhaps one of the answers on the following post would help: https://stackoverflow.com/questions/34776846/how-to-freeze-nested-objects-in-javascript – Ben Stephens Apr 22 '21 at 20:53
Would you mind looking at this: [Example code](https://gist.github.com/Rocker2102/3c6bc68036cb3b0b800d0b6044e14665). Is this ok? – Rocker2102 Apr 22 '21 at 21:00
@Rocker2102 I might not be the person to ask that, and even if I were, I'd probably need to know a fair bit about what you're trying to do and what 'ok' would mean for this code. If you don't think a question about that would fit stackoverflow maybe take a look at https://codereview.stackexchange.com/ and see if your question would fit that site. Sorry for not being more helpful. – Ben Stephens Apr 22 '21 at 21:07

The value of a constant variable inside IIFE is being changed outside of it? How is this possible?

1 Answers1