Best of Modern JavaScript — let 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 appeared first on The Web Dev.