JavaScript Variables and Constants
Tags: javascript
Published: 2023-03-03 20:56:43

---
title: JavaScript Variables and Constants
published: true
date: 2023-01-09 19:00:00 UTC
tags: JavaScript
canonical_url: https://www.90-10.dev/js-data-containers-var-let-const/
---

## 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:

```js
const theAnswer = 42
```

Updating a constants will trigger an error:

```js
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`:

```js
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:

```js
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:

```js
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:

```js
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 `var`s:

```js
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](https://dev.to/90_10_dev/javascript-strict-mode-4f57).