Javascript var, let or const: Which should you use.

If you ever find yourself having a hard time deciding which keyword to use when declaring your variables in javascript, here are 2 major things to consider:

1. Variable scope

One of the most important factors to consider before declaring your variable is scope which is basically the area in you code where you hope to use it.
Currently, Javascript has 3 types of scope:

• Global scope: Declaring a variable here makes it is available through out your code.

//Global scope example

var name = 'Ifechi';
console.log(name); //outputs Ifechi

//name is available here

function getName(){
  //name is available here
  console.log(name)
}

//name is available here

getName() //Outputs 'Ifechi' 

/* This is because name is declared and available 
globally outside any function or block.*/

// Also, you can declare your variables here with var, let or const

• Block scope: A block is basically any code within curly brackets / braces — { }. This scope was introduced with ES6 (2015) and this gave birth to ‘let’ and ‘const’. If you declare any variable with let or const inside the braces, they are only available and accessible within that scope. If you declare a variable with var inside a block/braces it is still available and accessible globally.

//Block scope example

{ 
  let name = 'Ifechi';
  
  //inside the block
  //name is only available here
}

console.log(name) //outputs 'name is not defined'
// outside the block
// name is not available here

{
  var name = 'Ifechi';

  //inside the block
  //name is only available here
}
console.log(name) //outputs Ifechi
//outside the block
//name is available globally

• Function scope: Variables can be declared with var, let or const in a function scope but these variables are only available within that function.

//Function scope example

function getName () {
  var name1 = 'Ifechi';
  let name2 = 'Femi';
  const name3 = 'Hassan';

  console.log(name1) //outputs Ifechi
  console.log(name2) //outputs Femi
  console.log(name3) //outputs Hassan
}

console.log(name1) //name1 is  undefined
console.log(name2) //name2 is  undefined
console.log(name3) //name3 is  undefined

2. Variable mutation (re-assignment and re-declaration).

If you have answered the question of scope, then the next important decision is on variable re-assignment/mutation.

Variable re-assignment simply means assigning a new value to an already existing variable. Only variables declared with var or let supports re-assignments, a variable declared with the const keyword cannot be re-declared, re-assigned or changed.

Variable re-declaration is declaring an already existing variable again. Only variables declared with the var keyword supports re-declaration.
See examples below;

The var keyword permits re-assignments and re-declaration within any scope;

// var example

var name = 'Ifechi';
  name = 'Hassan' //variable (name) re-assignment
console.log(name) //outputs Hassan

var name = 'Femi'; //variable (name) re-declared
console.log(name) //outputs Femi

The let keyword permits re-assignments but only permits one declaration of that variable per scope;

// let example

let name = 'Ifechi';
  name = 'Hassan' //variable (name) re-assignment
console.log(name) //outputs Hassan;

//re-declare the variable (name) within the same scope;
let name = 'Femi'; //Uncaught SyntaxError: Identifier 'name' has already been declared
console.log(name) //outputs Hassan;

//re-declare the variable (name) within another scope;
function getName(){
  //function scope

  let name = 'Ugochi'
  console.log(name) //outputs Ugochi;
}

The const keyword does permit re-assignments and just like the let keyword, it only permits one declaration of that variable per scope;

// const example

const name = 'Ifechi';
console.log(name) //outputs Ifechi;
  
name = 'Hassan' //TypeError: Assignment to constant variable.
console.log(name) //outputs Ifechi;

//re-declare the variable (name) within the same scope;
const name = 'Femi'; //Uncaught SyntaxError: Identifier 'name' has already been declared
console.log(name) //outputs Hassan;

//re-declare the variable (name) within another scope;
function getName(){
  //function scope

  const name = 'Ugochi'
  console.log(name) //outputs Ugochi;
}

In summary,

The var keyword might seem alright to use, but it exposes your code to some malfunction as your variable can easily be modified anywhere within your code without your knowledge. Also a variable declared with the var keyword can also be redeclared with the let or const keyword. It is commonly advised to use the let keyword instead of the var keyword. Only use the var keyword if you know what you are doing and comfortable with the 1001 unpredictable outcomes of your code logic.

The let keyword is a great replacement for var, the major upgrade being that it basically prevents you from redeclaring a variable that has already been declared in a given scope but it also give you the option of modifying/re-assigning values to that variable within the scope it was declared.

The const keyword is best for variables you are sure there wont be any need to modify the values somewhere in the future of your code, as it doesn’t support variable re-assignment or re-declaration in a given scope.

I‘d love to know if this helps or if you have any thoughts or contribution.
Please feel free to leave a comment.