ES 2015
Also known as ECMAScript 2015 or ES6
Modules / import
Provides an alternative to CommonJS
Instead of
var React = require('react')
you can have
import * as React from 'react'
var, let and const
var declaration are function scoped when declared inside a function and globally scoped when declared outside
var variables are hoisted to the top of its scope.
var variables are initialized with a value of undefined.
var variables can be used before they have been declared.
var variables can be re-declared within the scope.
let declarations are block scoped.
let variables are hoisted to the top of its scope.
let variables are not initialised (and are only initialised when they are assigned a value).
let variables cannot be used before they have been declared.
let variables cannot be re-declared within its scope.
const declarations are block scoped .
const variables are hoisted to the top of its scope.
const variables cannot be used before they have been declared.
const variables have the same value throughout the scope.
const variables cannot be re-declared or updated within its scope.
Classes
inheritance
static methods
private methods
get and set
Collections
Arrow Functions
Instead of:
const myFunction = function() {
}
you can have
const myFunction = () => {
}
For single statement arrow functions there is an implicit return
const myFunction = () => ( { value : 'text' } )
Not to be used inside classes to declare constructors or methods.
For single statement functions you can condense to one line
Instead of
const myFunction = function (param1) {
dosomething()
}
const myFunction = function (param1, param2) {
dosomething()
}
you can have
const myFunction = (param1) => dosomething()
const myFunction = (param1, param2) => dosomething()
or
const myFunction = param1 => dosomething()
This last notation can only be used when you have one parameter.
implicit return
this keyword
when used inside an object method
(declared using without arrow functions)
this refers to the object
When used in combination with arrow functions 'this' will be undefined
For this reason do not use arrow functions inside objects
Promises
They provide one way to deal with asynchronous code
Object Destructuring
Object Spread Operator
Array Destructuring
Array Spread Operator
This operator is three dots.
const a = [1,2,3]
const b = [...a, 4,5,6]
Array Rest Elements
This is an improved way to handle function parameters.
The rest parameter represents an indefinite number of arguments as an array.
Template Literals
The syntax uses backticks instead of single or double quotes.
const mystring = `text`
Strings Multi-Line
Instead of having to use the '\' character at the end
const string = "first part\
second part"
you can now use a back tick character
This is a feature that accompanies template literals
const string = `first part
second part`
Template Tags
In styled components, template tags are used to define CSS strings
const Button = styled.button
font-size : 1.5em
color : white
Interpolation
Arrays
Array.find -
Array.findIndex -
Function Parameter Default Values
Numbers
Number.MIN_SAFE_INTEGER
Number.MAX_SAFE_INTEGER
Number.EPSILON
Number.IsInteger -
Number.IsSafeInteger -
New Global Methods
isFinite()
isNaN()
© 2021 Better Solutions Limited. All Rights Reserved. © 2021 Better Solutions Limited TopPrevNext