ES6 Features You Should Know

13 Views

ES6 Features You Should Know

养花风水

13 Views

A number of new features made their ways into javascript with the introduction of its gallant version ECMAScript 6 or ES6. These features worked towards the goal of creating a language that's powerful, abstract and easy with great effectiveness. It is recommended for anyone who is seeking to bridge their knowledge in javascript or is starting out to know these main points of ES6. This article's focus will be shifted to some of these features along with their effect on the cutting edge javascript development.

Let and Const

As of writing this article, 'var' was the only keyword previously available to create variables in JavaScript. Although the `var` keyword was useful for declaring variables, it also came with negative aspects concerning scope and hoisting which can create bugs and make codes more messy than they need to be. Two new ways of declaring variables were introduced with the enactment of ES6. These were `let` and `const`.

1. Let : Block scoped variable can be accessed only inside the block in which they were declared, be it a loop or an if statement, and it can be done through the use of the keyword `let`. This overcomes the potential complications offered by `var`, as the scope of the variable is more easily understood.

2. Const : It is worth noting that Const is a nominative program that allows to declare constants which means that these variables are never changed, they are initialized once and for all. This turns out to be less cumbersome while dealing with read-only variables thus increasing the readability of the code by preventing reassignment of a variable by mistake.

Arrow Functions

One of the major features of ES6 which is so popular and in fact everywhere is the arrow function. An arrow function is a special type of function that can enable you to access global variables and have a different context 'this'. This makes them very effective when working with functions or callbacks in objects.

Arrow functions use the syntax '=> '. For example:

Arrow Function Example

  let add = (a, b) => a + b;

In this illustration we can say that the arrow function added the benefit of only more parsers seeing that it effectively behaves like a standard function. Perhaps the most noteworthy of all is how arrow functions are able to bind the value of `this` scope passed as an argument during its parent invocation which is quite required in event handling or callback situations.

Template Literals

The other most valuable feature introduced with ES6 is SaaSits easy for a user to use template literals. Instead of quotation template literals allows you to use placeholders along with backticks.

For example:

Template Literals Example

  let name = "Alice";
 
let greeting = `Hello, ${name}!`;

What made the context even more interesting was the quote say hello to Alice. Instead of saying hello to Alice, string concatenation is long gone. Because multi-line strings are supported, longer texts that span several paragraphs are made easier to work with.

Destructuring

Another interesting topic that was added to ES6 is Destructuring. When faced with the problem of more optimal ways to unpack values from objects or arrays and write them in variables, ES6 provided a solution to the pain. Rather than reaching for the extreme method of indexing or dot notation, Use of compact form makes the code easier to understand.

For arrays:

Array Destructuring Example

  let numbers = [1, 2, 3];
 
let [a, b, c] = numbers;

For objects:

Object Destructuring Example

  let person = { name: "John", age: 30 };
 
let { name, age } = person;

Writing these statements at the top, the journalist tackles the features of many programming languages, especially those with object-oriented characteristics; the feature is referred to as Pointers.

Classes

Es6 classes only serve to simplify the understanding of smearing for many of us. Objects can be summed up with blueprints methods and inheritance, which of course an architect would like to hope such a simple concept can hardly bring new artistic styles.

A basic class can be defined like this:

Class Example

  class Person {
 
    constructor(name, age) {
 
        this.name = name;
 
        this.age = age;
 
    }
 
    greet() {
 
        console.log(`Hello, my name is ${this.name}`);
 
    }
 
}
 
let person = new Person("Alice", 25);
 
person.greet(); // Outputs: Hello, my name is Alice

So far, the built-in JavaScript class examples seem to be an improvement in clarity and structure over the previous prototype-based inheritance model.

Zero Parameters

Previously in ES6, it was possible to use default values for function parameters, as using default values required a function to be invoked with a set value.

Default Parameters Example

  function greet(name = "Guest") {
 
    console.log(`Hello, ${name}!`);
 
}

As seen in the example, nothing is passed to the `greet` function, so `name` will take on the default value of `"Guest"` in this case. This means we need not have any manual checks or conditional statements inside it.

Rest and Spread Operators

In programming, the sole purpose of flaws is to persuade the two most powerful operators 'rest operator' (i.e '…') and 'spread operator' (i.e. '…') which merge all flaws into the curtains.

1. Rest Operator : The rest parameter makes it possible to pack multiple values into a single array and uses the arrays of the function parameters.

Rest Operator Example

  function sum(...numbers) {
 
    return numbers.reduce((acc,num) => acc + num),0);
 
}

Here, `numbers` that are parameters of the `sum` function are packed into one array.

2. Spread Operator : The spread operator, the reverse of the rest operator, packs certain properties of arrays or objects into a new entity of its own. It is useful while invoking methods or while declaring new arrays or objects.

Spread Operator Example

  let arr = [1, 2, 3];
 
let newArr = [...arr, 4, 5];

So here, all the values inside 'arr' along with newly added '4' and '5' have been incorporated into `newArr`.

Modules

JavaScript had no concept of modules prior to ES6. The major advantage of modules is in the organization and maintainability of a large code base as you can partition and decompose your code into smaller and more manageable files.

Example of how to export a function or variable declared in a module is as follows:

Exporting Module Example

  // math.js 
 
export function add(a, b) {
 
    return a + b;
 
}

And to import the exported function into another file, it is done as follows:

Importing Module Example

  // app.js
 
import { add } from './math.js';
 
console.log(add(2, 3)); // Output: 5

In computer programming, especially in JavaScript, modules are very handy as they provide an organized way of writing code and limit the complications that arise due to global variables and namespace pollution.

Promise

Promises are a new feature that was added in ECMAScript 6 to work with functions with asynchronous execution. A promise is an implicit declaration that a certain value may not be available at this point in time but sometime in the future it would be resolved and there would be a value. Whenever an asynchronous operation is to be performed, using promises is much easier due to the fact that they can be chained together with the use of the `.then()` and `.catch()` methods.

Promise Example

  let myPromise = new Promise((resolve, reject) => {
 
    let success = true;
 
    if (success) {
 
        resolve("Task completed successfully");
 
    } else {
 
        reject("Task failed");
 
    }
 
});
 

 
myPromise.then(result => {
 
    console.log(result);
 
}).catch(error => {
 
    console.log(error);
 
});