Skip to content 
Writing code for the web prior to 2015 using JavaScript likely involved a great deal of struggle. Prior to the release of JavaScript ES6 features (a major update), many developers were forced to battle “var hoisting” issues, concatenate strings with an unending number of “+” signs, and write long and cumbersome function expressions which cluttered the developer’s code base.
ES6 features introduced a significant amount of new syntax and capabilities, addressing each of these common challenges. While ES6 represents a large update to JavaScript, the fundamental syntax of the language remains the same. Therefore, developers do not need to relearn an entirely new programming language. Rather, developers can simply begin utilizing new methods of coding which result in improved cleanliness, predictability and overall quality within their code bases.
Mastering JavaScript ES6 features involves understanding and adopting the improved cleanliness and predictability offered by all of the modern syntax options available today. To help illustrate this point, let us examine five of the most important aspects of JavaScript ES6 features that will allow you to transition from writing JavaScript code based upon what existed in 2010 to fully utilizing the benefits of modern syntax.
Let and Const in JavaScript ES6 Features
Prior to ES6, the only option developers had for declaring variables was via ‘var’. Unfortunately, ‘var’ has a few characteristics that cause many problems for developers. First, ‘var’ is function scoped. This means that a variable declared inside a block such as an if statement or a for loop leaks outside of that block into the surrounding function. Second, ‘var’ hoists. This means that regardless of whether or not you attempt to reference a variable before its declaration line, you will always receive ‘undefined’, which is typically considered worse since it silently fails.
In response to the problems caused by ‘var’, ES6 introduced two new options for declaring variables: ‘let’ and ‘const.’ Both ‘let’ and ‘const’ are block scoped. Variables declared using either of these keywords exist only within the nearest set of curly braces. As a result, neither keyword causes the kind of problems seen with ‘var,’ primarily due to their ability to prevent accidental leakage from blocks into surrounding functions.
A primary differentiator between ‘let’ and ‘const’ is how often they are reassigned. When a value needs to be reassigned, use ‘let.’ Otherwise, use ‘const.’
The general rule of thumb is to default to ‘const’ unless you specifically intend to reassign a value. Using ‘const’ communicates your intentions clearly to others who may read your code, while minimizing the amount of mental overhead developers face.
Overall, this straightforward change in how developers choose to declare variables is among the biggest immediate wins in adopting ES6 features.
Arrow Functions Provide Cleaner Syntax & Lexical “this”
One of the first features of JavaScript ES6 that developers began using en masse was arrow functions. One reason for this rapid adoption was the ease-of-use provided by the concise syntax. For example, instead of writing function(x) { return x * 2;}, you could write x => x * 2. The use of arrow functions does not merely reduce the amount of keystrokes you type. Arrow functions provide a cleaner way to express code so that readers can focus on the actual logic rather than having it lost amongst boiler plate code.
However, perhaps the greatest advantage of arrow functions is how they handle “this.” Traditionally, “this” is determined by how a function is called. However, it can change unpredictably, especially when developers pass methods around as callbacks. Over the years, developers have written countless instances of var self = this; or .bind(this) solely to preserve context.
Unlike traditional functions, arrow functions do not have their own “this,” but instead inherit “this” from the surrounding lexical scope. As a result, if a developer defines an arrow function inside of a method, it will see the same “this” as the method itself. Because preserving context is crucial in applications such as React components and event handlers, this capability is extremely valuable.
Although arrow functions have several limitations namely, they cannot be used as constructors and do not possess a prototype property, they are ideal for most day-to-day uses of functions. Furthermore, because arrow functions do not possess an arguments object, developers wishing to emulate this functionality can utilize rest parameters. Nevertheless, for the vast majority of typical usage scenarios, arrow functions will generally prove preferable to traditional function expressions.
Template Literals Eases String Manipulation
String concatenation in older versions of JavaScript is far from an easy task. It requires copious amounts of plus signs and numerous escapes for quotes. Creating a multi-line string necessitates awkward backslashes or array joins. Finally, inserting variables into strings results in the necessity to break the string apart and glue it back together again with “+”. While it worked sufficiently well from a functional standpoint, it was never particularly elegant.
JavaScript ES6 introduces template literals, which replace old-fashioned strings with those delimitated by backticks (“). Template literals permit developers to inject arbitrary JavaScript expressions into strings using `${expression}`. Thus, you can include variables directly into strings without breaking out of strings. Additionally, you can call functions or execute complex logic in the midst of your sentences.
Strings spanning multiple lines are significantly simplified as well. Simply press enter and continue typing. Line breaks are preserved precisely as you typed them with no additional special characters required.
Finally, template literals also support tagged templates. Tagged templates allow developers to process template literals with a custom function. Tagged templates open opportunities for developing Domain Specific Languages (DSLs), internationalizing strings, or employing Styled Components in libraries such as Emotion. Although you may never write a tagged template yourself, you certainly benefit from tagged templates whenever you employ a CSS in JS library.
Destructuring Assignments Makes Value Extraction Easy
Extraction of values from objects and arrays previously required multiple lines of redundant assignments. You would write something like `var name = user.name;` `var age = user.age;` `var email = user.email;` for every property you desired. Functional but verbose.
Another important addition to JavaScript ES6 features is Destructuring Assignment (DA). DA collapses the repetition inherent in extracting values from objects and arrays into a single elegant line. With object destructuring, developers can extract properties from an object and assign them automatically to variables with identical names using the following syntax:
```javascript
const {name ,age ,email} = user;
```Property renaming is also possible during extraction by including a colon after the property name followed by the desired name. Renaming is beneficial when avoiding naming conflicts between properties.
Similarly, Array Destructuring extracts elements from arrays using bracket notation as follows:
```javascript
const [first ,second ,third] = myArray;
```This syntax becomes particularly useful when dealing with functions returning multiple values encapsulated in an array, or when swapping variables without requiring a temporary placeholder.
As noted earlier in this post regarding the benefits of using destructuring with function parameters, DA offers substantial advantages when utilized with function parameters. By allowing developers to deconstruct an input object or array directly within the parameter list of a function, DA clarifies expectations regarding input format while eliminating redundant boilerplate code. For further information on DA patterns along with examples illustrating edge cases related to array and object destructuring refer to freecodecamp’s tutorial entitled “destructuring-in-javascript”.
Spread and Rest Operators Unite Collection Handling
The Spread Operator (`…`) and Rest Parameter (`…`) syntaxes share the exact same syntax – three dots. However, they serve opposite purposes. Familiarity with how these two operators interact is crucial to properly applying both.
The Spread Operator takes an iterable and expands it into individual elements. You use the Spread Operator when you wish to pass an array as separate arguments to a function or when you desire to create a new array comprised of existing arrays. In addition, the Spread Operator facilitates creating shallow copies of objects and arrays without altering original data – a pattern that serves as a cornerstone for current state management methodologies such as Redux.
On the contrary, Rest Parameters collect multiple individual elements and bundle them into a single array. You utilize Rest Parameters in function definitions when you are unsure how many arguments will be passed into said function. Instead of resorting to the obsolete arguments object, you can declare a function as follows:
```javascript
function sum (...numbers)
```Inside this function, `numbers` can be treated as any standard array.
Both operators operate identically on arrays and objects. Array Spread was introduced prior to Object Spread; however, both are now widely supported in production environments. Object Spread permits developers to elegantly merge objects or generate modified copies of objects containing only specified properties altered. The latter replaces utilization of Object.assign in nearly all contemporary application development environments.
Conclusion
JavaScript ES6 features represent the largest advancement in JavaScript’s history. In this article we examined five key concepts that enable developers to transition from writing JavaScript similar to that created in 2010 to maximizing the potential benefits from using modern JavaScript syntax.
These five concepts include: block-scoped variable declarations using let and const to resolve issues with var hoisting; arrow functions providing cleaner syntax and predictable this bindings; template literals offering a fun alternative to manual string manipulation; destructuring assignment facilitating efficient extraction of values from objects and arrays; and finally spread and rest operators enabling collection handling in an elegant manner.
By mastering these five concepts alone, you can dramatically improve your approach to writing JavaScript-based code, reducing redundancy in your code while producing cleaner and less prone to errors. Ultimately, embracing JavaScript ES6 features is not about adopting new syntax for its own sake. It is about creating more maintainable and readable code that adheres to modern standards established for JavaScript.
New to HTML? Start Here: HTML Tutorial for Beginners: Your Complete Introduction to HTML Basics
New to CSS? Start Here: CSS Introduction: Master 5 Core Concepts Easily
New to JavaScript? JavaScript Introduction: 5 Proven Steps to Learn JS
[INSERT_ELEMENTOR id=”122″]
