Author: Roshni Devadiga

Features of ES6(Ecmascript 6)

Features of ES6(Ecmascript 6)

What is Ecmascript 6(ES6)?

Ecmascript 6 or popularly known as ES6 is the latest released specification of ecmascript that powers javascript. It was released in 2015. Hence it is also known as ES2015. It is not currently supported by all major browsers, but you can use Babel which is a javascript compiler which converts the es6 code and makes it compatible with es5 supporting browsers.

Features of ES6

ES6 offers loads of cool features which are inspired from other programming languages.Let us dive into the details of what ES6 has in store for us.

1. Introduction of ‘let’ keyword:

The var keyword that we used earlier in javascript had only function scope.  But es6 has introduced a ‘let’ keyword which brings block scoping to javascript like the other programming languages like php and java.

With block scope the problem of variable hoisting is avoided. Variable hoisting is a concept in which a variable declared within a function gets moved upwards towards the beginning of the scope which is the function block. One thing to note is that only the variable declaration gets moved to the beginning of the scope whereas the definition stays as it is.

Take the following example:

function test(flag)
{
    if(flag==true)
    {
        var variable1 = 'I am variable 1';
        console.log(variable2);//Undefined
    }
    else
    {
        var variable2 = 'I am variable 2';
    }
    console.log(variable2);//Undefined
}
test(true);

Here var variable1, var variable2 will be hoisted to the top at the beginning of the function. Hence when  we try to access the variables when it is not defined, it throws an undefined error and does not terminate the program. This can be dangerous and misleading.

ES6 has therefore provided a ‘let’ keyword which helps to resolve this scope related issues and issues due to variable hoisting. Simply replace the ‘var’ with ‘let’ keyword and the above code will  throw a reference error as expected like it does for other programming languages.

2. Constants:

ES6 allows you to define constant using const keyword which cannot be changed. Changing this will throw an error. Constants also have block scope. But you cannot redefine a constant within another block as well. But you can define a constant with the same name in another block since in this case it will be considered as an altogether new constant.

const test = 'John';

3. JavaScript Templating:

Templating in es6 makes code much neater. You can directly print the variable as using a back tick. You can also carry out computations like multiplication using templating.

let var1 = 10;
let var2 = 20;
document.write(`${var1} ${var2}`);
document.write(`${var1 * var2}`);

4. Dynamic functions with …

This is somewhat similar to the arguments array that javascript provided. You can define a function with 3 trailing dots before the argument

5. Repeat n number of times:

To repeat a string n number of times you can simple call the repeat function on it and provide the number of times to repeat as an argument

let name = 'John';
console.log(name.repeat(3));

6. Miscellaneous string functions:

startsWith function checks if the string starts with the string given in the argument. endsWith function checks if the string ends with the string given in the argument. Includes function checks if the string includes a string given in the argument.

let Fname = 'testab';
Fname.startsWith('ab');//False
Fname.endsWith('ab');//True
Fname.includes('ab');//True

These are just a few features. Will update this post soon. So keep tuned!

Design Patterns in Javascript

Design Patterns in Javascript

What is a design pattern?

A design pattern in general refers to a commonly accepted general solution to a wide range of commonly occurring problems. They are the best solutions known so far for specific types of problem scenarios. When these specific types of problems occur, the best way to deal with it is the application of that specific design pattern.

Design patterns help make our task easier by facilitating proper structuring of code which helps solve all the scenarios/test cases of that particular problem. Design patterns are not restricted to any language. They are a common practice which can be applied to wide range of languages mainly the language which supports object oriented paradigm. Though JavaScript is not a completely object oriented currently(It will be from ES6 onwards), it has powerful concepts like prototype inheritance and closures which help us in implementing design patterns effectively.

Read More Read More

Difference between apply, call and bind method in javascript

Difference between apply, call and bind method in javascript

Javascript provides various ways by which we can invoke a function. Some of the functionalities javascript provides is facilitating the use of apply, call and bind to invoke a function.

All these three are used to invoke a function with a set of parameters. The difference between these types of invocation is the type of parameters supplied to the respective method.

Read More Read More

Currying in javascript

Currying in javascript

Currying is a very important concept which is found in a lot of programming languages. For example, Scala has a native currying function.

What is currying?

Currying in programming language means partial execution of a function. In simple words, currying means breaking down a function which takes more number of arguments into series of functions which take lesser arguments. The results of these functions are stored so that the every time you want to add some more arguments in the processing of the main function, you don’t have to do it from scratch. You have the results of previous function executions to which you can add newer arguments and get your task executed.

Read More Read More

Promises in Javascript

Promises in Javascript

If you belong to the group of people who have heard about promises but do not know what it is, then you have landed at the right place.

What is a promise?

Promise is like a proxy object that represents a value that will be available at a future point of time. This object will be available as a result of some asynchronous computation, asynchronous call to an api or any operation that will happen in near future, the value of which is not known at the given point of time.

Read More Read More

Closures in javascript

Closures in javascript

Closures is a very important concept in javascript which you will find mentioned almost everywhere. Closures help you in achieving a wide range of features.

What is a closure?

Closure is a concept in which one function is enclosed within another function. This inner function has access to the outer functions variables and parameters. It has access to its own variables and parameters as well as the global variables. However it does not have access to the outer functions ‘this’ object and the arguments object.

Read More Read More

Angular js vs angular 2

Angular js vs angular 2

Angular js was introduced in 2009 as framework to develop single page applications, popularly known as SPA’s. From here it has come a long way and has become an integral part and is widely used in today’s web applications.

Angular 2 was introduced in 2014. Angular 2 is different from angular js in a variety of advanced features and the way things are handled.

Read More Read More

Create a download functionality in php

Create a download functionality in php

Php has a huge set of features to implement almost anything that you see across the internet. One of the common functionalities that you can find especially in dashboards is the functionality to download reports mainly in xls or csv format.

In this article I will show you how to implement this functionality using php and javascript/jquery.

Read More Read More