1. The use of var
1.1. The scope of var
1. var can be declared in global scope or function/local scope. When a var variable is declared outside the outermost function, the scope is global. This means that any variable declared with var outside the outermost function can be used in windows.
2. When var is declared in a function, the scope is local. This means it can only be accessed within a function.
Example:
var greeter = 'hey hi';
function newFunction() {
var hello = 'hello';
}
Here, greeter is globally scoped because it exists outside the function, while hello is function scoped. Therefore, we cannot access the variable hello outside the function.
1.2 var variables can be redeclared and modified
This means we can do the following in the same scope without error
var greeter = 'hey hi';
var greeter = 'say Hello instead';
another example
var greeter = 'hey hi';
greeter = 'say Hello instead';
1.3 Variable promotion for var
Variable hoisting is a JavaScript mechanism in which variable and function declarations are moved to the top of their scope before the code is executed. This means that if we do:
console.log(greeter);
var greeter = 'say hello';
The raw code will be interpreted as:
var greeter;
console.log(greeter); // greeter is undefined
greeter = 'say hello';
Thus, a variable declared with var is hoisted to the top of its scope and initialized with the undefined value.
Second, the use of let
2.1, let is block-level scope
A block is a block of code delimited by {}, with a block enclosed in braces. Anything inside curly braces is contained in a block-level scope. Therefore, variables declared in a block with let are available only in that block. Let me explain with an example:
let greeting = 'say Hi';
let times = 4;
if (times > 3) {
let hello = 'say Hello instead';
console.log(hello); // "say Hello instead"
}
console.log(hello); // hello is not defined
We see that using hello outside of its code block (the curly braces that define it) returns an error. This is because let variables are block scoped.
2.2. let can be modified but cannot be redeclared
Like var, variables declared with let can be modified within their scope. But unlike var, a let variable cannot be redeclared within its scope. Consider the following example:
let greeting = 'say Hi';
let greeting = 'say Hello instead'; // error: Identifier 'greeting' has already been declared
However, if the same variable is defined in a different scope, there will be no error:
let greeting = 'say Hi';
if (true) {
let greeting = 'say Hello instead';
console.log(greeting); // "say Hello instead"
}
console.log(greeting); // "say Hi"
This fact shows that using let is a better choice than var. When using let, you don't have to think about the name of the variable, because the variable only exists in its block-level scope.
Also, since a variable cannot be declared multiple times within a block scope, the problems with var discussed earlier do not occur.
2.3. Variable promotion of let
Just like var, let declarations are hoisted to the top of the scope.
But the difference is:
1. Variables declared with var are hoisted to the top of their scope and initialized with undefined values.
2. Variables declared with let will be hoisted to the top of its scope, and the value will not be initialized.
Therefore, if you try to use a let variable before it is declared, you will get a Reference Error.
3. The use of const
3.1. Variables declared by const are in block scope
Like let declarations, const declarations are only accessible at the block-level scope in which they are declared.
3.2, const cannot be modified and cannot be redeclared
This means that the value of a variable declared with const remains unchanged. Cannot be modified or restated. So if we declare the variable with const then we can't do this:
const greeting = 'say Hi';
greeting = 'say Hello instead'; // error: Assignment to constant variable.
or this one:
const greeting = 'say Hi';
const greeting = 'say Hello instead'; // error: Identifier 'greeting' has already been declared
Therefore, every const declaration must be initialized at declaration time.
The behavior is different when the object is declared const. Although const objects cannot be updated, properties of the object can be updated. So if we declare a const object as
const greeting = {
message: 'say Hi',
times: 4,
};
You also can't do something like this:
const greeting = {
words: 'Hello',
number: 'five',
}; // error: Assignment to constant variable.
But we can do this:
greeting.message = 'say Hello instead';
This will update the value of greeting.message without returning an error.
3.3, const variable promotion
Like let, const declarations are hoisted to the top, but not initialized.
4. Summary of the differences between var, let, and const
1. The var declaration is global scope or function scope, while let and const are block scope.
2. A var variable can be updated and redeclared within its scope; a let variable can be updated but not redeclared; a const variable can neither be updated nor redeclared.
3. They are all hoisted to the top of their scope. However, while the var variable is initialized with the variable undefined, the let and const variables are not initialized.
4. Although var and let can be declared without initialization, const must be initialized during declaration.