What is Destructuring Arguments – New in ECMAScript 6


In this article, you will get understand what is a destructuring argument? Destructuring arguments are new in ECMAScript 6. In the operator tutorials, we have seen Destructuring assignment operator now in this lecture will understand destructuring arguments. Destructuring is a convenient way to extract Values from data in object or array. Using the example will understand how to use destructured arguments.

For example,

When you execute this statement you will get daily tuition tutorial message on the console. Now in this example, We are just extracting different properties from the object using the destructured argument. Using the destructured argument you can extract multiple values in the object at a time. You can do the same thing with array also.

Using Array,

Now when you execute this statement you will get the same output using array also. So here you need to understand one thing which is when you create the destructure array argument you need to specify square bracket.  and when you want to extract values from the object you need to specify curly braces in the destructure argument.

Now here using destructuring arguments we extract values from the array.

Call() Method

Now we’ll move to the next topic call() method. you will be wondering what is call method. The call is the method available on all functions that allows you to call the function with a specific value of this.  in this topic will take a small example that gives you an understanding of the use of this keyword.

For example,

So using this example we wanted to show you how to access an object within the function only with this keyword. You can see we call magic Method and using dot operator we call the call method and specify an object in the parameter. Now using call method this keyword bound to the magic function. So it means this keyword refers to the object which is specified in the argument

So if you specify the second object in the call method parameter then you will get different output.

Right.

What is IIFE?

so what is IIFE?  this stand for immediately invoked function expression. The immediately invoked function expression declare a function and run it immediately. Now we know that when you create an anonymous function you need to create function expression and specify that anonymous function to the variable.

Then why we need this? the reason behind this is that anything inside it has its own scope And because it is a function, it can pass to any other variable.

so immediately invoked function expression looks like this.

So here we create an anonymous function using a function expression. And then immediately invoked that function. Now in this syntax, we created a parenthesis and put the function inside this parentheses. inside this parentheses, we declare a simple anonymous function.

Just after that, you can specify the body of your function. and then after the closing curly braces and the closing parenthesis specify open and closing parenthesis. So this parentheses call this function immediately.

Using the example you will have a better understanding of this function. Let’s consider the following example

When you execute this statement you will get immediately invoked function expression message on the console. So here we just created an anonymous function and read this function in the parenthesis.

now, what if we remove this closing parenthesis from here.

if you do that you will get the reference to that function. now if you wanted to execute this function immediately you need to specify open and closing parenthesis over here. If you wanted to refer this function to another variable you don’t need to specify this parentheses right,

Now you know that you cannot access the function variable outside of that function.  in previous videos, we learned how to access that variable using closure.

Using Closure

when you execute this statement you will get 123 on the console. Here using closure you can access the count variable we use parentheses when we call the variable because we are returning a function to the f variable.

That’s it. I hope you understand this article. we will see you in the next article.