Best of Modern JavaScript — let and const
Tags: javascript
Published: 2020-07-26 01:20:15

---
title: Best of Modern JavaScript — let and const
published: true
date: 2020-07-25 00:31:53 UTC
tags: javascript
canonical_url: https://thewebdev.info/2020/07/25/best-of-modern-javascript%e2%80%8a-%e2%80%8alet-and-const/?utm_source=rss&utm_medium=rss&utm_campaign=best-of-modern-javascript%25e2%2580%258a-%25e2%2580%258alet-and-const
---

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

**Follow me on Twitter at https://twitter.com/AuMayeung**

**Many more articles at https://medium.com/@hohanga**

**Even more articles at http://thewebdev.info/**

Since 2015, JavaScript has improved immensely.

It’s much more pleasant to use it now than ever.

In this article, we’ll look at JavaScript variables.

### `const` Creates Immutable Variables

We can create immutable variables with `const` .

For example, if we have:

```
`const` `foo` `=` `'abc';`
`foo` `=` `'baz';`

```

then we have a TypeError.

### `const` does not Make the Value Immutable

Even though the variable can’t be reassigned, its value can still change.

For instance, if we have an object:

```
`const` `obj` `=` `{};`

```

We can add properties to it:

```
`const` `obj` `=` `{};`
`obj.prop` `=` 'foo'`;`
`console.log(obj.prop);`

```

`obj.prop` would be `'foo'` .

If we want to make objects immutable, we can call the `Object.freeze` method:

```
const obj = Object.freeze({});

```

`Object.freeze` only prevents the top level from changing.

Objects stored in its properties are still mutable.

If we have:

```
`const` `obj` `=` `Object.freeze({` `foo:` `{}` `});`

```

Then we can write:

```
obj.foo.qux = 'baz';

```

and it would work.

### `const` in Loop Bodies

We can use `const` in loop bodies.

For instance, we can write:

```
function logArgs(...args) {
  for (const [index, elem] of args.entries()) {
    console.log(index, elem);
  }
}

```

We call the `entries` method which returns entries with the `index` with the index of the entry and `elem` with the entry itself.

`const` prevents assignment of the array.

### Lifecycle of `var`-Declared Variables

`var` variables don’t have temporal dead zones.

This means they’re available everywhere within their scope.

The declaration of it is hoisted, but the value isn’t.

### Lifecycle of `let`-Declared Variables

`let` variables are only available after they’re declared.

This means within the block, the temporal dead zone is between the start of the block and when they’re declared.

This is the same with `const` .

If we try to access these variables before they’re declared, we’ll get a `ReferenceError` .

If there’s isn’t a value assigned to a `let` variable, it’ll be `undefined` .

For example, if we have:

```
let foo = true;
if (true) {
  console.log(foo);

  let foo;
  console.log(foo);

  foo = 123;
  console.log(foo);
}
console.log(foo)

```

Then the `console.log(foo);` will get us a `ReferenceError` .

And:

```
let foo;
console.log(foo);

```

will log `undefined` .

and:

```
foo = 123;
console.log(foo);

```

logs 123.

And `foo` is `true` .

### `typeof` Throws a `ReferenceError` for a Variable in the Temporal Deal Zone

We can’t use `typeof` with `let` and `const` variables that haven’t been declared yet.

For example, we can write:

```
if (true) {
  console.log(typeof foo);
  let foo;
}

```

Then we’ll get a `ReferenceError` if we run the code.

If we want to stop that, we should move the `typeof` below the `let` declaration.

Having a temporal dead zone lets us catch programming errors.

JavaScript may also have guards in the future to do data type and content checks.

So we should make sure that data is available before doing the checks.

If they’re only available after they’re declared, then the checks can easily be done.

### `let` and `const` in Loop Heads

We can use `let` and `const` in loop heads with the for, for-in, and for-of loops.

### Conclusion

`let` and `const` provides many benefits that aren’t provided by `var` .

The post [Best of Modern JavaScript — let and const](https://thewebdev.info/2020/07/25/best-of-modern-javascript%e2%80%8a-%e2%80%8alet-and-const/) appeared first on [The Web Dev](https://thewebdev.info).