function folioWorld(name) {\n return 'hello ' + name\n}<\/code><\/pre>\n\n\n\nES6<\/strong><\/p>\n\n\n\nconst folioWorld = (name) => {\n return 'hello ' + name\n}<\/code><\/pre>\n\n\n\nOr<\/strong><\/p>\n\n\n\nconst folioWorld = (name) => {\n return `hello ${name}`;\n}<\/code><\/pre>\n\n\n\nAnd further more<\/strong><\/p>\n\n\n\nconst folioWorld = name => `hello ${name}`;<\/code><\/pre>\n\n\n\nIsn’t it cool!<\/p>\n\n\n\n
I was working on my angular project and was amazed to see that, with ES6, one can reduce bunch of lines into single statement.<\/p>\n\n\n\n
Let me share my stuff with you here!<\/p>\n\n\n\n
Starting from very basic piece.<\/p>\n\n\n\n
Code#1 (old fashion):<\/strong><\/p>\n\n\n\nswitchTabById(id) {\n this.tabId = id;\n}<\/code><\/pre>\n\n\n\nAfter Refactoring:<\/strong><\/p>\n\n\n\nswitchTabById = (id) => this.tabId = id;<\/code><\/pre>\n\n\n\nCode#2 (old fashion):<\/strong><\/p>\n\n\n\nonIssueTypeChange(event) {\n if (event.id === 5) {\n this.showLots = true;\n }\n else {\n this.showLots = false;\n }\n}<\/code><\/pre>\n\n\n\nLevel 1 Refactoring:<\/strong><\/p>\n\n\n\nonIssueTypeChange(event) {\n this.showLots = (event.id === 5) ? true : false;\n}<\/code><\/pre>\n\n\n\nLevel 2 Refactoring:<\/strong><\/p>\n\n\n\nonIssueTypeChange(event) {\n this.showLots = (event.id === 5);\n}<\/code><\/pre>\n\n\n\nLevel 3 Refactoring:<\/strong><\/p>\n\n\n\nonIssueTypeChange = (event) => this.showLots = (event.id === 5);<\/code><\/pre>\n\n\n\nCool \ud83d\ude42 this looks better.<\/p>\n\n\n\n
Now check the difference!!<\/em><\/p>\n\n\n\nBefore:<\/strong><\/p>\n\n\n\nonIssueTypeChange(event) {\n if (event.id === 5) {\n this.showLots = true;\n }\n else {\n this.showLots = false;\n }\n}<\/code><\/pre>\n\n\n\nAfter:<\/strong><\/p>\n\n\n\nonIssueTypeChange = (event) => this.showLots = (event.id === 5);<\/code><\/pre>\n\n\n\nIn this manner you can refactor your code to make it more readable, smarter, and shorter. These new cool features of ES6 are great for JavaScript developers.<\/p>\n\n\n\n
It can speed up your coding and help you in structuring your code to looks smoother and fancy.<\/p>\n\n\n\n
Wait!! It\u2019s not over yet<\/strong><\/p>\n\n\n\nI have extracted something very interesting from ES6 to you.\n<\/p>\n\n\n\n
It\u2019s JavaScript ES6 Reduce. So let\u2019s start<\/p>\n\n\n\n
Here is an array:<\/p>\n\n\n\n
let myArray = [1, 2, 3, 4];<\/code><\/pre>\n\n\n\nYou need to iterate through an array using for loop to calculate the sum of myArray<\/p>\n\n\n\n
let sum = 0;\nfor (let i = 0; i < myArray.length; i++) {\n sum += myArray[i];\n}<\/code><\/pre>\n\n\n\nNow take a look how the reduce method works its magic here!<\/p>\n\n\n\n
let sum = myArray.reduce( (acc, val) => acc + val );<\/code><\/pre>\n\n\n\n
![\"\"\/](\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/07\/aaa.jpg\")
<\/figure>\n","protected":false},"excerpt":{"rendered":"