ES6 and Function
Published: 2021-05-06 15:55:44

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cosg8tlyljqcaydeb6s2.png)

##**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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/27n3revj2kcdj4bpk2wa.png)

##**Multi-line Strings**

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gmswwnfa7umxormx5xbm.png)

##**Default Parameters**

In ES6 we can assign default parameters in a function

Example: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bi3tnej1f1rhfyiublsb.png)

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