ES6 Cheatsheet 🔥 - All You Need 🚀
Garvit Motwani
Posted on April 29, 2021
Hey Devs, This is an all you need ES6 cheatsheet for beginners and seasoned developers!
So let's get started!!
🎉 Giveaway
We are giving away any course you need on Udemy. Any price any course.
To enter you have to do the following:
- 👍 React to this post
- ✉️ Subscribe to our newsletter
--> Grab the downloadable PDF version here
Block scoping
Let
function fn () {
let x = 0
if (true) {
let x = 1 // only inside this `if`
}
}
Const
const a = 1
let is the new var. Constants work just like let, but can't be reassigned.
Check: Let and const
Backtick strings
Interpolation
const message = `Hello ${name}`
Multiline strings
const str = `
hello
world
`
Templates and multiline strings.
Check: Template strings
Binary and octal literals
let bin = 0b1010010
let oct = 0o755
Check: Binary and octal literals
New methods
New string methods
"hello".repeat(3)
"hello".includes("ll")
"hello".startsWith("he")
"hello".padStart(8) // " hello"
"hello".padEnd(8) // "hello "
"hello".padEnd(8, '!') // hello!!!
"\u1E9B\u0323".normalize("NFC")
Check: New methods
Classes
class Circle extends Shape {
Constructor
constructor (radius) {
this.radius = radius
}
Methods
getArea () {
return Math.PI * 2 * this.radius
}
Calling superclass methods
expand (n) {
return super.expand(n) * Math.PI
}
Static methods
static createFromDiameter(diameter) {
return new Circle(diameter / 2)
}
}
Syntactic sugar for prototypes.
Check: Classes
Exponent operator
const byte = 2 ** 8
// Same as: Math.pow(2, 8)
Promises
Making promises
new Promise((resolve, reject) => {
if (ok) { resolve(result) }
else { reject(error) }
})
For asynchronous programming.
Check: Promises
Using promises
promise
.then((result) => { ··· })
.catch((error) => { ··· })
Using promises with finally
promise
.then((result) => { ··· })
.catch((error) => { ··· })
.finally(() => { // logic independent of success/error })
The handler is called when the promise is fulfilled or rejected.
Promise functions
Promise.all(···)
Promise.race(···)
Promise.reject(···)
Promise.resolve(···)
Async-await
async function run () {
const user = await getUser()
const tweets = await getTweets(user)
return [user, tweets]
}
async functions are another way of using functions.
Check: async function
Destructuring
Destructuring assignment
Arrays
const [first, last] = ['Nikola', 'Tesla']
Objects
let {title, author} = {
title: 'The Silkworm',
author: 'R. Galbraith'
}
Supports for matching arrays and objects.
Check: Destructuring
Default values
const scores = [22, 33]
const [math = 50, sci = 50, arts = 50] = scores
// Result:
// math === 22, sci === 33, arts === 50
Default values can be assigned while destructuring arrays or objects.
Function arguments
function greet({ name, greeting }) {
console.log(`${greeting}, ${name}!`)
}
greet({ name: 'Larry', greeting: 'Ahoy' })
Destructuring of objects and arrays can also be done in function arguments.
Default values
function greet({ name = 'Rauno' } = {}) {
console.log(`Hi ${name}!`);
}
greet() // Hi Rauno!
greet({ name: 'Larry' }) // Hi Larry!
Reassigning keys
function printCoordinates({ left: x, top: y }) {
console.log(`x: ${x}, y: ${y}`)
}
printCoordinates({ left: 25, top: 90 })
This example assigns x to the value of the left key.
Loops
for (let {title, artist} of songs) {
···
}
The assignment expressions work in loops, too.
Object destructuring
const { id, ...detail } = song;
Extract some keys individually and remaining keys in the object using rest (...) operator
Spread
Object spread
with Object spread
const options = {
...defaults,
visible: true
}
without Object spread
const options = Object.assign(
{}, defaults,
{ visible: true })
The Object spread operator lets you build new objects from other objects.
Check: Object spread
Array spread
with Array spread
const users = [
...admins,
...editors,
'rstacruz'
]
without Array spread
const users = admins
.concat(editors)
.concat([ 'rstacruz' ])
The spread operator lets you build new arrays in the same way.
Check: Spread operator
Functions
Function arguments
Default arguments
function greet (name = 'Jerry') {
return `Hello ${name}`
}
Rest arguments
function fn(x, ...y) {
// y is an Array
return x * y.length
}
Spread
fn(...[1, 2, 3])
// same as fn(1, 2, 3)
Default, rest, spread.
Check: Function arguments
Fat arrows
Fat arrows
setTimeout(() => {
···
})
With arguments
readFile('text.txt', (err, data) => {
...
})
Implicit return
numbers.map(n => n * 2)
// No curly braces = implicit return
// Same as: numbers.map(function (n) { return n * 2 })
numbers.map(n => ({
result: n * 2
}))
// Implicitly returning objects requires parentheses around the object
Like functions but with this preserved.
Check: Fat arrows
Objects
Shorthand syntax
module.exports = { hello, bye }
// Same as: module.exports = { hello: hello, bye: bye }
Check: Object literal enhancements
Methods
const App = {
start () {
console.log('running')
}
}
// Same as: App = { start: function () {···} }
Check: Object literal enhancements
Getters and setters
const App = {
get closed () {
return this.status === 'closed'
},
set closed (value) {
this.status = value ? 'closed' : 'open'
}
}
Check: Object literal enhancements
Computed property names
let event = 'click'
let handlers = {
[`on${event}`]: true
}
// Same as: handlers = { 'onclick': true }
Check: Object literal enhancements
Extract values
const fatherJS = { age: 57, name: "Brendan Eich" }
Object.values(fatherJS)
// [57, "Brendan Eich"]
Object.entries(fatherJS)
// [["age", 57], ["name", "Brendan Eich"]]
Modules
Imports
import 'helpers'
// aka: require('···')
import Express from 'express'
// aka: const Express = require('···').default || require('···')
import { indent } from 'helpers'
// aka: const indent = require('···').indent
import * as Helpers from 'helpers'
// aka: const Helpers = require('···')
import { indentSpaces as indent } from 'helpers'
// aka: const indent = require('···').indentSpaces
import is the new require().
Check: Module imports
Exports
export default function () { ··· }
// aka: module.exports.default = ···
export function mymethod () { ··· }
// aka: module.exports.mymethod = ···
export const pi = 3.14159
// aka: module.exports.pi = ···
export is the new module.exports.
Check: Module exports
Generators
Generators
function* idMaker () {
let id = 0
while (true) { yield id++ }
}
let gen = idMaker()
gen.next().value // → 0
gen.next().value // → 1
gen.next().value // → 2
It's complicated.
Check: Generators
For..of iteration
for (let i of iterable) {
···
}
For iterating through generators and arrays.
Check: For..of iteration
References
MDN Web Docs
DevHints
w3schools
⚡️ Giveaway ⚡️
We are giving away any course you need on Udemy. Any price any course.
Steps to enter the giveaway
--> React to this post
--> Subscribe to our Newsletter <-- Very important
--> Follow me on Twitter <-- x2 Chances of winning
The winner will be announced on May 1, Via Twitter
Thank you very much for reading this article.
Comment any tricks & tips you know!
PLEASE LIKE, SHARE, AND COMMENT
Read also:
Subscribe to our newsletter to receive our weekly recap directly on your email!
Join us on Discord to participate in hackathons with us / participate in our giveaways!
Thanks for reading!!
Posted on April 29, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
