What you need to know about JavaScript ES6

#javascript #es6 #beginners #webdev

JavaScript ES6 has some incredibly useful features that can make your code more modern and readable. In this article, I will go over some of the most essential features of ES6 so you too can write less and do more.

const and let

I won’t go into detail here since I’ve already written another blog post on the uses of var, let, and const here. The gist is that your go-to identifier in Javascript should be const. However, if you know or think you’ll need to reassign it (in a for-loop, switch statement, or in algorithm swapping, for example), use let.

Template Literals

Template literals are very useful because they let you create strings without the need to concatenate the values. For example,

const book = {
    name: 'The Martian'
}
console.log('You are reading ' + book.name + '., \n and this is a new line…'

We can improve the syntax of the previous console.log with the following code:

console.log(`You are reading ${book.name}., 
    and this is a new line…`)

Note that template literals are enclosed in back-ticks. To interpolate a variable value, simply set the variable name inside a dollar sign and curly braces.
As you saw in the example, template literals can also be used for multiline strings. There is no need to use \n anymore. Simply hit Enter on the keyboard to take the string to a new line.

Arrow Functions

Arrow functions are great for simplifying the syntax of functions. For example:

function myFunc(name) {
    return 'Hello' + name
}
console.log(myFunc('World'))

With ES6, we can simplify things like so:

const myFunc = name => {
    return `Hello ${name}`
}

Or if the function has a single statement like our example, you can simplify it even further by omitting the keyword return and the curly brackets like so:

const myFunc = name => `Hello ${name}`

In addition, if the function does not receive any argument, we can use empty parentheses:

const hello = () => console.log('Hello!')

Default Parameters

With ES6, it’s possible to define default parameter values for functions.

function sum(x = 1, y = 2) {
    return x + y
}
console.log(sum(3)) // 5

In the above example, since we did not pass y as a parameter, it will have a value of 2 by default. So, 3 + 2 === 5.

Destructuring

Destruction allows us to initialize multiple variables at once.

let [x, y] = ['a', 'b']

Array destructuring can also be used to swap values at once without the need to create temp variables which is very useful for sorting algorithms.

[x, y] = [y, x]

Another useful functionality is called property shorthand.

let [x, y] = ['a', 'b']
let obj = {x, y}
console.log(obj) // { x: 'a', y: 'b' }

One last functionality we’ll go over is called shorthand method names. This allows us to declare functions inside objects as if they were properties.

const hello = {
    name: 'World', 
    printHello() {
        console.log('Hello')
    }
}
console.log(hello.printoHello())

Spread and Rest Operators

In ES5, we could turn arrays into parameters using the apply() function. ES6 has the spread operator (...) for this purpose. For example, consider a sum function that sums three values:

let params = [3, 4, 5]
console.log(sum(...params))

The spread operator can also be used as a rest parameter like so:

function restParameter(x, y, ...a) {
    return (x + y) * a.length
}
console.log(restParameter(1, 2, 'hello', true, 7)) // 9

Classes

ES6 also introduced a cleaner way of declaring classes. Consider the following:

function Book(title, author) {
    this.title = title
    this.author = author
}
Book.prototype.printTitle = function() {
    console.log(this.title)
}

With ES6, we can simplify the syntax like so:

class Book {
    constructor(title, author) {
        This.title = title
        this.author = author
    }
    printAuthor() {
        console.log(this.author)
    }
}

With ES6, we can use a simplified syntax for inheritance between classes using the keyword extends. As you’ll see in the following example, we can also use the keyword super inside the constructor to refer to the constructor superclass.

class ITBook extends Book {
    constructor(title, author, technology) {
        super(title, author)
        this.technology = technology
    }
}

Conclusion

I hope you found this guide helpful for reviewing some of what I consider to be very useful features of ES6. If you want to read further, here are some resources I’ve found helpful:
ES6 Refresher by Said of freeCodeCamp
JavaScript code with ES6 by Loiane Groner from the textbook, Learning JavaScript Data Structures and Algorithms