浏览器控制台中的变量提升问题

Question

(1) why are the two examples different?

console.log(a); 
a = 1; // this will have a is not defined;

console.log(a); 
function a(){}; // this will have no error;

(2)In browser console.

console.log(a); 
a = 1; 
window.a === 1; // true   

why is the variable a bound to window but console.log still has an error.

window.a = 1;
console.log(a);

why is the variable a bound to window but console.log has no error.

Answer 1

the first example console.log(a); a = 1; console.log(a); a = 1; will return an error because your variable is not declared and only declared variables are hoisted using a keyword such as var for example

From MDN

JavaScript only hoists declarations, not initializations. If a variable is declared and initialized after using it, the value will be undefined.

The ex console.log(a); function a(){}; console.log(a); function a(){}; doesn't return an error because JavaScript is adding the function declarations to memory before it executes aka Hoisting

in the example console.log(a); a = 1; window.a === 1; console.log(a); a = 1; window.a === 1; will return an error because your variable is not declared, same as the first example

in this example window.a = 1; console.log(a) window.a = 1; console.log(a) won't return an error because you added the variable to the global object window and gave it a value of 1 before attempting to print it's value.

Answer 2

This is called hoisting in javascript.

(1)

console.log(a); 
a = 1; // this will have a is not defined;

In the above snippet, a is assigned after console , so it is throwing an error.

In case if you have

 console.log(a);
 var a = 1;

The result will be undefined printed in the console. It is because of hoisting. Javascript will execute the above in the following order.

var a;
console.log(a);
a = 1;

Hoisting is executing the initialisation first and rest of the execution will go as per the flow.

var a; is executed first and a is initialized to the scope. Hence console.log(a) will not throw any error. At the time of its execution, a value is undefined .

(2)

console.log(a); 
a = 1; 
window.a === 1; // true   

Whenever you try to do anything in the console, all the variables and functions will be registered with the window scope. So, when you do a = 1 in console, it will be window.a .

(3)

console.log(a); 
function a(){}; // this will have no error;

The same hoisting applies to functions also. When you created a function using constructor like above, it will be hoisted . If you execute the below snippet you will get error because it is not hoisted .

console.log(a)
a = function(){}

why is the variable a bound to window but console.log still has an error.

The variable is registered with window scope, but it is not hoisted. So you will get error. Hoisting will only work when you initialize a variable.

To get further details about hoisting , feel free to read docs

Answer 3

console.log(a); a = 1; // this will have a is not defined; console.log(a); function a(){}; // this will have no error;

The function keyword is bound before any code will be excuted in JS.

 console.log(a); a = 1; window.a === 1; // true

why is the variable a bound to window but console.log still has an error.

 window.a = 1; console.log(a);

why is the variable a bound to window but console.log has no error.

You're already in the window context. So a is the same as window.a .