ES6 Mini Crash Course: How to Write Modern JavaScript
Tags: javascript, webdev, node
Published: 2019-09-04 15:18:10

*This was originally posted as a Twitter thread: [https://twitter.com/chrisachard/status/1169223691122749440](https://twitter.com/chrisachard/status/1169223691122749440)*


Want to write javascript like a sane person?

🔥 Here's a mini crash course just for you 🔥

ES6+ JavaScript can actually be FUN to write!

(codesandbox links at the end)

# 1.

var is dead.  Don't use var. 😐

(why? lexical scoping)

If the variable will CHANGE, use `let`

If the variable WON'T change, use `const`

![var let const](https://thepracticaldev.s3.amazonaws.com/i/7v5h9mmoo7ziimtyip6u.png)


# 2. 

Arrow functions automatically bind `this`

So it will be what you think it should be 95% of the time

![Arrow Functions](https://thepracticaldev.s3.amazonaws.com/i/ec9exwlnw21ynkusaoks.png)

# 3.

If you leave the {} off of arrow functions, it returns automatically

You can leave the the () off around the params if there's only one

The different syntax can be a bit confusing - but you get used to it pretty fast

![Arrow function types](https://thepracticaldev.s3.amazonaws.com/i/20mbj1exwc72q9jjbj8w.png)

# 4.

You can define default values for function arguments now.

Super handy! 🎉

![Default function arguments](https://thepracticaldev.s3.amazonaws.com/i/a9qntzrgeyye4a15m603.png)

# 5.

With destructuring assignment, you can pull out specific values from objects or arrays

Commonly used in function signatures too - now you can have named parameters! 🎉🎉

![destructuring assignment](https://thepracticaldev.s3.amazonaws.com/i/cpj9ngarhaufwl9yry10.png)


# 6.

There's a new syntax for exporting and importing modules

You can export a single default value, and as many named values as you want from a module

(notice the use of destructuring assignment to import named values!)

![import export](https://thepracticaldev.s3.amazonaws.com/i/ikha9jz3xe7mj8tlnrq5.png)

# 7.

Get the "rest" of the values in an object or array with three dots `...`

(AKA, the `rest` operator)


![Rest operator](https://thepracticaldev.s3.amazonaws.com/i/buww9kq6nxbr4zrknta0.png)

# 8.

Three dots can also be used to E-X-P-A-N-D an object or array into a new one

This is called the `spread` operator

(Yes - three dots is both `rest` and `spread`.  They are different, though conceptually similar)

![Spread operator](https://thepracticaldev.s3.amazonaws.com/i/3ndz4t71pjg9z116858t.png)

# 9.

Backticks can be used to wrap strings now, and are called "template literals"

Inside of backticks, you can use `${}` to do string interpolation!

This is much easier than saying: `"Hello " + name + "!"`

![Template Literals](https://thepracticaldev.s3.amazonaws.com/i/vhtoh38v0kgck0iyg22n.png)

# 10.

Most browsers now support these features natively! 🎉

(except for IE 😐)

Most of it works in node except for ES6 modules, but there's a way to fix that 👇

![ESM Fix in Node](https://thepracticaldev.s3.amazonaws.com/i/x23xl0kii358pc37idf6.png)

# 11.

Ok, but WHY is ES6+ JS better?

- let/const scoped correctly
- () => {} binds `this` correctly
- destructuring assignment, ...rest and spread saves a bunch of typing

In short: it removes the hacks, does what you think it should, and less typing means fewer bugs.

Woo! 🎉

# 12.

Here's codesandbox links so you can explore:

var/let/const
https://codesandbox.io/s/es6-var-let-const-xz50k?fontsize=14

arrow functions
https://codesandbox.io/s/es6-arrow-function-gye29?fontsize=14

destructuring assignment
https://codesandbox.io/s/es6-destructuring-assignment-3cv3b?fontsize=14

import/export
https://codesandbox.io/s/es6-import-export-2q3px?fontsize=14

rest/spread & template literals
https://codesandbox.io/s/es6-rest-spread-template-literals-puli0?fontsize=14



&nbsp; 

This mini-crash-course was fun to write!  I hope you enjoyed reading it 😁

If you liked it, you can find more by:

- Following me on twitter: [@chrisachard](https://twitter.com/chrisachard)
- Joining the newsletter: [chrisachard.com](https://chrisachard.com/)

Thanks for reading!