My Javascript Journey

Advanced Javascript #Es6 and Javascript

Part 16

Its important to know that improvements to the Javascript language — and other languages — are constantly being made all the time; even web browsers get constantly updated.

Also, libraries are constantly being created (Libraries are pieces of code that are written by somebody else that we can use so we don’t have to start from scratch). Its human nature to want to always improve and so we are going to look at the new features that have been recently introduced to the language.

As we know by now, Javascript was created by the Netscape browser and was later picked up by all the other browsers. So to standardise the language, Netscape submitted Javascript to the ECMA International so that everybody could use the same version of the language on all browsers.

So that’s what ECMA Script is — Javascript. It’s the standard way of calling javascript and it ensures everybody is on the same page.
Therefore every time you see something like ES6, it stands for the ECMAscript version 6. And yes — there was Ecmascript version 1 all the way to 6. We are currently at Version 7. We are only learning version 5 and version 6 for now because 7 is still relatively new.

Version 5 and version 6 introduce some new features that are really powerful and make coding in javascript easier. And by the way, you can always use babel to run Javascript that browsers haven’t implemented yet.

Let & Const

var
let (new in ECMAScript 6)
const (new in ECMAScript 6)

These are new ways of declaring variables. Its safe to say that Var that we’ve been using up to this point is no longer needed; instead lets use let or const going forward.

You can see that when I run this piece of code into the console and check for wizardLevel, I get false!

This is unexpected behaviour since in part 14 where we talked about scope, and used var, we would have gotten true.

My Javascript Journey

If we had used var, we would have true

This unexpected behaviour is because this time we are not inside of a function.
With var, we were able to create a scope inside of a function, but never if it had a curly brackets. Inside of if, however, with let, wrapped around curly brackets {}, it creates a new scope! So I am able to create a wizardLevel variable and the only way that I can access this is inside of if .

I get inside = true & outside= false because wizardLevel has already been changed.

Versus var:

No new scope is created inside the curly brackets because this isn’t a function.

Const

If I want to change the experience level for example:

I can change experience from 100 to 80

But if I want to change the player Bobby to a new name Tom, I get an error.

Changing the player name from Booby to Tom gives me an error: assignment to constant variable

What that means is, as a constant, you’re not able to reassign to the variable; it cannot be updated.

Why would that be useful?

It’s useful because a lot of bugs happen when you’re working in a team of people where somebody might assign for example player a different name like Tom but but you are unaware and so you keep using Bobby.

Using const ensures that the player variable will always have the same value.
So use const if you’re using a variable that doesn’t change; and if you have a variable you will re-assign a value to something to like Wizard level where it changes from true to false, false to true, then use let.

One thing with const that you have to keep in mind is that if you do:

If I try to reassign this object to 4, I get an error because its a constant

However, If I change a property:

I can change an object property even though I am using const

So one thing with const is, you can change the properties of the objects; you just can’t reassign the variable.

Destructuring

Previously, this is how we grabbed our objects:

With destructuring:

This does the exact same thing as the last one. Now you have const player, experience, and wizardLevel available to you so you can use player anywhere you want in your codebase.

Declaring object properties:

In Es6, we can have we can have dynamic property values:

Also, if we wanted to add these to an object:

If property and value are the same, we can remove the property:value declaration

Template strings

Previously, this is what we did:

Now with the new syntax:

We can use backticks

And if we turn this into a function:

We just have a function that returns a greeting and its dynamic. And as you can see I have passed default arguments so the function wont fail even if the user didn’t provide arguments.

And our last Javascript Type:

Symbol

What’s unique about symbols is that if I do sym2 ===sym3, I get false even though they look like they’re the exact same thing. So symbols are used because they create a completely unique type; you can make sure there’s never going to be any conflict.
The symbol value is used as an identifier mostly for object properties.

Arrow functions

Until now this is how our functions looked like:

With arrow functions now

Any time you see this syntax; it’s the same thing as saying function but now this is just the shorthand form; you don’t have to constantly write function.

See you in part 17