{"id":10590,"date":"2019-10-16T07:08:53","date_gmt":"2019-10-16T11:08:53","guid":{"rendered":"https:\/\/www.carnaghan.com\/?p=10590"},"modified":"2023-10-14T20:02:08","modified_gmt":"2023-10-15T00:02:08","slug":"important-features-of-es6","status":"publish","type":"post","link":"https:\/\/www.carnaghan.com\/important-features-of-es6\/","title":{"rendered":"Important Features of ES6"},"content":{"rendered":"\n
EcmaScript is the standardized scripting language that JavaScript and some other languages, like ActionScript implement. JavaScript was invented by Brendan Eich in 1995 and became an ECMA standard in 1997. ECMAScript 2015 is version 6 of the ECMA Script programming language therefore known as ES6. There are many new features in ES6 which are listed below.<\/p>\n\n\n\n
The lack of block scoping created confusion in ES5. A new keyword let<\/strong> works similarly to var but the variable it declares is block-scoped and exists within the current block only.<\/p>\n\n\n\n The Output will be 0 since the if block has let<\/strong>. Otherwise, it would have been 1. Another keyword is const which is immutable and is also block-scoped like let. Const enables us to define constants.<\/p>\n\n\n\n Classes were introduced in ES6 with support for the class<\/strong> keyword, constructor<\/strong> keyword and the extend<\/strong> keyword for inheritance. Classes in ES6 have a more convenient syntax which is helpful. Method names don\u2019t need to have the word function<\/em> anymore. <\/p>\n\n\n\n Up until ES6, there were no native modules support in JavaScript. ES6 now has built-in modules, which are stored in files with one module per file. There is also support for exporting or importing values to and from modules without global namespace pollution using export and import keywords.<\/p>\n\n\n\n Interpolation in JavaScript is a way to output variables in the string. Before we had to break the string using concatenation:<\/p>\n\n\n\n For multi-line strings before ES6, we accomplished this by:<\/p>\n\n\n\n Destructuring is a JavaScript expression that enables the extraction of elements from an array and assigns them to the variables. Pre-ES6 we would have accomplished this with the following code:<\/p>\n\n\n\n In the above example we made two different variables to store the elements. In ES6 you can accomplish destructuring using the easier process below:<\/p>\n\n\n\n or this way:<\/p>\n\n\n\n In ES6, you can use default parameter values by specifying an equal sign which is used when the caller doesn\u2019t provide a value for the parameter.<\/p>\n\n\n\n here we have assigned the default value of b to 0.<\/p>\n\n\n\nfunction TotalAmount (v) {\n var a = 0 \n if (v) {\n let a = 1 \n } \n { \n let a = 100 \n{\n let a = 1000 \n }\n } \n return a\n}\n\nconsole.log(TotalAmount(true))<\/code><\/pre>\n\n\n\n
Classes and\nModules<\/h2>\n\n\n\n
class base {\n constructor(options = {}, data = []) { \n this.name = 'B'\n this.url = 'http:\/\/b.co'\n this.data = data\n this.options = options\n }\n\n getName() { \n console.log(`Class name: ${this.name}`)\n }\n}<\/code><\/pre>\n\n\n\n
\/\/lib.js\nexport const sqrt = Math.sqrt;\nexport function sq (a) {\n return a * a;\n}\nexport function diagonal(a, b) {\n return sqrt(sq (a) + sq (b));\n}\n\/\/main.js\nimport { square, diag } from 'lib';\nconsole.log(sq (9)); \/\/81\nconsole.log(diagonal(4, 3)); \/\/5<\/code><\/pre>\n\n\n\n
Template\nliterals (Template strings)<\/h2>\n\n\n\n
var greet = 'Hello' + first + ' ' + last + '.'\nIn ES6 we use ${var} inside back-ticked string like:\nvar greet = `Hello ${first} ${last}.`<\/code><\/pre>\n\n\n\n
var hey = 'How \\n\\t'\n + 'are \\n\\t'\n + 'you \\n\\t'\nIn ES6:\nvar hey = `How\n \t are\n \t you`<\/code><\/pre>\n\n\n\n
Destructuring<\/h2>\n\n\n\n
var intro = [\"Hello\", \"How\" , \"are\", \"you\"];\n var a = intro [0];\n var b = intro [3];\n\n console.log(a); \/\/\"Hello\"\n console.log(b); \/\/\"you\"<\/code><\/pre>\n\n\n\n
var [a, b] = [\"Hello\", \"How\" , \" are \", \" you \"];\n\n console.log(a); \/\/\"Hello\"\n console.log(b); \/\/\"How\"<\/code><\/pre>\n\n\n\n
var intro = [\"Hello\", \"How\" , \"are\", \"you\"];\n var [a, b] = intro;\n\n console.log(a);\/\/\"Hello\"\n console.log(b);\/\/\"How\"<\/code><\/pre>\n\n\n\n
Default\nParameters<\/h2>\n\n\n\n
function fun (a, b=0) {\n return [a, b];\n}\nfun(1); \/\/[1,0]<\/code><\/pre>\n\n\n\n
Arrow Functions<\/h2>\n\n\n\n