\nGiven that more and more users are relying on modern browsers and many front-end frameworks such as React and Vue.js are adopting ES6 syntax, you should start writing ES6 code too<\/b>.<\/p>\n
![\"es6](\"https:\/\/mastercaweb.u-strasbg.fr\/wp-content\/uploads\/2018\/04\/zendevs-es6-javascript-1200x900-1-1-1024x768.png\")
<\/p>\n
Cool features to check out<\/h2>\n
JavaScript ES6 introduces many new features.<\/strong> Here are several features that you should really have a look at<\/b>.<\/p>\n In ES5, you use `var` keyword to declare a variable<\/b>. However, it can cause some unexpected issues. For the last `console.log(i)`, you would expect the console to return 34. However, it returns 4 because of scoping. Now take a look at the following example again:<\/p>\n The last `console.log(i)` will return 34 because `let` is scoped to the nearest code block. However, for an object, it’s a bit different.<\/p>\n The values of object properties are mutable, but constant objects are immutable.<\/p>\n One of the syntactic treats introduced by JavaScript ES6 is the arrow function<\/b>. Another benefit is no binding of `this`. The context of `this` won’t be lost inside the arrow function.<\/p>\n In ES6, you can assign default parameter values for a function<\/b>.<\/p>\n In ES6, you can do string interpolation<\/b>, just like you would do in other programming languages such as PHP.<\/p>\n If you look at the previous example, you can see I have to repeat `customer` several times. Imagine that we have something longer, like `customer.address.street`. We would have to write that long variable over and over again if we need that value stored in that variable. What a nightmare! So, let’s take the example and do some refactoring<\/b> in ES6.<\/p>\n In ES5, JavaScript doesn’t support “classes”, it just simulates this functionality through “prototypes”. The syntax is very confusing and hard to read. With ES6, “classes” have been introduced<\/b>, which makes writing object-oriented code more readable and organized.<\/p>\n With ES6, it’s much easier to find an element in an array<\/b>. We need to display the post with `”id”: 5`. In this case, the `find` function may come in handy.<\/p>\n There are many cool new features introduced in ES6. This would be a lengthy article if I were to cover all the features. If you want to know more about ES6, visit ECMAScript 6: New Features: Overview & Comparison<\/a>.<\/p>\n1. `let` and `const`<\/h3>\n
\nTake a look at the following example:<\/p>\n```javascript\nvar i;\ni = 34;\nfor (var i = 0; i < 4; i++) {\n console.log(i);\n}\nconsole.log(i);\n```\n<\/pre>\n<\/div>\n
\nTo handle the scoping issue<\/b>, ES6 introduced two new keywords for declaring variables: `let` and `const`.<\/p>\n```javascript\nvar i;\ni = 34;\nfor (let i = 0; i < 4; i++) {\n console.log(i);\n}\nconsole.log(i);\n```\n<\/pre>\n<\/div>\n
\nFor `const`, once a value is assigned to a constant, it becomes immutable.
\nFor example:<\/p>\n```javascript\nconst number = 1;\nnumber = 100; \/\/ Uncaught TypeError: Assignment to constant variable.\n```\n<\/pre>\n<\/div>\n
```javascript\nconst dog = {\n name: 'Milo',\n age: 3\n};\ndog.age = 5; \/\/ Returns 5 if we console.log(dog.age)\ndog = { name: 'Sally' }; \/\/ Uncaught TypeError: Assignment to constant variable.\n```\n<\/pre>\n<\/div>\n2. Arrow function<\/h3>\n
\nThe arrow function keeps your code shorter<\/b>.<\/p>\n```javascript\nlet numbers = [1, 2, 3, 4, 5];\n\/\/ ES5 syntax\nvar sum = 0;\nnumbers.forEach(function (number) {\n sum += number;\n});\nconsole.log(sum);\n\/\/ ES6 syntax\nlet sum = 0;\nnumbers.forEach(number => { \/\/ parentheses can be omitted if only one parameter is passed to the function\n sum += number;\n});\n```\n<\/pre>\n<\/div>\n3. Default Parameter Values<\/h3>\n
```javascript\n\/\/ ES6 syntax\nfunction add(x = 10, y = 20) {\n return x + y;\n}\nadd();\n\/\/ ES5 syntax\nfunction add(x, y) {\n if (x === undefined) {\n x = 10;\n }\n if (y === undefined) {\n y = 20;\n }\n return x + y;\n}\nadd();\n```\n<\/pre>\n<\/div>\n4. String interpolation<\/h3>\n
```javascript\n\/\/ ES6 syntax\nlet customer = { name: 'Calvin', amount: '$500' };\nlet message = `${customer.name} just spent ${customer.amount} on a product.`;\n\/\/ ES5 syntax\nvar customer = { name: 'Calvin', amount: '$500' };\nvar message = customer.name + ' just spent ' + customer.amount + ' on a product.'\n```\n<\/pre>\n<\/div>\n5. Destructuring<\/h3>\n
```javascript\nlet customer = { name: 'Calvin', amount: '$500' };\nlet { name, amount } = customer;\nlet message = `${name} just spent ${amount} on a product.`;\n```\n<\/pre>\n<\/div>\n6. Classes<\/h3>\n
```javascript\n\/\/ ES6 syntax\nclass Person {\n constructor(name, age) {\n this.name = name;\n this.age = age;\n }\n speak() {\n console.log(`Hi, I'm ${this.name} and I'm ${this.age} years old`);\n }\n}\n\/\/ ES5 syntax\nfunction Person(name, age) {\n this.name = name;\n this.age = age;\n}\nPerson.prototype.speak = function() {\n console.log('Hi, I\\'m ' + this.name + ' and I\\'m ' + this.age + ' years old');\n}\n```\n<\/pre>\n<\/div>\n7. New Built-In Methods<\/h3>\n
\nFor example, let say we’ve fetched a JSON response from an API server JSONPlaceholder<\/a>.<\/p>\n```json\n[\n {\n \"userId\": 1,\n \"id\": 1,\n \"title\": \"sunt aut facere repellat provident occaecati excepturi optio reprehenderit\",\n \"body\": \"quia et suscipit\\nsuscipit recusandae consequuntur expedita et cum\\nreprehenderit molestiae ut ut quas totam\\nnostrum rerum est autem sunt rem eveniet architecto\"\n },\n {\n \"userId\": 1,\n \"id\": 2,\n \"title\": \"qui est esse\",\n \"body\": \"est rerum tempore vitae\\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\\nqui aperiam non debitis possimus qui neque nisi nulla\"\n },\n {\n \"userId\": 1,\n \"id\": 3,\n \"title\": \"ea molestias quasi exercitationem repellat qui ipsa sit aut\",\n \"body\": \"et iusto sed quo iure\\nvoluptatem occaecati omnis eligendi aut ad\\nvoluptatem doloribus vel accusantium quis pariatur\\nmolestiae porro eius odio et labore et velit aut\"\n },\n {\n \"userId\": 1,\n \"id\": 4,\n \"title\": \"eum et est occaecati\",\n \"body\": \"ullam et saepe reiciendis voluptatem adipisci\\nsit amet autem assumenda provident rerum culpa\\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\\nquis sunt voluptatem rerum illo velit\"\n },\n {\n \"userId\": 1,\n \"id\": 5,\n \"title\": \"nesciunt quas odio\",\n \"body\": \"repudiandae veniam quaerat sunt sed\\nalias aut fugiat sit autem sed est\\nvoluptatem omnis possimus esse voluptatibus quis\\nest aut tenetur dolor neque\"\n }\n]\n```\n<\/pre>\n<\/div>\n```javascript\n\/\/ First we parse JSON into JavaScript object\nlet posts = [\n {\n \"userId\": 1,\n \"id\": 1,\n \"title\": \"sunt aut facere repellat provident occaecati excepturi optio reprehenderit\",\n \"body\": \"quia et suscipit\\nsuscipit recusandae consequuntur expedita et cum\\nreprehenderit molestiae ut ut quas totam\\nnostrum rerum est autem sunt rem eveniet architecto\"\n },\n {\n \"userId\": 1,\n \"id\": 2,\n \"title\": \"qui est esse\",\n \"body\": \"est rerum tempore vitae\\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\\nqui aperiam non debitis possimus qui neque nisi nulla\"\n },\n {\n \"userId\": 1,\n \"id\": 3,\n \"title\": \"ea molestias quasi exercitationem repellat qui ipsa sit aut\",\n \"body\": \"et iusto sed quo iure\\nvoluptatem occaecati omnis eligendi aut ad\\nvoluptatem doloribus vel accusantium quis pariatur\\nmolestiae porro eius odio et labore et velit aut\"\n },\n {\n \"userId\": 1,\n \"id\": 4,\n \"title\": \"eum et est occaecati\",\n \"body\": \"ullam et saepe reiciendis voluptatem adipisci\\nsit amet autem assumenda provident rerum culpa\\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\\nquis sunt voluptatem rerum illo velit\"\n },\n {\n \"userId\": 1,\n \"id\": 5,\n \"title\": \"nesciunt quas odio\",\n \"body\": \"repudiandae veniam quaerat sunt sed\\nalias aut fugiat sit autem sed est\\nvoluptatem omnis possimus esse voluptatibus quis\\nest aut tenetur dolor neque\"\n }\n];\n\/\/ We find the post with id 5\nlet targetPost = posts.find(post => post.id === 5);\n\/\/ We display the post on console\nconsole.log(targetPost);\n```\n<\/pre>\n<\/div>\nConclusion<\/h2>\n