JavaScript is object based programming language where most of the work is done using functions. A function can act like a class or a function due to its prototypical nature. From the outset people felt a need for classes and used various framework which wraps class like functionality into the language. As has been a trend with all my tutorials first of all I will try to explain how to create classes with methods, properties etc. using prototype programming model and later we will jump to new way of programming classes which resembles most of the existing and old programming languages.

Let’s create a class in JavaScript with some variables like we do in other languages

<script type="text/javascript">

          //A simple class with id property
          function myClass(id){
              var id;

              function helloWorld(){

              }
          }

          //Usage . As you can see we create object using new and pass any 
          //required parameters into constructor 
          var objMyClass = new myClass(1);         
             
          console.log(objMyClass.id);
          console.log(objMyClass.helloWorld());
       

        </script>

Continue reading →

In application programming its very common to come across cases where we get return values as objects or arrays from an API call and then for logic sake we need to store them into variables.so basically deconstruction steps require:

• Declare appropriate variables
• Access data from array or objects and assign to respective variables

Automatic Deconstruction feature in ES-6 helps in overcoming lot of this redundant coding stuff. As the name suggest we need to deconstruct a complex object say array or object into variables. Let’s compare the old way of deconstruction versus the new way

Old Style Deconstruction

<script type="text/javascript">

            function returnComplexObject(){
                return {id : 1 , name:"test"};
            }

            function returnArray(){
                return [1,2,3];
            }

            //Fetch Data
            var data = returnComplexObject();
            var id = data.id;
            var name = data.name;

            console.log(id);
            console.log(name);

            var arrayData = returnArray();
            var value1 = arrayData[0];
            var value2 = arrayData[1];
            var value3 = arrayData[2];
            console.log(value1);
            console.log(value2);
            console.log(value3);

        </script>

String concatenation has been a real pain in JavaScript compared to other programming languages but ES-6 has worked around this limitation by introducing template literals which are a cool way of concatenating strings.

Continue reading →

Another handy feature that has been existing in most advanced programming languages but added into JavaScript by ES-6 enhancements is the concept of default arguments.
We already discussed a lot about functions and arguments in previous article of this series here and we have already seen that you can pass any number of parameters to a function which might be accepting one , two or n number or parameters.
We already know that a function can have either named arguments which can hold the values passed to a function or arguments object containing all the arguments passed to a function.
Let’s try to handle default values for parameters in they are not passed explicitly by developer but required by program to run.

Continue reading →

ES-6 introduced the support for immutable variables or constant variables. Constant variables are not a new concept in programming and have been in existence in most of the programming languages of today.
If while programming you come across a scenario where you don’t want somebody to change value of a variable then it makes sense to declare the variable as constant. You must understand that you cannot reassign a constant variable to a new value but in case of objects you can still be able to modify the property of objects.
Some rules accompanying a constant variable:
a.) Must be declared using const keyword
b.) Must be initialized at time of declaration
c.) Cannot change value of const once assigned
Let’s try to understand with examples

Continue reading →

Arrow functions provide lot of new enhancement apart from providing syntactic sugar to already existing JavaScript functions.
As you might already be aware, JavaScript is prototypical in nature and there are many ways you can add a function to a class. A JavaScript function itself can act like a class or a function. Here is how we can define a function

A normal function in JavaScript

Continue reading →

In below example, there are 2 variables with same name but they will be scooped differently as one of them is defined using var keyword and other is defined using let keyword.

Scenario 1: Valid test case

You can redeclare a variable in a child block

Continue reading →

Introduction to ECMA Script

As a web or mobile application developer you might already be aware of JavaScript. JavaScript has been a programmer’s favorite and lifesaver when it comes to changing Html on the fly since it runs directly on the browser. Now days, you are hearing a lot on JavaScript and corresponds frameworks that have popped up and wondering where to start with. JavaScript is evolving and is no longer object based language and you can see in new versions you can create classes, interfaces just like Java.

All the core features of JavaScript are defined in a standard widely known as ECMA-262.The ECMA-262 standards are defined in a language called ECMAScript. You should keep track of this language since most of the current programming languages are inheriting lot of features from ECMAScript. JavaScript and Node.js uses all the core features of ECMAScript and adds lot of other features on top of those feature to be as powerful a language.
The current version of ECMAScript at the time of writing the article is known as ES-2015 or ES-6. JavaScript as a language has seen lot of improvement over a course of ECMAScript upgrades. The biggest upgrade came in ES4.0 which apart from other smaller features includes the major ones like a new syntax, modularity, classes support, inheritance support, private access modifier etc.

There has been lot of improvements since then and if you want to learn any of the modern-day frameworks like Angular.Js, React.Js or Vue.js it’s a must to get started with learning ECMAScript.
In this article series, I will try to explain new features of ECMAScript and also will try to refer which features are adopted in which programming language.

Some of the features of ES-6 that we are going to discuss are:
• Scoped Variables (let vs var keyword)
• Arrow functions
• Constant Variables
• Default parameters
• Spread operators
• Rest Parameters
• Template Literals
• Destructuring
• Modules
• Classes
• Symbols
• Iterators
• Generators