ES6 and Function

Now I will discuss some important things from modern javascript and explore some fundamental concepts of Function.
Default parameters

let const

So basically, before understanding let and const we have to understand scope in javascript. In es5 there were two types of scoping which are Global Scope and Function Scope. But in ES6 let and const brings block scope.

Global Scope
In the global scope, we can declare variables globally (not in a function) and read them anywhere from a javascript program.

Function Scope
In function scope, we declare a variable inside a function. which works locally. This variable only accesses inside the function where they are declared.

Block scope
the variable that declared inside a block That's call Block scope. In block scope, the variable can't read outside from the block.

let

let is block scope variable. we can declare a let keyword variable inside a blocked scope { } and access it locally. lets see an example:

let a = 1;
{
let a = 2; // different variable inside a block
console.log(a); //output: 2
}
console.log(a); //output: 1

const

const is also like let keyword but we can't change its value if we declare it once.
example:

const name = junaid;
name = jabir; // This will give an error

Destructuring

The destructuring syntax is a javascript expression. This method is used to unpack values from an object, arrays, or a property into a different variable. see the Example:

// we have an array with the name and surname
let arr = ["Junaid", "Mia"]
// destructuring assignment
// sets firstName = arr[0]
// and surname = arr[1]
let [firstName, surname] = arr;
console.log(firstName); // Junaid
console.log(surname); // Mia

Object destructuring

Template Literals

In ES6 we have template Literals. This method is very useful. using this method we can embed expressions with normal strings using ${} this syntax.
Let's see an example:

Multi-line Strings

We can write a multi-line string in ES6 very easily.
Example:

Default Parameters

In ES6 we can assign default parameters in a function

Example:

Arrow Function

Using the fat arrow function we can declare a function very shortly and easily. If we use this method we don't need to write the function keyword, return, and the curly brackets.

In ES5 we declare a function like this:

var x = function(x, y) {
return x * y;
}

but in ES6 using fat arrow function we write our code like this one

const x = (x, y) => x * y;

Arrow function is very clean and saves our time a lot.

Spread Operator

Spread Operator which is also mark as ... Spread Operatorworks like a copy machine. It Spread an array and passes them to a function. let's see an example to clear it.

function Numbers(x, y, z) {
return x + y + z;
}
let numbers = [5, 12, 8];
console.log(Numbers(...numbers)); // 25

Enhanced Object Literals

In ES6 we can create objects very quickly using the Enhanced Object Literals method. we have to write the object's properties inside the curly brackets. see the example:

function getPhone(brand, model, price) {
return {
brand,
model,
price
}
}
console.log(getPhone("Samsung", "note 20 ultra", "1 lakh taka"))
//output: {
// brand:"Samsung",
// model:"note 20 ultra",
// price:"1 lakh taka"
// }

Modules

Now we can export or import functions, variables, etc using the modules method. let's create an example:

First, we create an app.js file.

let intro = "Hello!";
const name = junaid;
function multiplyNumbers(a, b) {
return a * b;
}
// Exporting variables and functions
export { intro, name, multiplyNumbers };

Now we need to create another javascript file. which is example.js

import { intro, name, multiplyNumbers } from './app.js';
alert(intro); // Hello!
alert(name); // junaid
alert(multiplyNumbers(4, 5)); // 20