5 JavaScript “Bad” Parts That Are Fixed In ES6

rajaraodv
rajaraodv
May 13, 2016 · 6 min read

ECMAScript 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 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

Prevent Variable Hoisting Outside of Scope

Note: You can click on the pictures to zoom and read

Prevent Duplicate Variable Declaration

Eliminates The Need For IIFE

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.

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

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)

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:

ES5 — the problem and two workarounds

The Solution in ES6

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 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

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 wants to use it in a traditional OO fashion. This is especially true for things like: creating subclasses, calling functions in 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.

Note: You can click on the picture to zoom and read

ES5 Vs ES6 (es6-features.org)

UPDATE: Be sure to read: Is “Class” In ES6 The New “Bad” Part? (after this)

5. Strict Mode

That’s it! 🙏

If this was useful, please click the clap 👏 button down below a few times to show your support! ⬇⬇⬇ 🙏🏼

My Other Posts

ECMAScript 2015+

  1. 5 JavaScript “Bad” Parts That Are Fixed In ES6
  2. Is “Class” In ES6 The New “Bad” Part?

Terminal Improvements

  1. Jazz Up Your “ZSH” Terminal In Seven Steps — A Visual Guide

WWW

Virtual DOM

React Performance

  1. Using Preact Instead Of React

Functional Programming

  1. Functional Programming In JS — With Practical Examples (Part 1)
  2. Functional Programming In JS — With Practical Examples (Part 2)
  3. Why Redux Need Reducers To Be “Pure Functions”

WebPack

  1. Webpack & Hot Module Replacement [HMR] (under-the-hood)
  2. Webpack’s HMR And React-Hot-Loader — The Missing Manual

Draft.js

  1. How Draft.js Represents Rich Text Data

React And Redux :

  1. A Guide For Building A React Redux CRUD App (3-page app)
  2. Using Middlewares In React Redux Apps
  3. Adding A Robust Form Validation To React Redux Apps
  4. Securing React Redux Apps With JWT Tokens
  5. Handling Transactional Emails In React Redux Apps
  6. The Anatomy Of A React Redux App
  7. Why Redux Need Reducers To Be “Pure Functions”
  8. Two Quick Ways To Reduce React App’s Size In Production

If this was useful, please click the clap 👏 button below a few times to show your support! ⬇⬇⬇ 🙏🏼

We’ve moved to freeCodeCamp.org/news

We’ve moved to https://freecodecamp.org/news and publish tons of tutorials each week. See you there.

We’ve moved to freeCodeCamp.org/news

We’ve moved to https://freecodecamp.org/news and publish tons of tutorials each week. See you there.

rajaraodv

Written by

rajaraodv

Trying to make Web development simple. Former Developer Advocate @Salesforce, VMware (node.js); Engineer @ Yahoo, Zimbra. Twitter: @rajaraodv

We’ve moved to freeCodeCamp.org/news

We’ve moved to https://freecodecamp.org/news and publish tons of tutorials each week. See you there.