Variable promotion problem

This is an old question, so let’s go back

console.log(a); // undefined
var a = 10;
console.log(a); / / 10
Copy the code

This code prints undefined, then 10. So why is that? Var is a variable that is promoted to the top of the code, but it is only declared without assigning a value, so the default value of a is undefined

var a;
console.log(a);
a = 10;
console.log(a);
Copy the code

Let, on the other hand, does not have the problem of variable promotion; it is truly executed from top to bottom. The variable is not accessible until it has been declared.

Scope: The scope of an action

  1. Let’s take a look at the scope of var
if(true) {var a = 10;
}
console.log("a=" + a); // a=10

function fn(){
	var b = 20;
} 
console.log("b=" + b); // b=undefined
Copy the code

In this case, it is found that the curly braces do not block var variables at all. Only function can block var variables. In other words, var functions are either inside or outside the function

function fn1(){
	var a = 10;
	console.log(b);// undefined
	function fn2(){
		var b = 20;
		console.log(a);/ / 10}}Copy the code

Like an onion, the inner layer has access to the outer variables, while the outer layer has no access to the inner variables.

If the variable declared by var does not exist in any function, then the scope it can be used in is the global scope.

  1. Take a look at the scope of let
if(true) {let a = 10;
}
console.log("a=" + a); / / an error

function fn(){
	let b = 20;
} 
console.log("b=" + b); / / an error

if(true) {let c = 30;
	console.log("c=" + c);/ / 30
}
Copy the code

You can see that it’s not only blocked by function, it’s blocked by curly braces. In contrast to var, the scope of let is limited by curly braces, which enclose the scope called block-level scope

When you have block-level scopes that are layered on top of each other like an onion

{
	let a = 10;
	console.log("b=" + b);/ / an error
	{
		let b = 20;
		console.log("a=" + a);// a=10}}Copy the code

Similarly, the inner layer can access the outer variables, but the outer layer cannot access the inner variables

Repeat statement

Var can be declared repeatedly in the same scope. Due to the problem of variable promotion, declaring var multiple times is the same as declaring var once.

var a = 10;
var a = 20;
var a = 30;
console.log(a);/ / 30
Copy the code

Let does not allow variables to be declared repeatedly in the same scope

Properties of the top-level object

Global variables declared by var are mounted by default on properties of the top-level object, which in the browser is window

var a = 10;
console.log(window.a); // a

let b = 20;
console.log(window.b);// undefined
Copy the code

Let vs. const

Let behaves like const, except that the value of a let can be changed. Const const declares constants that are read-only and cannot be changed.

const a = 10;
a = 20;/ / an error
Copy the code

The nature of const, to quote Teacher Ruan Yifeng

What const actually guarantees is not that the value of the variable cannot be changed, but that the data stored at the memory address to which the variable points cannot be changed. For data of simple types (values, strings, booleans), the value is stored at the memory address to which the variable points, and is therefore equivalent to a constant. But for complex type data (mainly objects and arrays), variable pointing to the memory address, save only a pointer to the actual data, const can guarantee the pointer is fixed (i.e., always points to the other a fixed address), as far as it is pointing to the data structure of variable, is completely unable to control. Therefore, declaring an object as a constant must be done with great care.

const a = { name: "GIAO elder brother" };
a.name = "GIAO brother";
console.log(a.name);/ / "GIAO brother"
Copy the code