0

I have a block of code and I want to exactly know the running order and why the result like this:

   

var variable = 10;
(()=>{
    variable_3 = 35;
    console.log(variable_3);
    var variable_3 = 45;
    variable_2 = 15;
    console.log(variable);
})();

console.log(variable_2);
console.log(variable_3);
var variable=30;

The output for this code is

35, 10, 15, Error

What I understand is:

  1. inside the IIFE we create a global variable_3 and assigned 35.
  2. Then it print out 35.
  3. We create a Var variable_3 inside the IIFE and assigned 45. (Is this Var get hoisted out of the IIFE??)

35.10.15 I understand, can you explain the last number and make my logic correct?

Thanks!

PEIRAN LIU
  • 157
  • 2
  • 11
  • The output shouldn’t be that (`variable_3` should not exist outside of the function). Are you running this in a browser REPL and accidentally keeping leftovers of previous experiments in scope? – Ry- Sep 28 '21 at 02:10
  • Oh Sorry the last result should be a error. I copy the question from a post and didn't test it myself. But why that variable 3 is not exist? We do declare it on the top of the IIFE – PEIRAN LIU Sep 28 '21 at 02:12
  • 3
    you'd better use strict mode, juggling the quality of interpreters is not a good idea (`'use strict';`) – Mister Jojo Sep 28 '21 at 02:21
  • @MisterJojo Thank you, but I really want to understand the hoisting process of the original code. it's help me understand the principle and pass the interview lol. – PEIRAN LIU Sep 28 '21 at 02:25
  • 1
    `var` is hoisted to the top of the current function scope. In your example for `variable_3`, that is the top of the IIFE itself and that `variable_3` is NOT available outside the IIFE. There really is NO reason at all to program with `var` any more. Use `const` or `let` and put the declaration in the appropriate place. Don't use `var`. – jfriend00 Sep 28 '21 at 02:31
  • your original code is an example of bad programming. The best recommendation is to learn to always declare your variables, and not to play leapfrog with their scopes. Today JavaScript interpreters agree to do calculations this way and your code will seem to work fine, but a new version in the interpreters will change and your code will crash and you may spend a lot of time fixing all of your old ones. code using this ambiguous writing. – Mister Jojo Sep 28 '21 at 02:33
  • @jfriend00 Thanks, but why we can do console.log(variable_2) and without any error at the end? – PEIRAN LIU Sep 28 '21 at 02:33
  • `variable3` inside the IIFE is hoisted to the top of the function, so it's as if you wrote `() =>{var variable3; variable3 = 35; console.log(variable3); variable3 = 45; variable_2 = 15; console.log(variable); }` `variable3` was never a global variable. `variable_2` is a global variable. – Raymond Chen Sep 28 '21 at 02:33
  • @PEIRANLIU - Because there is NO declaration for `variable_2` at all, it is an implicitly declared global variable, thus it is available everywhere. A very BAD way to program. Run in strict mode and you are NOT allowed to even do that. As others have said, there are lots of examples of bad programming here. Better to understand how to only do good programming and then you don't need to understand all these bad techniques. – jfriend00 Sep 28 '21 at 02:34
  • @RaymondChen Thank you, althought as guys said this is a bad programing example but your last sentence really triggered me "variable3 was never a global variable. variable_2 is a global variable"! – PEIRAN LIU Sep 28 '21 at 02:40

2 Answers2

1
(()=> {
  a = 123;
  console.log(a);  // 123
  console.log(window.a); // undefined
  var a;
})();

(()=>{
  var a = 4;
  (()=>{
    console.log(a);  // undefined
    var a = 5;
  })()
})()

(()=>{
  var source = {};
  (()=>{
    a = source;
    var a;
    console.log(a === source) // true
    // The variable source is indeed assigned to variable a, although variable a is declared after
  })()

})()

var variable is a definition like function , function can use before defined;

main();
function main(){}

so

a = 1;
var a;

like function; use variable before define is also ok;

欧阳斌
  • 2,231
  • 1
  • 8
  • 8
0

1.)Basically there are two scopes, that is the local and global scope. The function scope falls within the local scope.

2.)Hoisting moves declarations to the top of the current scope.

3.)If you assign a value to a variable you have not previously declared, it is automatically declared as a global variable(even if it is within a function) and initialized with the assigned value.

4.)In the local function scope, declaring with var, let or const keywords will all create a local variable. It is only available or accessible within that function.

In your case:

var variable = 10;//global variable declaration, outside the function.
(()=>{
    variable_3 = 35;//declares a global variable, ref. (3).
    console.log(variable_3);//prints 35, because it is available globally now.
    var variable_3 = 45;//re-declaration turns it to local variable, ref. (4).
    variable_2 = 15;//declares global variable, ref. (3)
    console.log(variable);//prints 10, because it is a global variable.
})();

console.log(variable_2);//prints because it is a global variable
console.log(variable_3);//fail to print because of re-declaration which changed it from a global variable to local function variable.
var variable=30;
Ahmed-Alimi
  • 1
  • 1