Breaking Down ES6: let and const
Tags: javascript, beginners, codenewbie, webdev
Published: 2019-06-17 14:55:06

---
title: Breaking Down ES6: let and const
published: true
description: An explanation of block scope and variable declaration keywords let and const.
tags: javascript, beginners, codenewbie, webdev
series: Breaking Down ES6
---

Four years ago today, [ECMA International](https://www.ecma-international.org/) released the 6th major version of ECMAScript. This version was officially named ECMAScript 2015, but is commonly referred to as **ES6**. *Ding. Ding. Ding.* I hope that rang a bell for you and turned on that light of curiosity.

While looking for a job, I have noticed that **most** of the time, when a company lists JavaScript as a job requirement, they write it as “JavaScript (ES6)”. From my experience, I have learned that the knowledge of ES6 principles/standards are widely sought after as a job requirement by many companies. Due to this, I am writing this blog series about ES6 in order to 

1. Sharpen my own skills and knowledge of ES6 rules.
2. Help teach and/or strengthen your skills on the topic. 

## Getting Started

This blog post will be the first in this series, so I thought I would start by breaking down ES6’s introduction of `let` and `const`. Before we dive deep into each of these keywords, I want to mention ES6’s introduction of block scope. 

### Block Scope 

Before the introduction of ES6, we used `var` to declare all of our variables in JavaScript. Variables declared using `var` could fall under global scope or local scope. 

**Global Scope** - A variable declared outside a function is considered to be a *global* variable having *global scope*, meaning that “all scripts and functions on a web page can access it.”

**Local Scope** - A variable declared within a function is considered to be a *local* variable having *local scope*, meaning that it “can only be accessed from within the function” it is declared in. 

With those explanations out of the way, let’s discuss **block scope**. A variable declared using `let` and `const` are considered to be within block scope. This means that the variable can only be accessed within the block it had been declared. What is a block, you may ask? Well, a block is normally found when you see curly brackets `{}`. A block could be within conditional statements, for and while loops, etc. 

To keep it simple, as an example, if a variable is declared using `let` or `const` within an **if statement**, the variable can only be accessed within that if statement's block scope. 

*Note: If you would like a more in-depth look at these three scopes, I have also written this article:* 

{% link https://dev.to/torianne02/scope-in-javascript-4ang %} 

Now that we have block scope defined, let’s move on to our two keywords, `let` and `const`. 

## `let`

As I have already stated, `let` is considered to be a block scope variable. Similar to `var`, `let` allows the variable to be reassigned within its scope. 

```javascript
function testLet() {
  let cat = “Mr. Whiskers”; 
  console.log(cat) // “Mr. Whiskers”;

  cat = “Tuna”;
  console.log(cat) // “Tuna”;
}
```

While the variables defined with `let` act similar to `var` with reassignment, it does not act similar to `var` when it comes to re-declaration. `var` variables can be re-declared within the same scope, while `let` variables do not allow this. 

```javascript
function testLet() {
  let cat = “Mr. Whiskers”; 
  console.log(cat) // “Mr. Whiskers”;

  let cat = “Tuna”; // SyntaxError: Identifier ‘cats’ has already been declared
}
```

`let` variables can, however, be declared with the same name inside a child block element within the overall parent block scope. Why is this? Well technically, this would be considered another block scope and a variable that is declared within this scope cannot be accessed outside of it. 

```javascript
function testLet() {
  let cat = “Mr. Whiskers”;

  if (cat) {
    let cat = “Tuna”;
    console.log(cat) // “Tuna”
  }

  console.log(cat) // “Mr. Whiskers”
}
```

*Note: It is not common practice to use the same variable names for multiple variables within the same project.*

With all of that being said, we can still re-assign variables new values within their children block elements. Why is this? This is because we are still technically within the variable’s block scope, and it can be accessed anywhere inside its scope. 

```javascript
function testLet() {
  let cat = “Mr. Whiskers”;
  
  if (cat) {
    cat = “Tuna”;
    console.log(cat) // “Tuna”
  }
  
  console.log(cat) // “Tuna”
}
```

Variables declared using `let` can be declared without assignment, similar to that of `var`. This means that the variable has been declared but not yet defined, which will output a value of `undefined`.
 
```javascript
function testLet() {
  let cat;
  console.log(cat) // undefined

  cat = “Mr. Whiskers”;
  console.log(cat) // “Mr. Whiskers”
}
```

Last but not least, let’s talk about variable *hoisting*. When using `var`, variables are hoisted with their definitions, which means they float to the top of the scope and are available at any point in that scope. Variables declared with `let` are not hoisted in the same way. The declaration exists but the value/definition does not, so if you attempt to call the variable before it has been declared, you will receive a `ReferenceError`. 

```javascript
function testLet() {
  console.log(cat) // ReferenceError: cat is not defined
  let cat = “Mr. Whiskers”;
}
```

## `const`

Again, variables declared using `const` are considered to be a block scope variable. Unlike `let` and `var`, `const` does not allow reassignment. Using `const` “is a signal that the identifier won’t be reassigned.” 

```javascript
function testConst() {
  const cat = “Mr. Whiskers”;
  console.log(cat) // “Mr. Whiskers”

  cat = “Tuna”; // TypeError: Assignment to constant variable 
}
```

`const` also doesn’t allow you to declare a variable without initializing it, which differs from both, `let` and `var`. 

```javascript
function testConst() {
  const cat; // SyntaxError: Missing initializer in const declaration
}
```

Similar to `let`, `const` cannot be re-declared within the same block scope. 

```javascript
function testConst() {
  const cat = “Mr. Whiskers”;

  const cat = “Tuna”; // SyntaxError: Identifier ‘cat’ has already been declared
}
```
Also similar to `let`, `const` can also declare a new variable with the same name within a child block element, because the variables declared within that block scope are not available outside of it. 

```javascript
function testConst() {
  const cat = “Mr. Whiskers”;
  console.log(cat) // “Mr. Whiskers”

  if (cat) {
    const cat = “Tuna”;
    console.log(cat) // “Tuna”
  }

  console.log(cat) // “Mr. Whiskers”
}
```

Now, although a variable declared using `const` cannot be reassigned a value, if the value of the variable is set to an object or an array, the values within the object or array can be updated. In simple terms, as an example, the value of a key within an object can be changed or an array can be added to. 

```javascript
function testConst() {
  const cats = [“Snowball”];
  console.log(cats) // [“Snowball”]

  cats.push(“Mr. Whiskers”, “Tuna”)
  console.log(cats) // [“Snowball”, “Mr. Whiskers”, “Tuna”]
}
```

#### Final Thoughts

When it comes to declaring variables, I have taken the stance that I will no longer be using `var`, as it can become kind of messy due to the fact that you can declare the same variable 1000x within the same scope. This can cause issues and easily break code. It can also look very messy to another dev who wants to contribute to your code. 

If you have no desire to ever change the value of a variable, use `const`. For counters or in for loops, `let` would be perfect to use. In the end, this is all based on personal preference. Just keep in mind that if your code is public, make it clean and easy to follow for everyone, not just you. 

I hope this has been helpful, I know it has been for me thus far. If there is anything that you see that needs rewording or added in, please feel free to let me know, as I am still learning!!! 

#### Sources
[var vs let vs const in JavaScript](https://tylermcginnis.com/var-let-const/)
[JavaScript ES6+: var, let, or const?](https://medium.com/javascript-scene/javascript-es6-var-let-or-const-ba58b8dcde75)
[ES6: Let and Const](https://medium.com/javascript-in-plain-english/es6-variable-definition-feature-using-let-and-const-14eb143f799e)
[let](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let)
[const](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const)
[ES6 - Variables](https://www.tutorialspoint.com/es6/es6_variables.htm)
[JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)