In order to make your JavaScript code as efficient and robust as possible, particularly when using React, you need to have a good understanding of ES6, the next-generation JavaScript. Let’s go over some key ES6 features that you’ll see frequently in React.
Let & Const
In traditional JavaScript, we use var to declare variables. However, ES6 introduced let and const as new ways to declare variables.
Let
Consider let as the new var. You can use let when you plan on changing the variable’s value over time.
Const
On the other hand, use const when you’re creating a variable with a constant value – it will never receive a new value.
Arrow Functions
ES6 provides a new syntax for creating functions – arrow functions. Traditional function syntax looks like this:
javascriptCopy codefunction myFunction(arguments) {
// Your code here
}
With ES6 arrow functions, you can simplify this to:
javascriptCopy codeconst myFunction = (arguments) => {
// Your code here
}
Note that we’re storing the function in a constant variable.
Exports & Imports (Modules)
JavaScript code often spans multiple files, which need to be imported and exported to assemble the code for the application. In ES6, we use the export default keyword when exporting to designate the default export from that file. Then, when we want to import it, we can use the import whatever from './file.js', where ‘whatever’ is the name we assign to the imported data.
However, if a file contains more than one export, we must employ a different syntax: import {whatever} from './file.js'. Here ‘whatever’ refers to the specific piece of data being exported. This is known as Named Exports.
With named exports, you can use the as keyword to create an import alias. The * keyword in conjunction with an import alias can create an object with data exported from other files as properties.
Classes
A class, which is a blueprint for an object, can have properties and methods attached. Properties are variables associated with the class, while methods are the class’s functions.
javascriptCopy codeclass Friend {
name = 'James'; //this is a property
call = () => {...} // this is a method
}
To instantiate a class, we use the new keyword:
javascriptCopy codeconst myFriend = new Friend();
Classes offer a superior alternative to constructor functions and allow for inheritance using the extends keyword to inherit properties and methods from parent classes.
Properties and Methods
ES6 also brought new syntax for properties and methods. We no longer require a constructor function call before assigning properties – we can use myProp = 'value' inside the class. For methods, arrow functions can now be written inside classes: myMethod = () => {...}.
Spread & Rest Operators
The ... keyword denotes spread and rest operators. The spread operator splits array elements or object properties, while the rest operator merges a list of function arguments into an array.
Destructuring
Destructuring allows us to extract array elements or object properties and store them in variables.
Array destructuring example:
javascriptCopy code[a, b] = ['Hello', 'World'];
console.log(a); // Outputs: "Hello"
Object destructuring example:
javascriptCopy code{name} = {name: 'James', age: 34};
console.log(name); // Outputs: "James"
Reference and Primitive Types
Primitive types of data include numbers, strings, and booleans. When referenced, their values are copied to the new variable. On the other hand, reference types of data, like arrays and objects, create a pointer to the original object when assigned to a new variable.
javascriptCopy codeconst number = 1;
const num2 = number; // num2 is a copy of the value, not a reference
const person = {name: 'James'};
const secondPerson = person; // secondPerson references person
To copy an object with its own distinct pointer, use the spread operator:
javascriptCopy codeconst secondPerson = {...person}; // secondPerson is a copy, not a reference
Through gaining a deep understanding of these ES6 features, you will be well-prepared to write cleaner, more efficient JavaScript and React code.