A New Javascript Syntax: ES6

Episode #8 of the course Fundamentals of JavaScript by Matt Fay

 

We’ve been through a lot so far: We’ve learned how to declare variables, access array and object properties, use arithmetic operators, etc. Today, I’ll introduce you to ES6, a new JavaScript syntax.

 

Let

It’s a bit difficult to describe the usefulness of the let keyword without talking about scope. There are whole books written on scope, and we’ll get into it a bit, but we won’t get too far ahead of ourselves!

Let is simply a different way to declare a variable. That’s it. Simple, right? All we do is replace var with let when declaring a variable.

var hello = “Hello!”;
let hello = “Hello!”;

The above declarations are the same. The only difference is that thing we were talking about above: scope. Below is a practical example for you to get an idea of what scope is all about.

Consider a for loop, as was discussed in Lesson 5:

for (var i = 0; i < 10; i++) {
    console.log(i);
}

This would print i to the console multiple times (0-9). If we wanted to access that variable i elsewhere, we’d be able to do so.

for (var i = 0; i < 10; i++) {
    console.log(i);
}
console.log(i); // 10

Below the for loop, we’re calling our variable, i, which was declared within the for loop’s body.

With the let keyword, we’re unable to do this.

for (let i = 0; i < 10; i++) {
    console.log(i);
}
console.log(i); // ReferenceError: i is not defined

Our var variable can be accessed anywhere, but as you’ve seen, let will not allow it. It is bound to the for loop’s scope and can only be accessed within that for loop. That’s the gist of it!

 

Const

Similar to let, const is another way to declare a variable, only with added benefits within our programs. With var and let, you can change the values of the variables, as we’ve seen with the above for loops. Let’s try that with const and see what happens.

for (const i = 0; i < 10; i++) {
    console.log(i); // 0, 0, 0, 0, 0, ad infinitum
}

If you’ve typed that out (which I don’t really recommend), you’d notice that 0 was printed forever. Why? Because with the const keyword, we’re unable to change the values of our variables. So, when we declared “const = 0,” it’s stuck there and will forever remain 0. We move onto the next statement, “i < 10,” which is forever going to remain 0 because const cannot change. Thus, 0 will print forever.

Another example:

const greet = “Hello”;
const greet = “Hi”; // TypeError: Identifier ‘greet’ has already been declared

Just keep in mind when using const that you’ll be unable to change the value. It’s been recommended to always use const and later go back and change your variables if the need arises to let.

 

Arrow Functions

Arrow functions are a new way to write functions in JavaScript. They’re elegant and simple. In our last lesson, we learned how to declare functions, but there is yet another way, which was saved for this lesson!

Consider our square function:

function f(x) {
    return x * x;
}
f(5); // 25

This can be rewritten with an arrow function like so:

const f = x => x * x;

We declared f with const, set it equal to x—which would be our argument, like the above function with x wrapped in braces—and then we used an arrow, “=>,” and declared what we’d like to do, which is multiply x by itself.

It’s worth mentioning that if we were to use more than one argument, we’d need to wrap them within braces as well.

If we had an addition function with two arguments, it might look like this:

const add = (a, b) => a + b;

Keep that in mind!

In the next lesson, we’ll explore the world of modern JavaScript.

 

Recommended book

You Don’t Know JavaScript: Scope and Closure by Kyle Simpson

 

Share with friends