We can now keep our code clear and short with arrow function.
\nES5
\nfunction sayHello(name) {\n return 'hello ' + name\n}ES6
\nconst sayHello = name => `hello ${name}`When passing a single parameter, you can ditch the parenthesis around the parameter. Plus, arrow function provides us with implicit return if there’s no block.
\n// returns 'Hi Dayoung'\n// no block means implicit return\n\n;(name => 'Hi ' + name)('Dayoung')// returns defined\n// explanation: explicit return in block exists\n\n;(name => {\n 'Hi ' + name\n})('Dayoung')this in arrow function
\nthis refers to the parent scope in arrow function.
\n// this in arrow function\nlet obj = {\n multiplier: 2, doubleTheNums() { return [1, 2, 3].map(num => (num = num * this.multiplier)) },}\n\nobj.doubleTheNums() // [2, 4, 6]Spread/Rest Operator
\nWe can now use spread operator to merge objects.
\n// spread operator\nconst obj1 = { a: 1, b: 2 }\nconst obj2 = { a: 2, c: 3, d: 5 }\nconst obj3 = { ...obj1, ...obj2 }Object.assign
\nAnother way to implement this, assign method.
\n// assign method\nvar obj1 = { a: 1, b: 2 }\nvar obj2 = { a: 2, c: 3, d: 5 }\nvar obj3 = Object.assign(obj1, obj2)Destructuring Assignment
\nIn ES5, we had to assign the values separately if you wanted to store one or more variables from an object.\nWith ES6 we can do this in one beautiful line.
\n// es5\nvar obj1 = { a: 1, b: 2, c: 3, d: 4 }\nvar a = obj1.a\nvar b = obj1.b\nvar c = obj1.c\nvar d = obj1.d\n\n// es6\nconst obj1 = { a: 1, b: 2, c: 3, d: 4 }\nconst { a, b, c, d } = obj1Object Literals
\nWhen creating an object, you can make a use of already exisiting variable that is named the same as the key.
\nconst a = 1\nconst b = 2\nconst c = 3\nconst d = 4\nconst obj1 = { a, b, c, d }More intuitive exporting and imporing module syntax
\nES5
\n// exporting\nvar myModule = {\n a: 1,\n b: function() {\n console.log('es5')\n },\n}\n\nmodule.exports = myModule\n\n// importing\nvar myModule = require('./myModule')ES6
\n// exporting\nconst myModule = {\n a: 1,\n b: () => {\n console.log('es6')\n },\n}\n\nexport default myModule\n\n// importing\nimport myModule from './myModule'We have to import the whole module that’s been exported with export default.\nIf you want to export and import child variables or modules separately, you can make it work like this.
\n// exporting\nexport const a = 1\nexport const b = () => {\n console.log('es6')\n}\n\n// importing\nimport { a, b } from './myModule'The new way to implement OOP in JavaScript besides constructor function and prototype, Class looks like this:
\nclass Cat {\n constructor(name, treat) {\n this.name = name\n this.treat = treat\n }\n\n sayMeow() {\n return 'Meow Meow'\n }\n}\n\nlet myCat = new Cat()\nmyCat.sayMeow() // 'Meow Meow'You can also extends classes by using the extends keyword, which enables you to inherit attributes and methods of parent Class.
\nclass Horse {\n constructor(name) {\n this.name = name\n }\n\n run() {\n return 'Running to the destination'\n }\n}\n\nclass FlyingHorse extends Horse {\n constructor(name) {\n // super keyword calls functions on a parent object\n super(name)\n }\n\n fly() {\n return 'Flying to the destination'\n }\n}Sources
\nhttp://developmentr.com/javascript/2015/12/31/javascript-es6.html#classes\nhttps://medium.com/recraftrelic/es5-vs-es6-with-example-code-9901fa0136fc
\n