Full Circle Magazine FR

Ceci est une ancienne révision du document !

I’ve recently begun using GatsbyJS (a static site/progressive web app generator) for a few of my side projects. Prior to this, I hadn’t used JavaScript outside of some basic web functionality and a demo of NodeJS. Even then, I typically stuck with the vanilla syntax. The more I write React code, the more I stumble upon examples and documentation using arrow functions, let and const, and other features available through ES6. Since I’ve had to buckle down and try to learn as much as possible about ES6, I wanted to share it with anyone else who (like me) may not have needed to learn it just yet.

What is ECMAScript?

It’s essentially a series of enhancements to traditional (“vanilla”) JavaScript. It’s intended to update faster and offer more quality-of-life features than normal JS.

New Features

ES6 brought with it a large number of changes.

Let/Const

In normal JS you would typically declare a var and leave it at that. ES6 offers some new options - let and const.

‘let’ defines a locally scoped variable that you can re-assign, but not redeclare. So if you want to make a counter that is run through a loop, ‘let’ would be what you want.

‘const’ defines a locally scoped variable that cannot be changed once declared (it’s a constant variable, in other words). So if you want to scale various values by the same amount without the chance of it changing, use a const for the scaling value.

Spread

Have you ever had an array that you want to dump to the console, or otherwise just turn into separate elements? Spread does exactly that. It even lets you combine two arrays with minimal fuss.

The above will output an array with all the elements combined together. If you were to run console.log(…fruits), it would also just spit out the 3 separate string objects without formatting it as an array.

Template Literals

Previously, if you wanted to join strings together, you had to use a + operator. Now, ES6 will let you call them within a string using backticks and ${} variables.

let welcome = `Hello ${username}, last logged in: ${lastLogin}`

Arrow Functions

ES6 also introduced arrow functions - these are essentially the same as regular functions, except the syntax is different. The upside to the syntax changes are that the whole declaration is shorter and easier to read.

Vanilla JS:

function (num1, num2) {

  return num1 + num2

}

ES6:

(num1, num2) ⇒ return num1 + num2

If you have more than one line in the body of the function, you will need to wrap the body in curly braces. See the next section for an example.

Default Function Parameters

As surprising as it may seem, vanilla JS doesn’t let you define default values to your function parameters (see above).

Extract Data from Arrays and Objects

ES6 also simplified pulling data from objects and arrays (shown below).

Conclusion/Homework

There are a lot of other things ES6 allows you to do - such as defining objects faster, classes, and many others. So far, the items listed above are the ones I have most commonly used and seen in documentation. As a bit of homework - see if you can figure out the new shortened syntax for object literals in ES6.

Do you think I missed an important feature? Then please let me know via email at lswest34+fcm@gmail.com. Similarly, anyone who has requests for articles or corrections to past ones should let me know at the address listed above.