loading...
Cover image for Let's Dive Into Core ES6 Concepts ๐Ÿ”ฅ

Let's Dive Into Core ES6 Concepts ๐Ÿ”ฅ

abhisheknaiidu profile image Abhishek Naidu ใƒป3 min read

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: 'geekyabhi12@gmail.com'
};
// 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

Posted on by:

abhisheknaiidu profile

Abhishek Naidu

@abhisheknaiidu

Software Developer; Technologist; Innovator;

Discussion

pic
Editor guide
 

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}';
`;

 

Yea, that's true!