Retrieving data from Immediately Invoked Function Expressions

Question

Retrieving data from Immediately Invoked Function Expressions

I've been working with a closure that looks like this:

var Container = (function () {
   var variable;
   var changeVariable = function () {
       variable = 5;
   };
   return {
       variable: variable,
       changeVariable: changeVariable
   };
})();

Container.changeVariable();
console.log(Container.variable);

Surprisingly, the result is undefined unless I manually set variable to 5 as follows:

Container.variable = 5

This raises some questions in my mind. Why does this happen? What's causing the difference? Is there a correct way for me to handle this situation?

javascript

Answer 1

Answer №1

What is the reason behind this?

JavaScript follows value assignment.

variable = 5; assigns the value 5 to the variable variable.

variable: variable, assigns the current value of variable to the property variable. It does not create a reference to the variable named variable.

If you change the value of the variable called variable, it will not affect the value of the property called variable.

What is the correct way to do this?

Create an object, store it locally, manipulate the object, and then return it.

Avoid using the variable name variable altogether.

var container = (function() {

  var self = {
    variable: undefined,
    changeVariable: changeVariable
  };

  function changeVariable() {
    self.variable = 5;
  }

  return self;
})();

container.changeVariable();
console.log(container.variable);

(By the way, in JavaScript convention, identifiers starting with capital letters are reserved for constructor functions. I've updated Container to adhere to this convention).

Answer 2

What is the reason behind this?

JavaScript follows value assignment.

variable = 5; assigns the value 5 to the variable variable.

variable: variable, assigns the current value of variable to the property variable. It does not create a reference to the variable named variable.

If you change the value of the variable called variable, it will not affect the value of the property called variable.

What is the correct way to do this?

Create an object, store it locally, manipulate the object, and then return it.

Avoid using the variable name variable altogether.

var container = (function() {

  var self = {
    variable: undefined,
    changeVariable: changeVariable
  };

  function changeVariable() {
    self.variable = 5;
  }

  return self;
})();

container.changeVariable();
console.log(container.variable);

(By the way, in JavaScript convention, identifiers starting with capital letters are reserved for constructor functions. I've updated Container to adhere to this convention).

Answer 3

Answer №2

Implement a getter method:

const obj = {
   get value() { return value; },
   updateValue: updateValue
};

Answer 4

Implement a getter method:

const obj = {
   get value() { return value; },
   updateValue: updateValue
};

Retrieving data from Immediately Invoked Function Expressions

Answer №1

Answer №2

Similar questions

Editing HTML using the retrieved jQuery html() content

Insert a 5-second delay in the JavaScript code before triggering the click event on the next button

Testing a React component that uses useParams: A step-by-step guide

CodeIgniter: Redirecting Made Easy

Transferring callback variables from an Express GET request to a forked process in Node.js

Customize a jQuery tab plugin to show a particular tab upon initialization [with JSFiddle example]

How to initiate a refresh in a React.js component?

Encountering a surprise Illegal Token JS Error

The JSON response is being overridden by a catch-all URL and ends up being displayed as a 404 error page

The function 'compilation.emitAsset' is not recognized by the sitemap-webpack-plugin

Error encountered during webpack development build due to syntax issues

SCORM: moving between SCOs by clicking a button in the presentation

deployJava.js injects a new <embed> element into the header section of the webpage

Is there a way to retrieve the id of a jQuery autocomplete input while inside the onItemSelect callback function?

What would cause this to result in a blank array?

What is the best way to simulate fetch in Redux Async Actions?

What is the sequence in which Jest executes its tests?

How to retrieve the object's property with the highest numerical value using JavaScript

Invoking a React function repeatedly (every second)

Sharing golang gin session with next.js