Object Destructuring
It is the process of taking the “values” from the key-value pairs from an object and placing them into individual variables with a single line of code. This single line of code not only assigns values to the variables but even creates those variables as well. We can say that we are declaring and initializing multiple variables in a single line of code with object destructuring.
Syntax of object destructuring:
After the variable declaration (const, let, var) place the identifiers of the variables inside the curly brackets and put this whole equation equal to the object that we want to destructure. Remember, the name of the variables should be the same as the “key” of the key-value pairs of the object.
Note: There is no destructuring “operator”, however, the above statement is referred to as the “destructuring assignment operator”
Example:
To demonstrate the object destructuring we are going to first create an object in JavaScript by using the following lines of code:
name: 'iPhone',
model: '13 Pro',
company: 'Apple',
popularity: 10
}
Now that we have our object, we can destructure it into various variables, with the following line of code:
Note: we are only destructuring the object and storing two values with the key “name” and “model”, that is why we need to give the name of the identifier the same as the keys of the key-value pairs.
You can even access the values using variables like:
console.log("The Model of the mobile is: "+ model);
The complete code snippet of this example is as
name: "iPhone",
model: "13 Pro",
company: "Apple",
popularity: 10,
};
const { name, model } = phone;
console.log("The name of the mobile is: "+name);
console.log("The Model of the mobile is: "+ model);
You will get the following output when you run this code:
That is it for object destructuring in JavaScript ES6
Rest Parameters
The rest parameters are used when we are not certain of how many parameters a function should take. We prompt the compiler by using the triple-dot operator before the name of the parameter to make it clear that this is a rest parameter and not a normal parameter.
The values inside the rest parameter are stored as an array under the same identifier as the parameter itself.
Syntax
As mentioned above, we use a triple-dot operator before the identifier in the parameters of a function to make it into a rest parameter
// Body of the function
}
Restriction for defining Rest Parameters:
- Only one rest param in a function.
- Must be the last parameter of the function
Example of Rest Parameters
To demonstrate the use of Rest Parameters with JavaScript we are going to create a simple function that sums up the numbers given to it as arguments with the following lines of code:
return a+b;
}
As you can see, this function can only sum 2 numbers, but we want a function that can take an indefinite amount of numbers and sum them up for us, so we change the function to make it look like this:
result = 0;
for (value of numbers) {
result = result + value;
}
return result;
}
As you can see, we are only taking 1 parameter which is the rest parameter that will allow this function to take an indefinite amount of numbers and then we are using the for-of loop to traverse through the values placed inside the array and adding them into each others. All that is left to do is to call this function and print out the return value with the following lines of code:
console.log(sum(1, 2, 3));
You will see the following output on the screen when you execute this code:
That is it for using Rest Parameters in JavaScript, we can now move on to our next topic.
Spread Syntax
It is used to pass on the elements of an iterable object (either an array or a string) to the arguments or the list of arguments as with a single line of code without having the need of manually iterating through that iterable object.
Syntax
The syntax of the spread syntax is pretty basic, we simply use the triple-dot operator before the variable name while passing it as an argument.
Example
To demonstrate the use of spread syntax in JavaScript we are going to need a function that we can create with the following lines of code:
return a+b+c+d+e;
}
Now that we have our function, we need an array that will contain our numbers to be added,
The last thing that is left to do is to pass on this array using the spread syntax into the function with the following line of code:
You should see the following result on your console:
As you can see, the elements of the array were successfully passed to the function as arguments with the use of spread syntax.
Rest parameter vs Spread Syntax
Oftentimes, users get confused between the rest parameters and the spread syntax for passing arguments. This confusion is created due to the fact that the operator for both of these features is the same (dot-operator). To address this confusion, we can say that:
- If the dot-operator is used in the function definition to define a parameter then it will be called the rest parameter operator.
- On the other hand, if this operator is used while passing arguments to a function then it will be called the spread operator.
Conclusion
JavaScript has various features, especially the ECMA v6 release of JavaScript bombarded the programming community with a lot of useful features. Some of these features are: object destructuring, the rest parameters, and the spread syntax. In this post, we have gone through the explanation and usage of these three features along with their examples.
