JavaScript Variables and Constants

JavaScript Data Containers

When writing code, we need to keep track of various data we are working with – e.g.: which button was clicked, or how many items are on a page.

JavaScript provides a couple of different ways to store and manipulate data - variables and constants are containers that can be referenced by an arbitrary name and can be accessed and modified throughout the program.

Constants

Constants are containers that store immutable data (cannot be changed) - use the keyword const. The code below declares a theAnswer constant:

const theAnswer = 42

Updating a constants will trigger an error:

const theAnswer = 42
theAnswer = 12 // Uncaught TypeError: invalid assignment to const 'theAnswer'

Variables

Variables are containers that store data that can be changed during the execution of a program ( mutable ) - use the keyword let:

let colour = 'blue'
console.log(colour) // prints: blue
colour = 'red'
console.log(colour) // prints: red

"Legacy" Variables

The var keyword can also be used to declare a variable in JavaScript - in fact, it was the "original" and only way to do it for a while:

var colour = 'blue'

The use of var is being discourage because of unpredictable side effect - read on:

let vs var

Both var and let keywords can be used to declare variables with the main difference between them is the scope of the variable : var is function scoped , whereas let is block scoped.

If you declare a variable using var inside a function, it will be accessible anywhere within that function, but if you declare a variable using let inside a block, it will only be accessible within that block.

let scoping

Here is an example to illustrate the difference:

function sayHello() {
  if(true) {
    let name = "John"
  }
  console.log(`Hello ${name}`)
}

sayHello() // prints: Hello

The output below will be "Hello" as the name variable won't exist outside the if block.

Here is a another one:

function sayHello() {
  let name = "John"
  console.log(`Hello ${name}`)
  if(true) {
    let name = "Paul"
    console.log(`Hi ${name}`)
  }
  console.log(`Hello again ${name}`)
}

sayHello()

We declare a variable name inside the function and assign it the value John. Then, we declare another variable, with the same name , name, inside the if block and assign it the value Paul. The output will be:

"Hello John"
"Hi Paul"
"Hello again John"

Notice that the 3rd message includes the value of the first name variable.

var scoping

Here is the same code snippet but using vars:

function sayHello() {
  var name = "John"
  console.log(`Hello ${name}`)
  if(true) {
    var name = "Paul"
    console.log(`Hi ${name}`)
  }
  console.log(`Hello again ${name}`)
}

sayHello()

The output will be slightly different - notice that the 3rd message includes Paul rather than John:

"Hello John"
"Hi Paul"
"Hello again Paul"

In fact, the snippet above creates only one variable name. The second declaration gets ignores and the content of name will be changed to Paul.

NB: This behaviour can be prevented if strict mode is used - read more about the strict mode here.