Transpile ES6 code to ES5 using Babel

After reading this I hope now we know what actually is ECMAScript or ES-5, ES-6 or ES-2015.

ECMAScript 6, also known as ECMAScript 2015, is the latest version of the ECMAScript standard. ES6 is a significant update to the language, and the first update to the language since ES5 was standardized in 2009. Implementation of these features in major JavaScript engines is underway now

As mentioned that all browsers are currently not supported ES6 features so we would need a transpiler like BABEL (Babel is a compiler. At a high level, it has 3 stages that it runs code in: parsing, transforming, and generation) or TRACEUR to convert ES6 code to ES5 so that all browsers can understand and execute ES6 code.

System Setup –

We can use babel built-in CLI or any build systems like grunt, gulp or webpack to load babel transpiler. Lets do system setup with both built ins CLI and gulp to convert ES6 code to ES5. I am assuming you have already installed Node in your machine 🙂

  1. Using Babel CLI :

    Below are the steps to create a sample application (ES6_to_ES5_using_babel) using ES6 code.

    • Create a folder at your preferred location. In my case this is –D:\git_public\es6_to_es5_using_babel/using-babel-cli
    • Create a JavaScript file index.js with some ES6 code like below. I am putting all my ES6 code files into scripts folder.
      let greet = () => {
              alert(‘Hello, Welcome to ES-6 world!’);
    • Open command prompt and type below commands-
      • cd D:\git_public\es6_to_es5_using_babel\using-babel-cli
      • > npm init
        • This will ask you a bunch of questions, and then write a package.json file for you
      • > npm install babel-cli –save-dev
        •  It will install the babel-cli as local package and save it in the package.json file. The local package installs the commands to the node_modules/.bin folder and these commands can be accessed using the scripts section of the package.json file.
      • Add the below code in the package.json file to run babel command to convert index.js file into ES5 code. We can also configure babel to compile all files at once or with many more options as mentioned here
        “scripts”: {
             “transpile”: “babel scripts/index.js –out-file scripts/index-transpiled.js”
      • All set, now run the below command to transpile code-
        > npm run transpile
      • YAY… index-transpiled.js file is created under scripts folder. Now see what is in this file. Is this same as ES6 code ? Yes, babel did not transpile our code to ES5. Why? because Babel doesn’t do anything. It basically acts like const babel = code => code; by parsing the code and then generating the same code back out again. We will need to add some plugins for Babel to do anything (they affect the 2nd stage i.e transformation).
      • As currently we are using ES6 only arrow function in our code so to understand lets install the only plugin to convert arrow function to ES5 compatible code.
      • > npm install babel-plugin-transform-es2015-arrow-functions -D
        • We can make it available to babel through its configuration file i.e .babelrc (recommended) or directly in the package.json file
      • So create .babelrc file in the root directory and add required plugins
            “plugins”: [“transform-es2015-arrow-functions”]
      • Now again run the command-
        >  npm run transpile
      • Now see in the transpiled file. YAY…  code is converted to ES5 code-
        let greet = function () {
             alert(‘Hello, Welcome to ES-6 world!’);
      • Now, as there are many features in the ES6 and it would be bit difficult to install plugin for each as we did for arrow function. How to solve this problem so we can use all ES6 features instead of installing plugin/package for each feature? To solve such kind of problems presets comes in the picture. Presets are sharable configurations or simply an array of plugins. If we will install a preset then it will automatically install all dependent plugins/packages. 
      • To compile code from ES6 to ES5 we haveES2015 preset which have all required plugins. So lets uninstall the plugin for arrow function which we installed earlier and install ES2015 preset.
      • > npm uninstall babel-plugin-transform-es2015-arrow-functions -D
      • > npm install babel-preset-es2015 -D
      • Now make all the ES6 plugins available to babel via .babelrc config file in the form on presets.

             “presets”: [“es2015”]
      • Now you are all set to use any ES6 feature using babel cli…. Source code can be found here….
  2. Using Gulp –

    Gulp and Grunt are widely used as task runners in front-end applications. They make it easy to configure and run tasks to perform many of the tasks that we otherwise had to perform manually. Babel has packages for both Grunt and Gulp that can be used to achieve everything that is achievable through the commands that we saw in using babel-cli.
    First things first, let’s install the required npm packages to perform Babel’s tasks with Gulp and to use require.js with Gulp. Following are the packages we need-

    • > npm init
    • > npm install gulp -g

      • Installing gulp globally so we can run gulp command directly from command prompt instead of writing script in package.json.
    • > npm install gulp-babel -D
    • > npm install babel-core -D
    • > npm install babel-preset-es2015 -D
    • Create gulpfile.js file
      var gulp = require(“gulp”);
      var babel = require(“gulp-babel”);
      gulp.task(“transpile“, function() {
    • Create .babelrc file
           “presets”: [“es2015”]
    • > gulp transpile
    • YAY…. ES6 code transpiled and put into the dist folder.

Programming is Easy…


Bower VS NPM

If you are confused between Bower and NPM then this is definitely for you. In short Npm and Bower are both Project dependency management tools. Below are some basic differences between these two-

  • Used for-
    • NPM is most commonly used for managing Node.JS modules, but it works for the front-end too when combined with Browserify etc..
    • Bower is front-end Package Manager and used for managing front end components jQuery, Bootstrap and so on.
  • Dependency-
    • NPM does nested dependency tree means packages we added in our project can also be dependent on other dependencies and those can further have more dependencies and so on. So, NPM installs dependencies for each package separately, and as a result makes a big package dependency tree(node_modules\babel-core\node_modules\…) where there could be several version of the same package.  For client-side JavaScript this is unacceptable: you can’t add two different version for jQuery or any other library to a page.The reason many projects use both is that they use Bower for front-end packages and npm for developer tools like Yeoman, Grunt, Gulp, JSHint, CoffeeScript, etc.
    • Bower requires a flat dependency tree No nested versioning of packages. With Bower each package is installed once (jQuery will always be in the bower_components/jquery folder, regardless of how many packages depend on it) and in the case of a dependency conflict, Bower simply won’t install the package incompatible with one that’s already installed.

Programming is Easy…

How Logical Operators work in JavaScript?

Let’s understand the Logical Operators and how they work in JavaScript…

  1. Logical AND (&&)
  2. Logical OR (||)
  3. Logical NOT (!)

Logical operators are typically used with Boolean values but can also be used with non-Boolean values-

=> When values are Boolean then they return a Boolean value

=> When values are non-Boolean then they may return a non-Boolean value. In this case && and || operators actually return the value of one of the specified operands



Programming is Easy…


What is ES-5, ES-6 or ES2015 and TypeScript? [ES = ECMAScript]

Before discussing ES5 or ES6 let’s discuss what actually is ECMAScript-

ECMAScript is a standard, JavaScript is an implementation of that standard. ECMAScript defines the standard and browsers implement it.

In a similar way, HTML specifications (most recently HTML5) are defined by the organising body and are implemented by the browser vendors. Different browsers implement specifications in different ways, and there’s varying amounts of support for different features.

  1. ES5-  ES5 is the JavaScript we know today and use in web applications. It does not require a build step to transform it into something that will run in today’s browsers.
  2. ES6 – Also called ES2015 is the next iteration of JavaScript with many enhanced features( but it does not run in today’s browsers. So we need a transpiler like Babel that will export ES5 code means it will compile ES6 code to ES5 code that today’s browsers support and can be run easily in the today’s browsers.
  3. TypeScript – TypeScript is a typed superset of JavaScript that also compiles to plain JavaScript. This is pulling in features from ES6, ES7… Or future’s JavaScript. It help us to write safe JavaScript code means mistakes in JavaScript code can be noticed at development time due to it’s compile feature. As this is the superset of JavaScript so it contains JavaScript and some additional features as well.


We can view the all latest specification at-

ECMAScript –

ES2015 or ES6 –

ES2016 –

ECMA Proposals-



What is “this” value in JavaScript?

In JavaScript a function’s this keyword value is –

  1. determined by how a function is called. 
  2. never static and has a different value depending on how the function was invoked.

Below are the this values in different execution context- 

  • Global Context– In the global execution context (outside of any function), this refers to the global object, whether in strict mode or not.
  • Function Context – If code is not in strict mode, and because the value of this is not set by the call, this will default to the global object- In strict mode, however, the value of this remains at whatever it was set to when entering the execution context, so, in the following case, this will default to undefined 
    So, in strict mode, if this was not defined by the execution context, it remains undefined.
  • Custom value- To pass this value from one context to another we can use call or apply functionsWhere a function uses the this keyword in its body, its value can be bound to a particular object in the call using the call or apply methods which all functions inherit from Function.prototype

What is the difference between attributes and properties in HTML/JAVASCRIPT ?

The difference is that,  the  prop  method deals with properties defined by the Dom  ApI  HTMLElement  object,  rather than attributes defined by the  htmL element in markup.

Often,  the attributes and properties are the same,  but this isn’t always the case.  A simple example is the  class  attribute,  which is represented in the  HTMLElement  object using the  className  property.

In general,  the  prop  method is the one you should use because it returns objects that are easier to work with than attribute values.

Programming is Easy !!!!

What is Undefined and Null in JavaScript?

Many people get confused with the difference between undefined and null.  In truth, it’s quite simple to see how it works.

=》Undefined is the default value assigned to any variable.
So, if I created a variable as follows and printed its value, it would be undefined.

var initialVariable;

=》Null has to be assigned by the programmer to empty a variable and is not a default value.

var initialVariable = ‘hello’;
initialVariable = null;

Both of these types are considered primitive data types in the JavaScript world.

Programming is Easy….