Latest JavaScript ES6 Cheat Sheet 2021

ardorsys-Javascript-ES6

ECMAScript is a general-purpose programming language, standardized by Ecma International according to the document ECMA-262. It is a JavaScript standard meant to ensure the interoperability of web pages across different web browsers. ECMAScript 2015 was the second major revision to JavaScript that is known as ES6 and ECMAScript 6 now.

JavaScript ES6 has come-up with new syntax and awesome features to make your code more readable and modern. This language allows you to do more with less code. ES6 introduces us to many great features like arrow functions, template strings, class destruction, Modules… and more. Let’s take a look.

Arrow function

const sum = (a, b) => a + b
 
console.log(sum(2, 6)) // prints 8

Default parameters

function print(a = 5) {
    console.log(a)
}
 
print() // prints 5
print(22) // prints 22

let scope

let a = 3
 
if (true) {
    let a = 5
    console.log(a) // prints 5
}
 
console.log(a) // prints 3

const

// can be assigned only once:
const a = 55
 
a = 44 // throws an error

Multiline string

console.log(`
  This is a 
  multiline string
`)

Template strings

const name = 'Leon'
const message = `Hello ${name}`
 
console.log(message) // prints "Hello Leon"

String includes()

console.log('apple'.includes('pl')) // prints true
console.log('apple'.includes('tt')) // prints false

String startsWith()

console.log('apple'.startsWith('ap')) // prints true
console.log('apple'.startsWith('bb')) // prints false

String repeat()

console.log('ab'.repeat(3)) // prints "ababab"

Destructuring array

let [a, b] = [3, 7];
 
console.log(a); // 3
console.log(b); // 7

Destructuring object

let obj = { 
  a: 55,
  b: 44
};
 
let { a, b } = obj;
 
console.log(a); // 55
console.log(b); // 44

object property assignment

const a = 2
const b = 5
 
const obj = { a, b }
 
// Before es6:
// obj = { a: a, b: b }
 
console.log(obj) // prints { a: 2, b: 5 }

object function assignement

const obj = { 
    a: 5, 
    b() {
        console.log('b')
    } 
}
 
obj.b() // prints "b"

spread operator

const a = [ 1, 2 ]
const b = [ 3, 4 ]
 
const c = [ ...a, ...b ]
 
console.log(c) // [1, 2, 3, 4]

Object.assign()

const obj1 = { a: 1 }
const obj2 = { b: 2 }
 
const obj3 = Object.assign({}, obj1, obj2)
 
console.log(obj3) // { a: 1, b: 2 }

Object.entries()

const obj = {
  firstName: 'Vipul',
  lastName: 'Rawat',
  age: 22,
  country: 'India',
};
 
const entries = Object.entries(obj);  
/* returns an array of [key, value] 
   pairs of the object passed
*/
 
console.log(entries);  
/* prints
   [
     ['firstName', 'Vipul'], 
     ['lastName', 'Rawat'], 
     ['age', 22], 
     ['country', 'India']
   ];
*/

spread operator

const a = {
    firstName: "Barry",
    lastName: "Manilow",
}
 
const b = {
    ...a,
    lastName: "White",
    canSing: true,	
}
 
console.log(a) // {firstName: "Barry", lastName: "Manilow"}
 
console.log(b) // {firstName: "Barry", lastName: "White", canSing: true}
 
// great for modifying objects without side effects/affecting the original

Destructuring Nested Objects

const Person = {
  name: "John Snow",
  age: 29,
  sex: "male",
  materialStatus: "single",
  address: {
    country: "Westeros",
    state: "The Crownlands",
    city: "Kings Landing",
    pinCode: "500014",
  },
};
 
const { address : { state, pinCode }, name } = Person;
 
console.log(name, state, pinCode) // John Snow The Crownlands 500014
console.log(city) // ReferenceError

Exponent operator

const byte = 2 ** 8
 
// Same as: Math.pow(2, 8)

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.
57 Shares:
You May Also Like