Modern JavaScript - Modern ES6+ Features

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Modern JavaScript:
Essential ES6+ Features
Monique Dingding
Agent Portal
@gloriamaris

Overview
● Block-Scoped Constructs: let and const
● Rest and Spread Parameters
● String Interpolation (Template Literals)
...

Essential ES6+ Features
You Need to Know

Block-Scoped Constructs: let and const
Using let
function retrieveClients (isAdmin = false) {
let clients = ['Dani', 'Ian'...

Block-Scoped Constructs: let and const
Using let
function retrieveClients (isAdmin = false) {
let clients = ['Dani', 'Ian'...

Block-Scoped Constructs: let and const
Using const
function retrieveClients (isAdmin = false) {
const clients = ['Dzani', ...

Block-Scoped Constructs: let and const
Using const
function retrieveClients (isAdmin = false) {
const clients = ['Dzani', ...

Rest and Spread Parameters
Rest operator
function getRemaining (isAgent, agentId, ...remaining) {
return isAgent ? remaini...

Rest and Spread Parameters
Rest operator
function getRemaining (isAgent, agentId, ...remaining) {
return isAgent ? remaini...

Rest and Spread Parameters
Spread operator
const blues = ['BB King', 'Buddy Guy']
const jazz = ['Chet Baker', 'Paul Desmon...

Rest and Spread Parameters
Spread operator
const blues = ['BB King', 'Buddy Guy']
const jazz = ['Chet Baker', 'Paul Desmon...

Rest and Spread Parameters
Spread Operator Use Cases
● Object and Array spreads e.g. <LeadModal {...this.props} />
● Destr...

String Interpolation
ES5 Syntax
const lyrics = "My wrist, stop watchin, my neck is flossinn " +
"Make big deposits, my glo...

String Interpolation
ES6+ Syntax
const lyrics = `
My wrist, stop watchin, my neck is flossin
Make big deposits, my gloss i...

String Interpolation
Template Literals ES5 Syntax
const lead = {
firstName: 'Danica',
lastName: 'Manalang',
phone: '099519...

String Interpolation
Template Literals ES6+ Syntax
const lead = {
firstName: 'Danica',
lastName: 'Manalang',
phone: '09951...

Object Shorthand
ES5 Syntax
function validate (name, age, address, email) {
const data = {
name: name,
age: age,
address: ...

Object Shorthand
ES6+ Syntax
function validate (name, age, address, email) {
const data = { name, age, address, email, mod...

Destructuring Assignment
ES5 Syntax
function mapStateToProps (state) {
return {
lead: state.lead,
properties: state.proper...

Destructuring Assignment
ES6+ Syntax
function mapStateToProps (state) {
const { lead, developments } = state
return {
lead...

Arrow Functions
● Arrow functions are a new syntax for creating functions. Characterized by the
new token =>, it is very h...

Arrow Functions
ES5 Syntax class Dashboard extends Component {
constructor (props) {
super(props)
this.handleClick = this....

Arrow Functions
ES6+ Syntax class Dashboard extends Component {
constructor (props) {
super(props)
}
const handleClick = (...

Arrow Functions
ES6+ Syntax class Dashboard extends Component {
constructor (props) {
super(props)
}
const handleClick = (...

Arrow Functions
Using Array functions ES6+ Syntax
// Example 1.1
const sum = items.reduce(item => {
return item.visible
})...

Arrow Functions
Declaring Functional Components in React ES6+ Syntax
const ErrorMessage = (props) => {
const { error, loca...

Arrow Functions
Declaring Functional Components in React ES6+ Syntax
const ErrorMessage = ({ error, locale }) => (
<span>
...

Promises to Async/Await
Promises are used to handle asynchronous operations in the simplest way.
In ES5, to make some meth...

Promises to Async/Await
Promises ES6+ Syntax
const promises = []
// Assuming these operations have to be called synchronou...

Promises to Async/Await
Async/Await ES6+ Syntax
const retrieveSettings = async () => {
await retrieveTasks()
await retriev...

Modules
ES5 Syntax
// module.js
module.exports = {
port: 3000,
getAccounts: function() {
...
}
}
// index.js
var service =...

Modules
ES6+ Syntax
// module.js
export const port = 3000
export default getAccounts = (url) => {
...
}
// index.js
import...

Array Built-in Methods
● find()
● findIndex()
● some()
● includes()
const cats = ['Lemon', 'Simon', 'Olaf', 'Primrose', 'S...

Thank you :-)
@gloriamaris

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

2024 Trend Updates: What Really Wor... by Search Engine Jou... 1062387 views
Storytelling For The Web: Integrate... by Chiara Aliotta 980817 views
Artificial Intelligence, Data and C... by OECD Directorate ... 921734 views
How to Leverage AI to Boost Employe... by SocialHRCamp 391483 views
2024 State of Marketing Report – by... by Marius Sescu 221384 views
Everything You Need To Know About C... by Expeed Software 237443 views

View on Slideshare

1 of 34 Ad

View on Slideshare

1 of 34 Ad