Javascript options and scopes

A bit confused by this explanation of the parameters and

It states that variables declared outside of a function are global, that variables declared inside a function are local, and variables declared inside a function without a preceding var

one essentially refer to a global variable with the same name. Good. It makes sense. But then this code throws me for a loop.

var x = "outside";

var f1 = function() {
  var x = "inside f1";
};
f1();
console.log(x);
// → outside

var f2 = function() {
  x = "inside f2";
};
f2();
console.log(x);
// → inside f2

      

Exiting the value of x in the first function should result in "inside f1" because this variable was declared locally. And this second function (which is that it contains a variable declared without var

and thus refers to the global one declared at the top) should result in "external". But ... in any case, it is not.

I get the gist of what's going to happen. But if I am not reading it wrong it seems to be the opposite of what the author describes. It cannot be a typo.

+3


source to share


3 answers


Variables declared within functions are only accessible (or scoped ) within those functions. The sample might be clearer if it were like this:

function f1() {
  var x = "Inside f1"; 
}

console.log(x);

      

will lead to

ReferenceError: x is not defined

      

However, functions that have a variable declared without var

are implicitly global (and either bad practice or an overlooked error):

function f2() {
  y = "Inside f2"; 
}

console.log(y);

      

Will work as you expect and also declare an implicit global.

It is worth mentioning "use strict";

which runs the code in E S5 Strict Mode . Typically, you want to declare this inside a function, which makes the function run in strict mode, and avoids strict mode semantics by breaking interdependencies with other code.

function f3() {
  "use strict";
  z = "Inside f3"; 
}

console.log(z);

      



will lead to

ReferenceError: z is not defined

      

Because strict mode does not allow you to declare an implicit global.


To clarify based on your comments, implicit globals will "overwrite" each other. It's easier to use JavaScript terminology:

  • x = 10

    will declare a property on the global environment object x

    , either window.x

    for the browser environment or global.x

    for the Node / IO environment.
  • x = 20

    will override the same property discussed above.

Here is a small snippet that you can run in any environment that demonstrates this. I'm not stating in any way that you should use implicit globals, but rather another example why you shouldn't.

function functionThatNeedsGreaterThan50(value) {
  // Skip checking the parameter because we trust the 
  // other developers on the team to make sure they call
  // this right. 
}

function f4() {
  q = 42; 
}

function f5() {
  q = 62; 
}

f4();
f5();

console.log(q);

// sometime thousands of calls later, one of which was
f4(); 

// I thought this was 62 but

functionThatNeedsGreaterThan50(q); 

      

+1


source


x

in f1

is a new variable that is only available in f1

and does not affect the first global x

. The example code in your question could be essentially written like this for clarity:



    var globalX = "outside";
    var f1 = function() {
      var localF1X = "inside f1";
    };
    f1();
    console.log(globalX); // → outside

    var f2 = function() {
      globalX = "inside f2";
    };
    f2();
    console.log(globalX); // → inside f2

      

+3


source


In JavaScript, variables are limited to the function level (or the global level if you declare variables outside of a function).

You can read more about JavaScript variables and hoisting here: http://javascriptissexy.com/javascript-variable-scope-and-hoisting-explained/

Thus:

var x = 'a';
function f1() {
    var x = 1;
    console.log(x);
}

f1(); //outputs 1
console.log(x); //outputs 'a'

function f2() {
    x = 'b';
}

console.log(x); //still outputs 'a'

f2();

console.log(x); //now outputs 'b'

      

+1


source







All Articles