On this page, you will find practice exercises related to the array and object destructuring along with the solution. These exercises will help you in understanding the concepts of object destructuring in JavaScript.
Before you solve these exercise questions, it is a prerequisite that you know object destructuring and array destructuring. In case you are not familiar with them, then visit the following links:
Q1 Write a function called displayName() that takes an object as an argument and prints the person's first and last name. Use object destructuring in the function argument. And also, use template strings when printing the first and last name.
Solution
function displayName({first, last}){
console.log(`${first} ${last}`);
}
const person = {
first: 'Elon',
last: 'Musk',
twitter: '@elonmusk',
company: 'Space X'
}
displayName(person);
Q2 Write a function called calculateSalesTotals() which returns an array with new two new keys (sale and total). The key 'sale' equals the calculated sale price based on the original price and the discount. The key 'total' equals the computed total based on stock, the original price and the discount. You have to use Object Destructuring on the objects in the sales array and Object Default Values for the discount key. The default value would be 0.0.
const sales = [
{ item: 'PS4 Pro', stock: 3, original: 399.99 },
{ item: 'Xbox One X', stock: 1, original: 499.99, discount: 0.1 },
{ item: 'Nintendo Switch', stock: 4, original: 299.99 },
{ item: 'PS2 Console', stock: 1, original: 299.99, discount: 0.8 },
{ item: 'Nintendo 64', stock: 2, original: 199.99, discount: 0.65 }
];
EXPECTED OUTPUT (array of objects):
[
{
item: "PS4 Pro",
original: 399.99,
sale: 399.99,
stock: 3,
total: 1199.97
},
{
discount: 0.1,
item: "Xbox One X",
original: 499.99,
sale: 449.991,
stock: 1,
total: 449.991
},
{
item: "Nintendo Switch",
original: 299.99,
sale: 299.99,
stock: 4,
total: 1199.96
},
{
discount: 0.8,
item: "PS2 Console",
original: 299.99,
sale: 59.99799999999999,
stock: 1,
total: 59.99799999999999
},
{
discount: 0.65,
item: "Nintendo 64",
original: 199.99,
sale: 69.9965,
stock: 2,
total: 139.993
}
]
Solution
function calculateSalesTotals(sales){
let updatedSales = sales.map(sale=>{
let {original, stock, discount=0.0} = sale;
sale['sale'] = original - original * discount;
sale['total'] = sale.sale*sale.stock;
return sale;
});
return updatedSales;
}
const sales = [
{ item: 'PS4 Pro', stock: 3, original: 399.99 },
{ item: 'Xbox One X', stock: 1, original: 499.99, discount: 0.1 },
{ item: 'Nintendo Switch', stock: 4, original: 299.99 },
{ item: 'PS2 Console', stock: 1, original: 299.99, discount: 0.8 },
{ item: 'Nintendo 64', stock: 2, original: 199.99, discount: 0.65 }
];
let updatedSales = calculateSalesTotals(sales);
console.log(updatedSales);
Q3 Create a function named goToSecondClass() that accepts a destructured object as a parameter. The parameter extracts the "secondHour" property of the object. The function should return this statement:
"Time to go to {property_value} class!"
Example: "Time to go to Programming class!"
You can test your function with this object:
const myClasses = {
firstHour: "Ethics",
secondHour: "Programming",
thirdHour: "Biology"
};
Solution
function goToSecondClass({secondHour}){
return `Time to go to ${secondHour} class!`;
}
const myClasses = {
firstHour: "Ethics",
secondHour: "Programming",
thirdHour: "Biology"
};
console.log(goToSecondClass(myClasses));
Q4 Consider the following array:
let colors = ["white", "blue", "yellow", "black", "red", "green"];
Using array destructuring assign the first 2 elements to firstColor and secondColor variables and assign the remaining elements to otherColors variable. Display the values of these 3 variables.
Solution
let colors = ["white", "blue", "yellow", "black", "red", "green"]; let [firstColor, secondColor, ...otherColors] = colors; console.log(firstColor); console.log(secondColor); console.log(otherColors);
