JavaScript has progressed a ton in the recent years. If you’re learning JavaScript in 2017 and you haven’t touched ES6, you’re missing out on an easier way to read and write JavaScript.
Don’t worry if you’re not a master at JavaScript yet. You don’t need to be awesome at JavaScript to take advantage of the added bonuses ES6 gives you. In this article, I want to share with you eight ES6 features I use daily as a developer to help you ease into the new syntax.
First off, ES6 is a huge update to JavaScript. Here’s a big list of features if you’re curious about what’s new, thanks to Luke Hoban:
[…]
In ES5 (the old JavaScript), we’re used to declaring variables with the var keyword. In ES6, this var keyword can be replaced by let and const, two powerful keywords that make developing simpler.
[…]
A block in JavaScript is anything within a pair of curly braces. The following are examples of blocks.
[…]
As you can see, block-scoped variables make development much simpler by removing common gotchas with function-scoped variables. To make life simple, I recommend you use let over var whenever you declare JavaScript variables from now on. (ES6 is the new JavaScript already 😎).
[…]
First off, let’s talk about creating functions. In JavaScript, you’re probably used to creating functions this way:
[…]
JavaScript always sets this to the window object within a simple function call. This explains why the this value within functions like setTimeout is always Window.
[…]
Objects should be a familiar thing to you since you’re writing JavaScript. Just in case you don’t know about them, they look something like this:
[…]
Sometimes you need a dynamic property name when you create objects. In the old JavaScript way, you’d have to create the object, then assign your property to in, like this:
[…]
To create a template literal in ES6, you enclose strings with backticks (`). Within backticks, you gain access to a special placeholder (${}) where you can use JavaScript normally.
[…]
One neat trick is to use these strings to create HTML elements in JavaScript if you need them. (Note: This may no be best way to make HTML elements, but its still way better than creating them one by one!).
See the Pen Using multi-line strings to create more complicated HTML elements by Zell Liew (@zellwk) on CodePen.
[…]
