Var, Let, and Const – The Three Variable Horsemen

Published October 15, 2018 in JavaScript , variables - 1 Comment

Variables are a vital piece of our JavaScript code.  They are so important in fact that JavaScript has given us THREE different ways to declare variables. Those three main ways are var, let, and const.  The oldest of which var has been around since the beginning.  It’s our other 2 declarations let and const that have arrived with es6.  Giving us new syntax to declare our variables also gave us more scenarios to take into account with using them. We’re going to dive into some of those differences in this post.

Declarations

When we declare a variable with var, let, or const we are signaling different things about those variables to people who are working with you.  Using var you are able to declare a variable, but you are also saying that this same variable name can be re-declared and used later on in the code base if needed.

var animal = "tiger"; 
console.log(animal); //tiger 
var animal = "lion"; 
console.log(animal); //lion

Using let or const will not allow the above behavior, in fact your choice of which one to use between the two is also telling.  With let even though the same variable name cannot be re-declared it does allow you to reassign that variable value to another target value.

//Re-Declaring variables of the same name with let or const behaves the same
let animal = "tiger";

console.log(animal); //tiger

let animal = "lion";

console.log(animal); //syntax error

With const you are prevented from both re-declaring and reassigning a variable value.

//const also prevents reassigning variables

const bird = "jayhawk";

console.log(bird); //jayhawk

bird = "eagle";

console.log(bird); //TypeError

 

Although you may think that const means the value of your variable can never change, this does not apply the same way to arrays and objects.  It is true that const will not let you reassign the value of the array or object, but it does not prevent you from modifying the assigned array or the object properties.  So const will not make your array or objects immutable, it will just make sure you are still modifying the original reference.

//const will not stop modification of arrays or objects
const numbers = [1, 2, 3];

numbers.push(4, 5);

console.log(numbers); //[1,2,3,4,5]

const person = {
  name: "Devonta",
  profession: "developer"
};

person.hobby = "gaming";

console.log(person.hobby); //gaming

 

Scoping

One of the biggest differences in the way var, let, and const create variables is the way they are scoped.  Variables declared with var are function-scoped and will attach to the current execution context, while both let and const are block scoped and will only live within the block they were created.  Blocks can be created anywhere in JS with the use of {} wrapped around some bit of code.  Using this with let and const can create ways to separate variables from each other to prevent name collisions.

var playstation = "ps4";
let xbox = "xbox";
const nintendo = "switch";

function showConsole() {
  console.log(playstation);
  console.log(xbox);
  console.log(nintendo);
}

showConsole(); //ps4,xbox, switch

If we wrap all our variables in a code block {} we hide the const and let variables from our showConsole function while our var declaration is still accessible.

{
  var playstation = "ps4";
  let xbox = "xbox";
  const nintendo = "switch";
}

function showConsole() {
  console.log(playstation);
  console.log(xbox);
  console.log(nintendo);
}

showConsole(); //ps4,ReferenceError

 

Summary

This about wraps up our key points on var, let, and const.  They each have their own use-cases and using the right declaration can intuitively convey information.  Remembering that var is function scoped and const and let are block scoped are our key takeaways from this post.  I hope you take this information and use the best declaration for your situation.

 

1 comment