JavaScript ES 6 – New Features: Overview & Comparison

CMAScript 6 was JavaScript’s second main revision.  ES6 and ECMAScript 2015 are other names for ECMAScript . This article covers the most critical aspects of ES6.

Variables

JavaScript let

The difference is in the scope. If var returns a variable with the surrounding function as its scope, let returns a variable with only the block it is in as its scope.

if(true) {
   let x = 10;
}
console.log(x); // undefined

The let keyword allows you to declare which value can be changed.

let x = 10 // x is 10
x = 6 // x is 6

JavaScript const

You can declare a constant using the const keyword (a JavaScript variable with a constant value). Constants are identical to let variables in that their value cannot be changed.

const x = 10 // x is 10
x = 9 // error you cannot reassign const

Arrow Functions

Arrow functions are a fantastic contribution to the JavaScript programming language. They result in code that is brief and to the point. We’re going to introduce arrow functions early in this essay so that we can include them in other instances later on. The following code snippet indicates an arrow feature written in the popular ES5 style:

let movies = [{title: 'X', rating: 5},
             {title: 'Y', rating: 4}];

let rating = movies.map( movie => movie.title );

// ES5 equivalent:
var rating = movies.map(function(movie) {
   return movie.title;
});

When an arrow function is used for a single line statement, it becomes an expression, which means it can return the outcome of the single statement indirectly. If you have more than one line, you must directly use return.

Strings

The String version now has a couple of handy tools. To achieve the same result, most of them simply eradicate any workarounds with the indexOf() method:

'any string'.startsWith('any'); //true
'any string'.endsWith('any'); // false
'any string'.includes('str'); // true

Another simple string method for creating repeat strings.

'temp '.repeat(3); // 'temp temp temp '

TEMPLATE LITERAL

A way to output variables in the string.

var name = `My name is ${first} ${last}.`
var temp = `This is temp ${tempName}`

Multi-line Strings in ES6

To use multi-line string in ES6 simply utilize the backticks:

const lorem = `Lorem ipsum, or lipsum as it is sometimesknown, is dummy text used in laying out print, graphics`

Spread Operator

The spread operator (...) is a very convenient syntax to expand elements of an array in specific places

let numbers = [1, 2, 4];
let extraNumber = [...numbers, 8]; // [1, 2, 4, 8]
let moreNumber = [...numbers, 8, ...extraNumber]; // [1, 2, 4, 8, 1, 2, 4]

Summary of ES6 Things

Personally, I think that being able to use new ES6 features like modules, arrow functions, and rest parameters with ease is a comfort and a major change to my own coding. More ES6 goodness would naturally follow now that I’m happy writing in ES6.


Author Images
Syed
From Islamabad

A software developer with a keen interest in writing about technology, finance, and entrepreneurship. I've written for businesses in a variety of fields, including new technology, healthcare, programming, consumer applications, corporate computing, UI/UX, outsourcing, and education.

Post a comment

Your email address will not be published. Required fields are marked *

    Press x to close