The 2015 revision of ECMAScript, commonly called ES6, is one of the most important updates for the language. This update introduced new features that made JS coding more efficient and readable. Although there are a few debatable features in ES6, most of them are worth acquainting yourself with. JavaScript Here are the top ES6 syntaxes you should know about: 1. Arrow Functions Arrow functions in ES6 are a significant improvement from the previous syntax. Not only do they allow you to create anonymous functions easily, but they also provide a more concise syntax. For example: const add = (a, b) => a + b; console.log(add(2, 3)); // Output: 5 In this example, the arrow function defines the function “ ,” which takes two parameters and returns their values. add The syntax in this code is shorter compared to ES5, which would look like this: var add = function(a, b) { return a + b; }; console.log(add(2, 3)); // Outputs: 5 It is essential to note that arrow functions do not have their own “ ” since they bind to the “ ” of the parent context. This ES6 revision helps avoid serious bugs that used to occur with the traditional function syntax. this this The next code illustrates this feature: const person = { name: ‘John’, sayName: function() { setTimeout(() => { console.log(this.name); }, 1000); } }; person.sayName(); // Output: John Here, the arrow function is used as a function for the method. Since arrow functions automatically bind to the keyword of their parent context, you can access the property of the person object inside the arrow function. callback setTimeout this name 2. Let and Const and are updated ways of declaring variables, making obsolete in this work. let const var Let is used in declaring or initializing block-scoped variables, meaning they can only be accessed within their specific block. This contrasts the keyword, whose variables were function-scoped, leading to variable hoisting. let var An example of declared block-scope variable is as follows: let function example() { let x = 1; if (true) { let x = 2; console.log(x); // Output: 2 } console.log(x); // Output: 1 } We are using the keyword to declare a block-scoped variable . When we enter the block, we declare a new block-scoped variable with a value of . If we log the value of inside the block, we get . Conversely, when we log the value of outside the block, we get , the value of the outer block-scoped variable . let x if x 2 x if 2 x if 1 x The above code would look like this if it were declared using instead of : var let function example() { var x = 1; if (true) { var x = 2; console.log(x); // Output: 2 } console.log(x); // Output: 2 } Since in this code has function scope, the inner variable in the block would override the outer variable. Consequently, both statements would output rather than and as they do in the previous example. This issue can lead to bugs and unexpected behaviour, which is why and were introduced in ES6 to provide more predictable scoping rules. var x if x console.log 2 2 1 let const Const has relatively the same function as , but it declares a constant variable that cannot be reassigned. This feature can be helpful in declaring values that should not be changed, such as constants or configuration values. For example: const let const PI = 3.14159; Since is declared as a constant variable, it cannot be reassigned to a new value. PI Destructuring Assignment Destructuring assignment is an ES6 syntax that allows the extraction of values from arrays or objects and assigning them to variables in a single statement. This technique is crucial since it can simplify code significantly. For example, consider the following code written traditionally: const numbers = [1, 2, 3, 4]; const a = numbers[0]; const b = numbers[1]; const c = numbers[2]; const d = numbers[3]; console.log(a); // Output: 1 console.log(b); // Output: 2 console.log(c); // Output: 3 console.log(d); // Output: 4 With a destructuring assignment, the above code looks like this: const numbers = [1, 2, 3, 4]; const [a, b, c, d] = numbers; console.log(a); // Output: 1 console.log(b); // Output: 2 console.log(c); // Output: 3 console.log(d); // Output: 4 As you can see, without destructuring assignment, you must manually assign each value to a separate variable using array index notation, which can be highly problematic when working with larger arrays or more complex data structures. Using destructuring assignment to extract the values from the numbers array and assign them to variables , , , and results in a more concise and readable code. a b c d Template Literals Template literals allow you to embed expressions inside a string, making creating dynamic and complex strings easier. They can be handy when working with dynamic content, such as building SQL queries. Moreover, they can help simplify code by reducing the need for complex string concatenation. For example: const firstName = 'Sam'; const lastName = 'Walter'; const age = 30; // Without template literals const greeting = 'Hello, my name is ' + firstName + ' ' + lastName + ' and I am ' + age + ' years old.'; // With template literals const greeting2 = `Hello, my name is ${firstName} ${lastName} and I am ${age} years old.`; console.log(greeting); // Output: “Hello, my name is Sam Walter and I am 30 years old.” console.log(greeting2); // Output: “Hello, my name is Sam Walter and I am 30 years old.” Here, template literals generate a string that includes the values of , , and . The resulting code is much more concise and easier to read than the equivalent code using string concatenation. firstName lastName age Spread Operator The spread operator is a useful ES6 syntax that allows you to spread the elements of an iterable (e.g. an array) into a new array or function call. For instance: const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const mergedArr = [...arr1, ...arr2]; console.log(mergedArr); // Output: [1, 2, 3, 4, 5, 6] function sum(a, b, c) { return a + b + c; } const nums = [1, 2, 3]; console.log(sum(...nums)); // Output: 6 In the first code, the spread operator concatenates two arrays into a new array. In the second example, it is used to pass the elements of the nums array as individual arguments to the sum function. Conclusion ES6 introduced several essential syntaxes to help you write more efficient and readable code in JS. Here, we have explored some critical syntaxes you should know as a beginner, including and keywords, arrow functions, template literals, destructuring, and the spread operator. By mastering these features, you will be well on your way to becoming a better JS programmer. let const Also published here. Lead image by Gabriel Heinzer on Unsplash.
