Let's Dive Into Core ES6 Concepts 🔥

ES6 or ES2015 is one of the core fundamental concept of JavaScript. It unifies the standards and functionality of the script to a great extent.

🟡 Template Literals :

Template Literals can be used anywhere, where strings are used. It uses backticks (`) instead of ugly single and double quotes. Let's talk about the benefits of this:

✨ String Interpolation:
This we can think of it as a way of accessing JavaScript Variables and including that variable or expression in a string. It can be done by using interpolation operator ${}

const lastName = 'Things';

//Without Template Literals
console.log('Stranger ' + lastName); // Stranger Things

// With Template Literals
console.log(`Stranger ${lastname}`); // Stranger Things

✨ Multi-Line Display:
We can also use enter/return when typing template literal, it will then cause the string to be displayed on multiple lines!

let bio = `CS Undergrad and  // newline character \n
Software Developer           // will be added to
among many other things.`;   // the whole string.

🟡 Using Default Parameter Values :

The default assignment statement, only occurs if no arguement is passed into the function.

function sayHey(name = 'Suzie') {
    console.log(`Hey ${name}`);
}
sayHey('Dustin') // Hey Dustin
sayHey(); // Earlier, it used to give undefined
// but with default para, it gives - Hey Suzie

🟡 Mixing Defaults and Non-Defaults :

We just need to make sure, we always set the default value at the end of the parameter list, otherwise it may give NaN result.

function doSum(a,b=1) {
    console.log(a+b);
}
doSum(2,3); // 5
doSum(3); // 4, here a = 3, b = 1

🟡 Arrow Functions :

It's more shorter and concise way of representing functions. It just replaces the function() with () =>
Syntax will be :

const sayHey = () => "value" 
// this will return value by default!

✨ Shorthand : When an arrow function has just a single parameter, then we can ignore parenthesis ()

const whichMonth = month => console.log(month);
whichMonth(September); // September

✨ Most Important 'this' Borrower Arrow Expressions do not have their own this value. This doesn't mean that we can't use them, We can but the value of this will be the surroundings of arrow function.

Before Arrow Functions, We need to bind this, in order to access this

class Wallet {
    constructor() {
        this.money = 200;
    }

    increaseMoney() {
        function IncrementM() {
            this.money++;
        } // before binding, this refers to global window object.
        setInterval(IncrementM.bind(this), 100);
    }
}

let w = new Wallet();
w.increaseMoney();

It's working because we are no longer allowing the default this value. Instead, we are manually setting it to this at this moment in time.

After Arrow Functions Came, It's more concised now 🎉

class Wallet {
    constructor() {
        this.money = 200;
    }

    increaseMoney() {
        setInterval(() => {
            this.money++;
        }), 100);
    }
}

let w = new Wallet();
w.increaseMoney();

🟡 Spread Syntax :

It basically sends all the values of an array into a function as arguments, using the spread operator (...)

const addSum = (a,b,c) => console.log(a+b+c);

const values = [3,4,5];

addSum(...values);

// Same as
addSum.apply(null, values);

// Same as
addSum(3,4,5);

✨ Important : We can also spread the characters of an string into an array

const str = 'abhi';
const char = [...str];
console.log(char); // ['a','b','c','d']

🟡 De-structuring Assignment :

It gives us the power to, take out the elements which are required from a larger piece of structured data. It can be only performed on arrays and objects. When we do array de-structuring, then it will be based on position and with objects, it will be based on property names!

let mail = {
    name: 'Abhishek',
    programme: BSoC,
    email: '[e-mail]'
};
// Order doesn't matter when destructuring!
const selected = ({ programme, name }) => {
    return console.log(`Congratulations ${name}! You've been selected for ${programme}!`);
}
// We can also rename the property!
let {name: firstName} = mail;

selected(mail);
// Congratulations Abhishek! You've been selected for BSoC!

This Blog is originally published on : My Blog WebSite

Comments

[Tobias Nickel]

For template literals I also like tags. They often used in graphql or sql. like:

const data = await sql`
  select * 
  from users
  where email like '%@${domain}';
`;

[Abhishek Naidu]

Yea, that's true!