I start learning JavaScript for last 3 months. As a beginner, I face a lot of questions & problems. One of them is Why should I use let or const instead of var. I watch many tutorials about this. When I watch all those tutorial I decided to use Var as a beginner. Because the first method I learned about the variable declaration is var. And it is easy to use. But later when I start working on project I face many bugs and issues. Now I explain which one we should use.

Naming Variables :

  1. The name must contain only letters, digits, or the symbols $ and _.
  2. The first character must not be a digit.
  3. After the first letter, you can use numbers, as well as letters, underscores, or dollar signs.
  4. Don’t use any of JavaScript’s reserved keywords.
  5. Variable names cannot contain any white-space characters (tabs or spaces)
  6. Variable names are case sensitive

Example:

Noted : here are valid variable names:

var camelCase = “lowercase word, then uppercase”;
var dinner2Go = “pizza”;
var I_AM_HUNGRY = true;
var _Hello_ = “what a nice greeting”
var $_$ = “money eyes”;

Noted : here are invalid variable names:

var total% = 78;
var 2fast2catch = "bold claim";
var function = false;
var class = "easy";

JavaScript is a case-sensitive programming language. So myVar, MyVar, and myvar are all different variables. But generally, it’s a good practice to avoid naming variables so similarly.

Variable Scope

Scope means where these variable are available for use. There are The two types of scope are local and global:

  • Global variables: {

When we declare variable with var outside a function is called global scope. This means any variable that is declared with var outside a function or block is available for use in the whole window.

In the example below, we will create a global variable.

// Initialize a global variable outside a function
var student = "Fayez";

Re-declare or Update var variable

// Re-declare a global variable
var student = "Morshed";
var student = "Sakib";
var student = "Abraul";
console.log(student);// Output
Abraul
// In output display, here show the last re-declare variable

}

  • Local variables: {

When we declare a var variable inside a function is called a local variable. That means this variable can be accessed only inside this function where we declare it. Otherwise, we get find an error.

In the example below, we will create a global variable.

// Initialize a local variable inside a function
function transform() {
var student = "Tamim";
console.log(species);
}
// if we call this function it will be show output, but we never use student variable outside this function.

}

In the example below, I will try to understand different between global variable & local variable.

// Initialize a global variable
var studentName = "M.A Fayez";
function studentOf() {
// Initialize a local, function-scoped variable
var Institute = "Chattogram Polytechnic Institute";
console.log(Institute);
}
// Log the global and local variable
console.log(studentName);
studentOf();
console.log(studentName);

Output

OutputM.A Fayez
Chattogram Polytechnic Institute
M.A Fayezlet

let Variable

let is one of the methods to declare a variable in ES6. I use let when I need to re-assign a variable. Because I use one variable to represent one thing, the use case for let tends to be for loops or mathematical algorithms.

Example

let myage = 39if (new Date().getFullYear == 2018){myage = 40}

As you can see, once I define a variable using let, I can update its value by referencing it again with the new value, without the let keyword in front of it.

Unlike var, you cannot define the same let variable more than once inside a block.

const Variable

Another method to declare a variable in ES6 is const. We can not update or re-assign const variable.This means that a variable declared with const remains the same within its scope.If we declare a variable with const, we can neither do this:

Example with const variable

const mydog = 'spotty' // goodmydog = 'fluffy' // error: assignment to constantconst mybrother // error: Missing initializer in const

Note that it is important to understand that const does NOT mean that the value is fixed and immutable. This is a common misunderstanding among many JavaScript developers, and they incorrectly mentioned that a value defined by the const keyword is immutable (i.e. it cannot be changed).

In the following example we can show that the value of the variable defined within the const keyword is mutable, i.e. it can be changed.

{
const a = [1,2,3];
const b = {name: "hello"};
a.push(4,5); //mutating the value of constant "a"
b.name="World"; //mutating the value of constant "b"

console.log(a); //this will show [1,2,3,4,5]
console.log(b); //this will show {name: "World"}
}
/* This code will run without any errors, and shows that we CAN mutate the values that are defined by "const" */

However note that these variables defined by const cannot be re-assigned.

{
const name = "Mike";
const PI = 3.14;
const a = [1,2,3];
const b = {name: "hello"
};
name="Joe";
//this will throw an error, since we are attempting to re-assign "name" to a different value.
PI = PI + 1;
//this will throw an error, since we are attempting to re-assign PI to a different value.
a = [1,2,3,4,5];
//this will throw an error, since we are attempting to re-assign "a" to a different value.
b = {name: "hello"};
//this will throw an error, since we are attempting to re-assign "b" to a different value.}

Warning

Summery

  1. let, const are both Block scope.
  2. const, cannot be re-assigned, however it is mutable.

Thank you for give me your valuable time & reading my blog.

Frontend Developer