JavaScript : Let, Var, Const

Var

"var" is a keyword in JavaScript used for variable declaration. It declares a variable and assigns a value to it. The scope of a "var" variable is either function scope or globally scoped if declared outside of a function.

console.log(name); //undefined
var name = "jagdish";  //globally created a variable

function hey() {
  var age = 21; //create variable inside function
  console.log(name); 
}

hey();
console.log(age);//reference error - cannot access outside the scope

Hoisting with Var

Yes, hoisting works with the "var" keyword in JavaScript. Hoisting is a mechanism in JavaScript where variables declared with the "var" keyword are moved to the top of their scope, regardless of where they are declared in the code.

This means that a "var" variable can be used before it is declared in the code. However, its value is undefined until the assignment statement is executed.

console.log(x); // Output: undefined
var x = 10;
console.log(x); // Output: 10

In the example above, the first console.log(x) statement outputs undefined, not a ReferenceError, because of hoisting. The variable declaration is moved to the top of its scope, but the assignment statement is not.

It's important to note that hoisting only works with "var" and not with "let" or "const".

Let

"let" is a keyword in JavaScript used for declaring variables with block scope. Block scope means that the variable can only be accessed within the block in which it is declared.

"let" was introduced in ECMAScript 6 (ES6) as an alternative to "var" for declaring variables. Unlike "var", which has function scope or is globally scoped if declared outside of a function, "let" has block scope, meaning it can only be accessed within the curly braces {} in which it is declared.

console.log(name); //referenceError because hoisting won't work with let
let name = "jagdish";
let name = "rahul"; //SyntaxError: Identifier 'name' has already been declared

name = "Jassi"; //can be reassigned a new value

function hey() {
  let age = 21;
  console.log(name); //jagdish
}

hey();
console.log(age); //ReferenceError: age is not defined

Hoisting with Let

No, hoisting does not work with the "let" keyword in JavaScript. "let" variables are not hoisted to the top of their scope like "var" variables are. Instead, "let" variables are accessible only within the block in which they are declared.

console.log(name); //ReferenceError name is not defined.
let name = "Jagdish";

Const

"const" is a keyword in JavaScript used for declaring constant variables. A constant variable is a variable that cannot be reassigned a new value once it has been declared.

"const" was introduced in ECMAScript 6 (ES6) as an alternative to "var" and "let" for declaring variables. Like "let", "const" has block scope, meaning it can only be accessed within the curly braces {} in which it is declared.

// console.log(pie); //ReferenceError: Cannot access 'pie' before initialization
const pie = 3.14;
console.log(pie); //3.14

pie = 4.14; //TypeError: Assignment to constant variable.
console.log(pie);

Hoisting with Const

Hoisting works with "const" in JavaScript in a similar way to how it works with "let". "const" declarations are hoisted to the top of their block or function scope, just like "let" and "var" declarations. However, unlike "var" and "let", "const" declarations must be initialized at the time they are declared, otherwise a ReferenceError will be thrown.

console.log(x); // ReferenceError: x is not defined
const x = 10;

In the example above, attempting to access the "const" variable before it is declared results in a ReferenceError, unlike "var" variables, which are undefined before they are assigned a value.

It's important to note that "const" variables cannot be used before they are declared and initialized in the code, unlike "var" variables, which can be used because of hoisting. This makes it easier to catch reference errors and helps enforce better variable scoping in your code.

Difference between var and let

The main difference between var and let in JavaScript is their scoping rules.

var is function scoped, which means it is accessible within the function where it is declared and any nested functions.

On the other hand, let is block scoped, which means it is only accessible within the block in which it is declared and any nested blocks.

Additionally, var variables are hoisted to the top of the function, meaning they can be used before they are declared,

whereas let and const (another way of declaring variables in JavaScript) are not hoisted and must be declared before use.