{"id":6666,"date":"2021-08-05T06:47:43","date_gmt":"2021-08-05T06:47:43","guid":{"rendered":"https:\/\/www.ardorsys.com\/blog\/?p=6666"},"modified":"2021-08-11T04:19:07","modified_gmt":"2021-08-11T04:19:07","slug":"javascript-es6-cheat-sheet-2021","status":"publish","type":"post","link":"https:\/\/www.ardorsys.com\/blog\/javascript-es6-cheat-sheet-2021\/","title":{"rendered":"Latest JavaScript ES6 Cheat Sheet 2021"},"content":{"rendered":"

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.<\/p>\n

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\u2026 and more. Let\u2019s take a look.<\/p>\n

Arrow function<\/h3>\n
const sum = (a, b) => a + b\r\n\r\nconsole.log(sum(2, 6)) \/\/ prints 8\r\n<\/pre>\n
Default parameters<\/h3>\n
function print(a = 5) {\r\n    console.log(a)\r\n}\r\n\r\nprint() \/\/ prints 5\r\nprint(22) \/\/ prints 22\r\n<\/pre>\n
let scope<\/h3>\n
let a = 3\r\n\r\nif (true) {\r\n    let a = 5\r\n    console.log(a) \/\/ prints 5\r\n}\r\n\r\nconsole.log(a) \/\/ prints 3\r\n<\/pre>\n
const<\/h3>\n
\/\/ can be assigned only once:\r\nconst a = 55\r\n\r\na = 44 \/\/ throws an error\r\n<\/pre>\n
Multiline string<\/h3>\n
console.log(`\r\n  This is a \r\n  multiline string\r\n`)\r\n<\/pre>\n
Template strings<\/h3>\n
const name = 'Leon'\r\nconst message = `Hello ${name}`\r\n\r\nconsole.log(message) \/\/ prints \"Hello Leon\"\r\n<\/pre>\n
String includes()<\/h3>\n
console.log('apple'.includes('pl')) \/\/ prints true\r\nconsole.log('apple'.includes('tt')) \/\/ prints false\r\n<\/pre>\n
String startsWith()<\/h3>\n
console.log('apple'.startsWith('ap')) \/\/ prints true\r\nconsole.log('apple'.startsWith('bb')) \/\/ prints false\r\n<\/pre>\n
String repeat()<\/h3>\n
console.log('ab'.repeat(3)) \/\/ prints \"ababab\"\r\n<\/pre>\n
Destructuring array<\/h3>\n
let [a, b] = [3, 7];\r\n\r\nconsole.log(a); \/\/ 3\r\nconsole.log(b); \/\/ 7\r\n<\/pre>\n
Destructuring object<\/h3>\n
let obj = { \r\n  a: 55,\r\n  b: 44\r\n};\r\n\r\nlet { a, b } = obj;\r\n\r\nconsole.log(a); \/\/ 55\r\nconsole.log(b); \/\/ 44\r\n<\/pre>\n
object property assignment<\/h3>\n
const a = 2\r\nconst b = 5\r\n\r\nconst obj = { a, b }\r\n\r\n\/\/ Before es6:\r\n\/\/ obj = { a: a, b: b }\r\n\r\nconsole.log(obj) \/\/ prints { a: 2, b: 5 }\r\n<\/pre>\n
object function assignement<\/h3>\n
const obj = { \r\n    a: 5, \r\n    b() {\r\n        console.log('b')\r\n    } \r\n}\r\n\r\nobj.b() \/\/ prints \"b\"\r\n<\/pre>\n
spread operator<\/h3>\n
const a = [ 1, 2 ]\r\nconst b = [ 3, 4 ]\r\n\r\nconst c = [ ...a, ...b ]\r\n\r\nconsole.log(c) \/\/ [1, 2, 3, 4]\r\n<\/pre>\n
Object.assign()<\/h3>\n
const obj1 = { a: 1 }\r\nconst obj2 = { b: 2 }\r\n\r\nconst obj3 = Object.assign({}, obj1, obj2)\r\n\r\nconsole.log(obj3) \/\/ { a: 1, b: 2 }\r\n<\/pre>\n
Object.entries()<\/h3>\n
const obj = {\r\n  firstName: 'Vipul',\r\n  lastName: 'Rawat',\r\n  age: 22,\r\n  country: 'India',\r\n};\r\n\r\nconst entries = Object.entries(obj);  \r\n\/* returns an array of [key, value] \r\n   pairs of the object passed\r\n*\/\r\n\r\nconsole.log(entries);  \r\n\/* prints\r\n   [\r\n     ['firstName', 'Vipul'], \r\n     ['lastName', 'Rawat'], \r\n     ['age', 22], \r\n     ['country', 'India']\r\n   ];\r\n*\/\r\n<\/pre>\n
spread operator<\/h3>\n
const a = {\r\n    firstName: \"Barry\",\r\n    lastName: \"Manilow\",\r\n}\r\n\r\nconst b = {\r\n    ...a,\r\n    lastName: \"White\",\r\n    canSing: true,\t\r\n}\r\n\r\nconsole.log(a) \/\/ {firstName: \"Barry\", lastName: \"Manilow\"}\r\n\r\nconsole.log(b) \/\/ {firstName: \"Barry\", lastName: \"White\", canSing: true}\r\n\r\n\/\/ great for modifying objects without side effects\/affecting the original\r\n<\/pre>\n
Destructuring Nested Objects<\/h3>\n
const Person = {\r\n  name: \"John Snow\",\r\n  age: 29,\r\n  sex: \"male\",\r\n  materialStatus: \"single\",\r\n  address: {\r\n    country: \"Westeros\",\r\n    state: \"The Crownlands\",\r\n    city: \"Kings Landing\",\r\n    pinCode: \"500014\",\r\n  },\r\n};\r\n\r\nconst { address : { state, pinCode }, name } = Person;\r\n\r\nconsole.log(name, state, pinCode) \/\/ John Snow The Crownlands 500014\r\nconsole.log(city) \/\/ ReferenceError\r\n<\/pre>\n
Exponent operator<\/h3>\n
const byte = 2 ** 8\r\n\r\n\/\/ Same as: Math.pow(2, 8)\r\n<\/pre>\n
Promises with finally<\/h3>\n
promise\r\n  .then((result) => { \u00b7\u00b7\u00b7 })\r\n  .catch((error) => { \u00b7\u00b7\u00b7 })\r\n  .finally(() => { \/\/ logic independent of success\/error })\r\n\r\n\/\/ The handler is called when the promise is fulfilled or rejected.\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"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…\n","protected":false},"author":1,"featured_media":6669,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[150,44],"tags":[155,151,156,157,25],"class_list":["post-6666","post","type-post","status-publish","format-standard","has-post-thumbnail","category-javascript","category-web-development","tag-es6","tag-javascript","tag-javascript-es6","tag-programming-language","tag-web-development-company"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t