JavaScript Version — ES6 Features

Image by Nishma Mohideen on Canva

Introduction

Brendan Eich established JavaScript in 1995, and it became an ECMA standard in 1997.

ECMA stands for European Computer Manufacturer’s Association.

Languages such as ECMAScript, Dart-lang, and C# were standardized by ECMA.

ECMAScript and JavaScript

ECMAScript known to be a general purpose programming language. It is a trademarked scripting specification that is used for client-side scripting of the World Wide Web and it is also used for writing server applications and services by using Node.js.

The language’s official name is ECMAScript. Also means, JavaScript is an implementation of the ECMAScript standard.

ECMAScript versions have been streamlined, to ES1, ES2, ES3, ES5, and ES6.

JavaScript Versions ES5 and ES6

ES5 is also known to be ECMAScript 5 and it was introduced in 2009.

ES6 the sixth edition of ECMAScript standard and was introduced in 2015. It can be referred as ECMAScript 2015.

With ES6 it is possible for us to write clean, readable and modernized code.

With the usage of ES6 syntaxes and various other features it is possible to minimize the lines of code and write or transform code into more understandable manner.

Now, you may even raise a couple of questions to yourself like:

“Should I start off with ES6 JavaScript standard as a beginner directly?”

The answer is NO. If you are a complete beginner to JavaScript, you may be in the process of learning the fundamentals of JavaScript and its concepts, so it is best to start with ES5. However, if you are coding or intend to use JavaScript Frameworks such as React.js, it is best to start with ES6 because switching to frameworks such as React may be relatively simple.

“Is it possible to switch from ES5 to ES6 directly?”

The answer is of course, YES! Almost everything that ES5 can do can be done with ES6, but there is a difference in syntax in order to make things easier in ES6.

ES5 vs ES6 Syntaxes and Features

Variables

In ES5 is was possible to make use of the var keyword to define variables but in ES6 now its possible to use let and const keywords to define keywords.

The var keyword uses the function scope, e.g., it is accessible in its function. The let and const use block scope, e.g., they are only defined in their block. Outside that block, they are inaccessible. Variables defined using const are immutable.

//ES5 VAR Keyword
var x = 20;
if (x == 20){
  var x = 30;
  console.log(x); //prints 30
}
console.log(x); //prints 30
//ES6 LET Keyword
let x = 20;
if(x == 20){
  let x = 30;
  console.log(x); //prints 30
};
console.log(x); //prints 20
// ES6 CONST Keyword
const testValue; //error Missing initializer in const declaration
const testValue = "ride";
const testValue = "drive"; //error 'testValue' has already been declared

ES6 Spread and Rest syntaxes (…)

The Spread operator helps you expand iterable collection into individual elements.

The Rest operator is used to put the rest of some specific user-supplied values into a JavaScript array.

The Spread and Rest are two ES6 syntaxes that operate in opposition to one another.

The three-dot notation is used by both of them.

// ES6 Spread Operator Example
function sum(a,b,c,d){
  return a+b+c+d;
}
const addNumbers = [1,2,3,4];
console.log(sum(...addNumbers)); //output 10
// ES6 Rest Operator Example
function sum(x, y ,z) {
    console.log(x + y + z);
}
const addValue= [1, 3, 4, 5];
sum(...addValue); // output 8

Classes

Classes are used to structure the code into reusable, logical components and establish the framework for real-world object modeling.

In JavaScript prior to ES6, it was challenging to build a class. However, using ES6, the class keyword can be used to construct a class.

Either a class expression or a class declaration can be used to incorporate classes in our code.

// ES6 Class Declaration Example
Class Employee{
 constructor(name, age){
 this.name = name;
 this.age = age;
     }
}
// ES6 Class Expression Example
var Employee = class{  
    constructor(name, age){  
    this.name = name;  
    this.age = age;  
    }  
}
// The usage of this keyword
Class Employee{
 Name='Mary';
 getName(){
 return this.name; //returns Mary
     }
}
let e = new Employee();
console.log(e.getName()); //prints Mary

Arrow Function Expression

Arrow functions are anonymous functions. They don’t return any value and can declare without the function keyword. Arrow functions cannot be used as the constructors.

// Arrow function Example One
var testArrow = () => {
console.log("It is an Arrow Function");
};
testArrow();
// Arrow function Example Two
value = (a, b) => a * b;
console.log(value(2, 5));

Destructuring assignment

A JavaScript expression that enables the unpacking of array values or object properties into separate variables is the destructuring assignment syntax.

// Basic Destructuring Example
const test= ['one', 'two', 'three'];
const [red, yellow, green] = test;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // "three"
// Destructuring an array Example
let myName, myRole;
let array = ['Mary', 'Web Developer'];
[myName, myRole] = array; //Positional assignment occurs here
console.log(myName, my Role); //Mary Web Developer

Template literals

In ECMAScript 2015/ES6, a new feature called template literals was added.

It offers a simple method for string interpolation and multiline string creation. String literals are known as template literals, and they permit embedded expressions.

Template literals were known as template strings prior to ES6.

Template literals are literals delimited with backtick (`) characters.

Multiline strings

In template literals, there is no need to use \n because string ends only when it gets backtick(`) character.

// Without template literal   
console.log('Without template literal \n multiline string');   
    
// With template literal   
console.log(`Using template literal  
multiline string`);

String Interpolation

Template literals can use the placeholders for string substitution. To embed expressions with normal strings, we have to use the ${} syntax.

// Using String Interpolation
var name = ‘World’;
var cname = ‘my medium article’;
console.log(`Hello, ${name}!
Welcome to ${cname}`);

Tagged Templates

One of the more sophisticated types of template literals are tagged templates.

We can use a function to parse template literals thanks to tagged template literals.

// Tagged Templates Example
function TaggedLiteral(str, val1, val2) {
console.log(str);
console.log(val1+” “+val2);
}
let text = ‘Hello World’;
TaggedLiteral`Colors ${text} ${10+30}`;
// Tagged Templates Example 2
let myName = 'John';
let myRole = 'Software Developer';
function myTag(array, name, role){
 let str0 = array[0]; // My name is
 let str1 = array[1]; // and I am
 
 // we can further manipulate str0, str1, name and role here
 return `${str0}${name}${str1}${role}`;
}
console.log(myTag`My name is ${myName} and I am ${myRole}`); // My 
name is John and I am Software Developer

ES6 Modules

Modules in ES6 is an essential concept to remember. Modules are sections or blocks of JavaScript code that are stored in files.

Simply by dividing the entire code into modules that can be imported from anywhere, JavaScript modules aid in the modularization of the code.

Code maintenance, code debugging, and code reuse are all made simple by modules.

Import Module

Importing is very straightforward, with the import keyword, members to be imported in curly brackets and then the location of the module relative to the current file:

// ES6 Import Module Example
import App from ‘./App’;
import { Header, Sticky } from ‘@animate/components’; //child modules

Export Module

It is possible to export a variable using the export keyword in front of that variable declaration. You can also export a function and a class by doing the same.

// ES5 Example
var Student = { fullName: 'Black Smith', age: 25, gender: 'Male', city: 'London' };
//ES6 Example
module.exports = Student;
export default Student;
export const fullName = 'Black Smith'; //child variables
export const age = 25;

Conclusion

I hope this article was helpful to you guys. If so, please leave comments below. I also hope I was able to introduce you to the some of ES6 features in JavaScript.

Thanks for reading :)