What you need to know about JavaScript ES6
Tags: javascript, es6, beginners, webdev
Published: 2020-06-27 19:36:27

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](https://dev.to/christinamcmahon/var-let-or-const-in-javascript-es6-2ahp). 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, 
```javascript
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:
```javascript
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:
```javascript
function myFunc(name) {
	return 'Hello' + name
}
console.log(myFunc('World'))
```
With ES6, we can simplify things like so:
```javascript
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:
```javascript
const myFunc = name => `Hello ${name}`
```
In addition, if the function does not receive any argument, we can use empty parentheses:
```javascript
const hello = () => console.log('Hello!')
```

## Default Parameters
With ES6, it’s possible to define default parameter values for functions. 
```javascript
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. 
```javascript
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.
```javascript
[x, y] = [y, x]
```
Another useful functionality is called property shorthand. 
```javascript
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. 
```javascript
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:
```javascript
let params = [3, 4, 5]
console.log(sum(...params))
```
The spread operator can also be used as a rest parameter like so:
```javascript
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:
```javascript
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:
```javascript
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. 
```javascript
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](https://www.freecodecamp.org/news/write-less-do-more-with-javascript-es6-5fd4a8e50ee2/#:~:text=JavaScript%20ES6%20brings%20new%20syntax,destruction%2C%20Modules%E2%80%A6%20and%20more.) by Said of freeCodeCamp
[JavaScript code with ES6](http://dl.booktolearn.com/ebooks2/computer/programming/9781788623872_Learning_JavaScript_Data_Structures_and_Algorithms_e5b9.pdf) by Loiane Groner from the textbook, Learning JavaScript Data Structures and Algorithms