Let's Dive Into Core ES6 Concepts 🔥 
Tags: javascript, interview, es6, showdev
Published: 2020-09-07 02:56:03

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 `${}` 
<pre>
const lastName = 'Things';

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

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

</pre>
✨ `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!

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

### 🟡 Using Default Parameter Values :
The default assignment statement, only occurs if no arguement is passed into the function.

<pre>
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
</pre>

### 🟡 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.

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

### 🟡 Arrow Functions :
It's more shorter and concise way of representing functions. It just replaces the `function()` with `() =>`
Syntax will be :
<pre>
const sayHey = () => "value" 
// this will return value by default!
</pre>

✨ **Shorthand :** When an arrow function has just a single parameter, then we can ignore parenthesis `()`
<pre>
const whichMonth = month => console.log(month);
whichMonth(September); // September
</pre>

✨ **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`

<pre>
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();
</pre>

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 🎉

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

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

let w = new Wallet();
w.increaseMoney();
</pre>

### 🟡 Spread Syntax :
It basically sends all the values of an `array` into a function as arguments, using the spread operator `(...)`

<pre>
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);
</pre>

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

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

### 🟡 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!

<pre>
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!
</pre>

_This Blog is originally published on_ : [My Blog WebSite](https://blog.abhisheknaidu.tech/lets-dive-into-es6/)