ES6 Basic Features

What exactly is ES6?

The ES6 language specification standard, often known as ECMAScript 2015, is the 6th and most recent version of the ECMAScript language specification standard. It is far more popular than the preceding edition, ES5, in terms of defining the standard for JavaScript implementation.

In this article, we'll go over some of the ES6 features you'll need to know to get started with Modern Javascript. Let's get started!

Understanding these Features

Let and Const

Users can define variables with the term "let," while users can define constants with the keyword "const." Variables were formerly declared with the "var" keyword, which had function scope and was positioned at the top. It means that you can utilize a variable before declaring it. The "let" variables and constants, on the other hand, have block scope and can't be used before declaration because they're surrounded by curly brackets.

Both let and const are block-scope variables, which means they can only be used within the block in which they are declared.

Code Example:

// traditional
var x = 5;
y = 8;
var y;

console.log(x); // 5
console.log(y); // 8

// es6
let l = 4;
c = 17;
let c;
console.log(l); //4
console.log(c); // Error: Cannot access 'j' before initialization

const m = 29;
m = 39;
console.log(k); // Error: Assignment to constant variable.

let h;
h = 'hello';

const n;
n = 'goodbye';
console.log(h); // hello
console.log(n); // Error: Missing initializer in const declaration

Arrow Functions

Arrow functions is a new feature in ES6. The "function" and "return" keywords are removed, resulting in a more compact syntax for creating function expressions.

Arrow functions are defined using the fat arrow (=>) notation.

// Arrow function
let sum Of Two Numbers = (c, d) => c + d;
console.log(sum(90, 10)); // Output 100

There is no "return" or "function" keyword in the arrow function declaration, as can be seen.

We can also avoid the parenthesis in the scenario where there is exactly one parameter, but will always need to include it when you have zero or more than one parameter.

However, if the function body contains many expressions, we must surround it in curly brackets ("{}"). To return the required value, we must also utilize the "return" statement.

Template Literals

Simple string templates and placeholders for variables are introduced in ES6. The string template is used inside the back-ticked string and has the syntax ${PARAMETER}.

Below is an example:

let coding community = `The name of my favorite coding community is ${firstName} ${lastName}`

Multi-Line Strings

Multi-line Strings are also available in ES6. Back-ticks can be used to produce multi-line strings.

It can be done in the following way:

let favorite slogans = `Yes We Can,     
                        Together As One,
                        Freedom , Development , Peace`

Default Parameters

ES6 also came with default parameters. If no value is passed or if undefined is passed, it allows you to set default values for your function parameters.

//
let calculateSum = function(boys = 20, girls = 40) {  
    // logic
}

The above however, was not the case in ES5, as shown below:

//ES5
var calculateSum = function(boys, girls) {  
   boys =  boys || 90;
   girls = girls || 110;
   // logic
}

Enhanced Object Literals

Object literals have been improved in ES6 to make it easier to quickly build objects with properties inside the curly braces.

Below is an example:

function getStudent(name, gender, course) {
   return {
      name,
      gender,
      course
   }
}
getStudent("Tasha", "Femle", "Computer Science");

Promises

Asynchronous execution is handled through Promises in ES6. As shown here, promise can be used with the arrow function.

var asyncCall =  new Promise((resolve, reject) => {
   // do something
   resolve();
}).then(()=> {   
   console.log('DON!');
})

Destructuring Assignment

One of the most popular aspects of ES6 is destructuring. The destructuring assignment is an expression that allows you to quickly remove values from arrays or properties from objects and store them in separate variables.

Array destructuring and Object destructuring are the two types of destructuring assignment expressions. It's possible to use it in the following ways:

//Array Destructuring
let birds = ["Crested Auklet", "Carribean Dove"];
let [a, b] = birds; // Array destructuring assignment
console.log(a, b);

//Object Destructuring
let person = {name: "Prudence", age: 21};
let {name, age} = person; // Object destructuring assignment
console.log(name, age);

Modules

Modules were previously not supported natively in JavaScript. Modules are a new feature introduced in ES6, where each module is represented by a separate ".js" file. We can import or export variables, functions, classes, or any other component from/to different files and modules using the "import" or "export" declaration in a module.

Below is a code example:

export var num = 48; 
export function getName(fullName) {   
   //data
};
import {num, getName} from 'module';
console.log(num); // 48

Thank you for taking the time to read this!

I'd be grateful if you could leave your views and opinions in the comments section.