Destructing Assignment and Operator Precedence Understanding


In this article, we will take a brief look at Destructing assignment operator and Operator Precedence. So first we will start this article from destructing assignment operator.

Destructing Assignment Operator

The destructing assignment operator is new in ECMAScript 6. Now we know that destructuring assignment operator exists in ECMAScript 6. But now let me tell you what is destructing assignment operator and what it does. Destructing assignment operator allows you to take an array or object and ‘destructure’ it into an individual variable.

Destructing Assignment Operator

So let’s take an example of an object and understand how destructing assignment operator work.

Example

we didn’t define d property in the object. That is why the d will print undefined.

So why not we remove one variable from here so I will just remove the b variable. remove b from the previous example. like this.

now let’s see what is the result. When you execute this statement you will get an error message. Variable B is not defined. The error occurred because we did not specify the variable in the destructing assignment operator.

Right.

So now the important thing is when you create destructing assignment operator. You need to keep in mind that. When you destructure an object the variable name must match to the property name is the object.

When the destructing assignment operator didn’t match any property in the object then it will return undefined. Also, we didn’t specify b in the declaration so the JavaScript return an error message.

you can do the declaration like this also

But keep in mind when you doing this type of declaration it must be surrounded by parenthesis. Otherwise, JavaScript assume left side of statement as a block

Now let’s take one more example of destructing assignment operator with the array so we declare a normal array first like this.

Example

Keep in mind when we declaring an object we use curly braces in the declaration and when we declare array we used a square bracket in the declaration.

now is it possible to store the remaining array element in the new variable? Yes, it is.

Using spread operator ( … )  like this with the three dots you can Store remaining array element in the new variable like this.

now when you print the rest variable you will get the remaining elements of the array. We will cover the spread operator in the future lectures. But just keep in mind we use this operator to print remaining array element using destructing assignment operator.

Operator Precedence

To understand how JavaScript evaluate an expression this topic is very important. Till now we have been covered most of the operators in JavaScript. Now we will take a look at how JavaScript perform operator operation.

Operator Precedence

Operators are arranged in order from higher precedence to lower precedence. Operator precedence controls the order in which operation is performed. Higher precedence operator performs before the lower precedence operator.

Now consider the following expression

let’s understand how JavaScript perform this expression. First JavaScript performs the higher precedence operator which is multiplication. So the JavaScript first perform the multiplication with 3 and 2. and then perform the lower precedence operator. Show the addition is lower precedence operator and multiplication have higher precedence. so when the multiplication will be completed.  JavaScript perform the lower level precedence which is an addition.

and after that JavaScript perform the assignment operation and assign 11 to the X variable. Operator precedence can be overridden With the explicit use of parentheses. in the previous example if you wanted to perform addition operator first then the expression looks like this.

When you perform this operation the result would be different. JavaScript assigns 16 value to the  X variable. because we first performed the lower level precedence operator addition and then multiply with 2 and assign to the X variable.

now let’s take one more example of operator precedence.

Example

Now when you execute this statement what would be the result? the result would be 23. Now let me explain how JavaScript interpreter performs this expression. so the JavaScript first perform the operation in the parenthesis. Then it performs the division between 20 and 4 after that JavaScript perform the multiplication and then perform the addition.

Now if you wanted to know which precedence level apply to which operator then don’t worry I will solve your problem. JavaScript provides a different precedence level to different operators.  I have created a chart of precedence level. you can download this chat from this link.

after a few days of practice, you will have a complete understanding of operator precedence.

That’s it.

That is all for now. we will see you in the next article.