Function defined in setTimeout has access to the outer variables in JavaScript

Question

I know that this keyword always refers to the this of the current scope, which changes any time you wrap something in function() { ... }. My question is, why do I have access to the outer scope variable x in the function inside the setTimeout function?

var x = 45;

function getRecipe(recipe) {
  x = 35;
  return {
    displayRecipe: function(a) {
      //here we have access to x=35
      setTimeout(function() {
        //why do we have access to x=35 and to recipe here?
        console.log(this.x + a + recipe);
      }, 1500)
    }
  }
}

getRecipe("noodles").displayRecipe(2);

Ivar · Accepted Answer · 2021-01-09 01:32:40Z

2

When not in strict mode, and when the this is not set by the call, this inside functions will default to the global object (window in browsers).

function f1() {
  return this;
}

console.log(f1() === window); // true

Also in browsers when not in strict mode, global variables (variables declared in the global scope) declared with var are also created as members of the global object.

var foo = "foobar";
console.log(foo === window.foo);

Because your x is declared as a global variable, it is also added as a member of the window object. Because your setTimeout callback does not explicitly set the this scope, it also defaults to the global object, and so it is possible you can access x via this.

If x would not have been declared in the global scope (or would've been declared in strict mode or with a let/const statement), you would not be able to access it:

(function() {
  var x = 45;

  function getRecipe(recipe) {
    x = 35;
    return {
      displayRecipe: function(a) {
        //here we have access to x=35
        setTimeout(function() {
          //why do we have access to x=35 and to recipe here?
          console.log(this.x, a, recipe);
        }, 1500)
      }
    }

  }

  getRecipe("noodles").displayRecipe(2);
})();

edited Jan 9, 2021 at 1:32

answered Jan 9, 2021 at 1:17

Ivar

6,97912 gold badges58 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rousspc Over a year ago

so x=35 is declared in the global scope?

Ivar Over a year ago

var x = 45; is declared in the global scope and thus a global variable. You change the value of this global variable to 35 inside your getRecipe function. (But changing the value does not change the scope of the variable.)

Vahid · Accepted Answer · 2021-01-09 01:05:52Z

0

You should put let before x=35

var x=45;
function getRecipe(recipe){
      let x=35;
      return{
         displayRecipe: function(a){
         //here we have access to x=35
            setTimeout(function(){
                //why do we have access to x=35 and to recipe here?
                console.log(this.x + a + recipe );
            },1500)
         }
      }

}

getRecipe("noodles").displayRecipe(2);

answered Jan 9, 2021 at 1:05

Vahid

6754 silver badges12 bronze badges

Collectives™ on Stack Overflow

Function defined in setTimeout has access to the outer variables in JavaScript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related