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
Read More

React vs Angular: Which One to Choose for Your Project

React and Angular are the most popular technologies and the avant-grade of the front-end world. These trending JavaScript based tools are different from each other however the similarity is that both technologies are used for developing single-page applications.
Read More
Read More

eCommerce Development Future: 10 Shopping Trends That Are Changing How We Shop

There are several eshops on large scale which require huge transformation to improve operations. To renovate technology systems and helping in supply chain, they need to work in partnership with an eCommerce development company or hire web developer who can provide you new features with add-ons. An ecommerce industry starts journey from manufacturing the product and ends with shopping by a user from a retailer.
Read More