There’s still a lot about ES5 I’m more comfortable with, but with the growth of things like React, ES6 is an inevitable adoption for the future. Heck, ES7/8 are out. But ES6 seemed to have the most significant changes in my world. I am a big proponent of, do what works. But when you have time, you should always be learning the latest best practices. So, if you’re new to ES6 here are a few key things I’ve picked up as I learned it myself.
Here a few common ES6 features that are used frequently in React:
Let vs Const
// Let and Const are the new var var userName = "Chris"; // Will the information change inside the variable? Use Let let userName = "Chris"; // the user's name could change // Will the information stay the same or constant? Use Const const pi = 3.14; // pi will always stay the same
Arrow Functions
There a several ways to write an arrow function. Here’s the basic breakdown:
// A typical function looks like this
var printMyName = function() {
console.log(name);
}
printMyName('Chris');
// Standard Arrow Function (keeps the parameter, removes 'function' and replaces with arrow)
const printMyName = (name) => {
console.log(name);
}
// Arrow function with only one argument (notice that the parenthesis are gone)
const printMyName = name => {
console.log(name)
}
// Arrow function where function body has only one line of code
const multiply = (number) => number * 2 // removing curly braces and putting it on one line
console.log(multiply(3));
Exports & Imports (Modules)
As organizing JS continues to evolve, it’s become increasingly easier to keep your code segmented and clean. Which means that importing your code is a much more efficient way of handling your code.
// Here you have two files with two purposes
// person.js
const person = {
name: 'Chris';
}
export default person;
// utility.js
export const clean = 90 => {...}
export const baseData = 10;
// You have one file that imports them all
// app.js
import person from './person.js' // when you just have one default item to import
import prs from './person.js'
import {baseData} from './utility.js' // when you have more than one items to import
import {clean} from '.utility.js'
Classes
Classes are a bit of a more convenient way to create a constructor function. Classes are made up of Property’s and Methods. You must define the property/method, initiate an instance of that class and if you want to extend another class, you can then inherit it. Similar to how SASS can extend a class so you can import and use its properties.
class human {
gender = 'male'; // property
printGender = () => {
console.log(this.gender); // method
}
}
class Person extends human { // 3. extends lets you inherit
name = 'Chris';
gender = 'male';
printMyName() {
console.log(this.name);
}
}
const person = new Person(); // 2. Initiate an instance
person.printMyName();
person.printGender();
Spread & Rest Operator
Spread and rest operators look like this ‘…’. They are designed allow you to import arguments from another array and add to them. Spread is the most common and looks like so:
// Spread operator ...
const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4];
console.log(newNumbers);
const person = {
name: 'Chris'
};
const newPerson = {
...person,
age: 33
}
console.log(newPerson);
// Rest operator lets you import items from another method
const filter = (...args) => {
return args.filter(el => el === 1);
}
console.log(filter(1,2,3));
Destructuring
Easily extracts array elements or object properties and store them in variables.
const numbers = [1, 2, 3]; [num1, num2] = numbers; console.log(num1); outputs = 1
Recent Comments