5 JavaScript ''Bad'' Parts That Are Fixed in ES6
In this post, I'm going to focus on the key ES6 features that fix the ''bad'' parts of working with the language. Enjoy!
Join the DZone community and get the full member experience.
Join For FreeECMAScript 6 (ES6) features can be divided into features that are pure syntactic sugar (like: class), features that enhance JavaScript (like import), and features that fix some of JavaScript’s “bad” parts (like the let keyword). Most blogs and articles combine all three types, and can overwhelm newcomers. So, I’m writing this post that focuses on just the key ES6 features that fix “bad” parts.
I hope that by the end of this blog post, you’ll realize that by using just a couple ES6 features like let and the fat-arrow, you’ll get massive returns.
OK, Let’s get started.
1. Block Scope
ES5 only had “function-level scope” (i.e. you wrap code in functions to create scope) and caused a lot of issues. ES6 provides “block”-level scoping (i.e curly-braces to scope) when we use “let” or “const” instead of “var”.
Prevent Variable Hoisting Outside of Scope
Below picture shows that the variable “bonus” is not hoisted outside of the “if” block making it work as most programming languages.
*Note* You can click on the images for a zoomed-in view.
Prevent Duplicate Variable Declaration
ES6 doesn’t allow duplicate declaration of variables when we declare them using “let” or “const” in the same scope. This is very helpful in avoiding duplicate function expressions coming from different libraries (like the “add” function expression below).
Eliminates the Need for IIFE
In ES5, in cases like below, we had to use the Immediately Invoked Function Expression (IIFE) to ensure we didn’t pollute or overwrite the global scope. In ES6, we can just use curly braces ({}) and use const or let to get the same effect.
Babel a Tool to Convert ES6 to ES5
We need to ultimately run ES6 in a regular browser. Babel is the most popular tool used to convert ES6 to ES5. It has various interfaces like a CLI, Node-module, and also an online converter. I use the node module for my apps and use the online version to quickly see the differences.
The below picture shows how Babel renames the variables to simulate “let” and “const”!
BabelJS.io renaming variables to simulate let and const
Makes It Trivial to Use Functions in Loops
In ES5, if you had a function inside a loop (like for(var i = 0; i < 3; i++) {…}), and if that function tried to access the looping variable “i”, we’d be in trouble because of hoisting. In ES6, if you use “let”, you can use functions without any issue.
*Note* You can’t use const because it is constant unless you are using the new for..of loop.
2. Lexical "this" (Via Arrow Functions)
In ES5, “this” can vary based on “where” it is called—and even “how” it is called—and has caused all sorts of pains for JS developers. ES6 eliminates this major issue by “lexical” this.
Lexical “this” a feature that forces the variable “this” to always point to the object where it is physically located within.
The Problem and Two Workarounds in ES5
In the below picture, we are trying to print a user’s firstName and salary. But we are getting the salary from the server (simulated). Notice that when the response comes back, “this” is “window” instead of the “person” object.
ES5 — the problem and two workarounds
The Solution in ES6
Simply use the fat-arrow function => and you get the lexical “this” automatically.
Line 16 shows how to use => function in ES6
The below picture shows how Babel converts fat-arrow function into regular ES5 function w/ workaround so that it works in current browsers.
babel is converting fat-arrow to regular ES5 function w/ workaround #2
3. Dealing With Arguments
In ES5, “arguments” acts like an Array (i.e. we can loop over it), but is not an Array. So, all the Array functions like sort, slice and so on are not available.
In ES6, we can use a new feature called “Rest” parameters. It’s represented with 3 dots and a name like …args. Rest parameters is an Array and so we can use all the Array functions.
Picture shows ES6 “Rest” parameters
4. Classes
Conceptually, there is no such thing as a “Class”(i.e. blueprint) in JS like it is in other OO languages like Java. But people for a long time have treated the “function” (aka “function constructors”) that creates Objects when we use the “new” keyword as Classes.
And since JS doesn’t support the “Classes” and just simulates it via “prototypes”, it’s syntax has been very confusing for both existing JS developers and new comers who want to use it in a traditional OO fashion. This is especially true for things like: creating subclasses, calling functions in a parent class, and so on.
ES6 brings a new syntax that’s common in various programming languages and makes the whole thing simple. Below picture shows a side-by-side comparison of ES5 and ES6 classes.
ES5 vs. ES6 (es6-features.org)
5. Strict Mode
Strict Mode(“use strict”) helps identify common issues (or “bad” parts) and also helps with “securing” JavaScript. In ES5, the Strict Mode is optional but in ES6, it’s needed for many ES6 features. So most people and tools like babel automatically add “use strict” at the top of the file putting the whole JS code in strict mode and forcing us to write better JavaScript.
That’s it!
Published at DZone with permission of Raja Rao, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments