Function scope declaration using var

When a variable is declared using var, it is automatically added to the nearest context. In a function, the closest context is the local context of the function. In the with statement, the closest context is also the function context. If a variable is initialized undeclared, it is automatically added to the global context

function add(num1, num2) {
  var sum = num1 + num2;
  return sum;
}
let result = add(10.20); / / 30
console.log(sum);         Error: sum is not a valid variable
Copy the code

The function add() defines a local variable sum that holds the result of the addition operation. This value is returned as the value of the function, but the variable sum is not accessible outside the function. If we omit the var keyword in the above example, sum becomes accessible after add() is called:

function add(num1, num2) {
  sum = num1 + num2;
  return sum;
}

let result = add(10.20); / / 30
console.log(sum); / / 30
Copy the code

This time, the variable sum is initialized with the result of the addition operation without the var declaration. After the call to add(), sum is added to the global context and remains after the function exits, making it accessible later.

The VAR declaration is carried to the top of the function or global scope, before all the code in the scope. This phenomenon is called “ascending.” Promotion lets code in the same scope use variables without considering whether they have been declared. In practice, however, promotion can also lead to the legal but strange phenomenon of using variables before they are declared. The following example shows two equivalent pieces of code in global scope:

var name = "Jake";

// This is equivalent to:

name = 'Jake';
var name;
Copy the code
function fn1() {
  var name = 'Jake';
}

// This is equivalent to:
function fn2() {
  var name;
  name = 'Jake';
}
Copy the code

Use the block-level scope declaration for lets

The new LET keyword in ES6 is similar to var, but its scope is block-level, which is also a new concept in JavaScript. The block-level scope is defined by the nearest pair of inclusion braces {}. In other words, if blocks, while blocks, function blocks, and even individual blocks are also the scope of let declaration variables.

Another difference between let and VAR is that you cannot declare it twice in the same scope. Duplicate var declarations are ignored, while duplicate let declarations raise SyntaxError.

The behavior of the LET is ideal for declaring iteration variables in loops. Iteration variables declared using VAR can leak out of the loop, which should be avoided

for (var i = 0; i < 10; ++i) {}
console.log(i); / / 10

for (let j = 0; j < 10; ++j) {}
console.log(j); // ReferenceError: j is not defined
Copy the code

3 use a const constant declaration

In addition to let, ES6 also adds the const keyword. Variables declared using const must also be initialized to a value. Once declared, new values cannot be reassigned at any point in its life cycle.

const a; // SyntaxError: Constant declaration is not initialized

const b = 3;
console.log(b); / / 3
b = 4; // TypeError: Assigns values to constants
Copy the code

Const declarations apply only to top-level primitives or objects. In other words, a const variable assigned to an object cannot be reassigned to another reference, but the key of the object is not restricted:

const o1 = {};
//o1 = {}; // TypeError: Assigns values to constants

const o2 = {};
o2.name = "Jake";
console.log(o2.name); // 'Jake'
o2.name = "Tom";
console.log(o2.name); // 'Tom'
Copy the code

Freeze () to make the entire Object immutable, you can use object.freeze (), which will silently fail when assigning an attribute without an error:

const o3 = Object.freeze({});
o3.name = 'Jake';
console.log(o3.name); // undefined
Copy the code

Const is the same as a LET declaration except that it follows the rules above