ES6 Syntax Prep for React (Part 1)

I dived straight into React and slowly discovered that if I’d learnt a little some of the new ES6 syntax, that my progress would have been greatly accelerated. I’m writing this blog to cover the ES6 syntax magic I found I had to go read up on, while learning React. I must admit that I’ve learnt to love ES6 syntactical magic and found the language improvement to be a big time saver. I’ve included code snippets on Code Pen so you can play with the code without needing to install Babel or Webpack. This blog posts includes covers the new variable declaration types (let and const), template literals, object and array de-structuring, the spread operator and fat arrow functions.

Variable declaration with const and let

You know can declare constants separately from variables. The const keyword is used to declare constant, the advantage being that if you accidentally try to change a constants value, you’ll receive an “Uncaught TypeError: Assignment to constant variable” error. By convention constants such as an API key are named with uppercase characters (e.g., APIKEY). Block scoped variable declaration is achieved with the let keyword.

Template Literals

I totally love template literals. Its always been tedious to concatenate strings together or embed variables within strings in Javascript. Template libraries such as Handlebars used to be required. With ES6 you just place a string within backticks and can embed a variable using ${variable_name}. It gets even cooler, any javscript within ${} gets evaluated!

De-structuring Arrays and Objects

De-structuring provides an easy way assign multiple values from an array or object to variables in a single line of code. De-structuring also simplifies access syntax as once object properties have been de-structured, you can simply just refer to them by there new name without needing to use object syntax.

The Spread Operator (…)

The Spread Operator aka the magic three dots … My initial response to the spread operator was rather unkind. After I used it for the first time, I actually felt like I could not code without it. There are really so many uses for the spread operator and I’ve tried to illustrate each with examples. Whenever you see the spread operator refer to it as “take everything” — this has helped while reading code. So …array1 means take everything from array1 and […array1, 1, 2, 5] then means take everything in array1 and add 1, 2, and 5 as elements and return a new array.

The spread operator can also be used to pass multiple values to a function, a feature that had sadly been missing from Javascript. You can also use it grab multiple object properties and place them in a variable (i.e. use them with object de-structuring).

Fat Arrow Functions

Fat arrow functions (=>) just provide a quick way to define functions without using the function keyword. Its much easier than ever before to write single line functions.

Coming up in Part 2 and Part 3

I’m sure you’ll find many practical ways to use what I covered in Part 1 within your React adventures. Map, Filter and Reduce will be covered in Part 2 with an emphasis on using these methods to render React components. Part 3 will cover currying which is core to understanding how a Redux store gets connected to a container component.