What’s new in ECMAScript 2016 / ES 7

Since ES6 has released, we have discussed the interesting features in our site earlier in the ECMAScript 6 tag. ES 6 release contains lots beautiful features like arrow functions, template literals, destructuring, default parameters, etc.

Now, its time experiment and explore es-next – ECMAScript 2016 / ES7 🙂

I shall make a separate post on this name convention of the release later. Now let’s stick with discussion of features.

Ecma Technical Committee 39 governs the ECMA specification. They follow certain stages to handle the proposals, starts from stage 0 to stage 4. The proposals which reached the stage 4 are the finished proposals. ES7 included support for a new exponentiation operator and adds a new method to Array.prototype called includes.

Let’s discuss the following two features in this post:

  1. Array.prototype.includes
  2. Exponentiation operator

 

Array.prototype.includes

The formal syntax of includes is

Array.prototype.includes ( searchElement [ , fromIndex ] )

where fromIndex is optional.

includes compare searchElement to the elements of the array, in ascending order, using the SameValueZero algorithm, and if found at any position, returns true; otherwise, false is returned.

The optional second argument fromIndex defaults to 0 (i.e. the whole array is searched). If it is greater than or equal to the length of the array, false is returned, i.e. the array will not be searched. If it is negative, it is used as the offset from the end of the array to compute fromIndex. If the computed index is less than 0, the whole array will be searched.

Earlier, I have used indexOf to check whether the particular element is present in the array or not. Now, using includes we can directly validate the same in conditional loops.

The includes function is intentionally generic; it does not require that its this value be an Array object. Therefore it can be transferred to other kinds of objects for use as a method.

The includes method intentionally differs from the similar indexOf method in two ways. First, it uses the SameValueZero algorithm, instead of Strict Equality Comparison, allowing it to detect NaN array elements. Second, it does not skip missing array elements, instead of treating them as undefined.

Examples:

assert([1, 2, 3].includes(2) === true);
assert([1, 2, 3].includes(4) === false);

assert([1, 2, NaN].includes(NaN) === true);

assert([1, 2, -0].includes(+0) === true);
assert([1, 2, +0].includes(-0) === true);

assert(["a", "b", "c"].includes("a") === true);
assert(["a", "b", "c"].includes("a", 1) === false);

 

Exponentiation operator

ECMAScript 2016 introduced the exponentiation operator, **.

We already have the operator of addition +, subtraction -, multiplication *, division /. Now its time to experiment the exponentiation operator **.

It operates similarly to Math.pow()

 

Experiment the above new features, and let me know your feedback on the comment section.

Happy Coding!

 

Getting started with Angular 4

I’m really excited about learning Angular 4. Whenever I started to learn some new technologies, all I do is making a quick start on something immediately. In this post, we are going to discuss how to setup development environment and create an initial angular app.

Whenever I’m creating a new application, I always prefer some standard folder structure or use file generator like Yeoman.

OK, that’s all about the base story. A quick start tool always helps the developer to save their valuable time and use those time efficient way on improving the quality of the application.

Angular provides us Angular CLI which is a command line interface tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

Using this CLI, we can create apps with a working condition which uses best practices suggested by Angular Team.

To create an Angular application using Angular CLI, all we need is to follow the below steps:

1. Install Node js and npm on your machine.

Visit Node.js web page and download installer. Once you’ve installed nodejs, the npm will get installed along with it.

2. Verify the compatible version

Angular CLI requires the minimal version of node 6.9.x and npm 3.x.x.

We can check the version of node and npm using following commands.

node -v

npm -v

npm

3. Install Angular CLI

Run the following command to install Angular CLI globally.

npm install -g @angular/cli

-g flag is used to install the package globally in the npm.

Once we installed CLI globally, we can confirm whether the tool installed successfully by using the following command.

ng -v

 

4. Create a project

Now, creating a project becomes very simple. We have to run following command,

ng new cool-app

  • cool-app is the name of the project.

 

new-app

Once the files has been created, the CLI will start installing npm packages automatically. Wait until the packages getting installed, it will take a bit of time to complete the process.

The folder and file structure will looks as follows

code_ng-app4.png

5. Serve the application

Once the dependencies are installed, traverse to the created projected and serve the application using the following commands.

cd cool-app

ng serve –open

The ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those files.

Using the –open (or just -o) option will automatically open your browser on http://localhost:4200/.

The default page will gets open with the greeting message.

 

CoolApp.png

 

We can edit the source further based our needs, I’m planning to write series of posts on Angular 4 in upcoming day.

Stay connected and Keep supporting. 🙂

Happy Coding!