Learn Basic OOP by Building a Shopping Cart - Step 19

JavaScript
1

Tell us what’s happening:

the variable product was referred to as “an array” in the previous step 18. In order to get the correct submission I had to deconstruct product using an obj {}. Was this an typo in step 18?

image
image644×285 15.7 KB

Can you deconstruct an object with an array and vice versa?

Also, the tutorials I’ve seen show you have to “skip” over items in order to reference the correct item in the array/object being deconstructed. Could you explain why we dont have to in this case?

Your code so far

<!-- file: index.html -->


/* file: script.js */
// User Editable Region

  addItem(id, products) {
    const product = products.find((item) => item.id === id);
    const [, name, product] = product; //What I thought was correct
![image|644x285](upload://icvYW6VCTbC3MKFR1dGuCz7KDxw.png)
const {name, product} = product; //what passed submission

  }

// User Editable Region

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Challenge Information:

Learn Basic OOP by Building a Shopping Cart - Step 19

1 Like
2

Hello,
Can you deconstruct an object with an array and vice versa?
You can deconstruct arrays like objects but not objects like arrays
(by destructuring i mean deconsructing, but the former is the actual technical term)

const list = [1, 2, 3];
const obj = {name: "Mike", age: 22};

// normal array destructuring
const [one, two, three] = list;

// normal object destructuring

const { name, age } = obj;

/*
You can also do this with arrays since they are also objects in JS with each item having as its key its own index that is why you can write 
list[1] to get the second item (do not forget arrays are 0 based meaning the first item is associated with the index (key) 0 and so on)
*/
const {1: second_item, 0: first_item} = list;
console.log(first_item);

/*
You cannot deconstruct objects like arrays, you may ask why but the
 answer is linked to the fact that objects are not iterable while arrays are
 and Destructuring is built around this but I won't explain it too much 
because this make it more complicated than it needs to be 

*/
 // this will result in an error, remove the comment first
// const [name, age] = obj;

Also, the tutorials I’ve seen show you have to “skip” over items in order to reference the correct item in the array/object being deconstructed. Could you explain why we dont have to in this case?

Because in this case, the product variable is an item derived from the arrays products, which is an array of objects, making the product variable an object (you may have confused between product and products)

Finally, you should know we can skip in arrays but not in objects because we do not have to, the skipping option is most useful when you have an array of say 10 items and you want the fourth one you would write something like this

const list = [1, 2, 3, 55, false, "", 58, 88, 'r', 44];
const [, , , , fifth_item ] = list 
console.log(fifth_item); // false

but for an object, even if it has thousands of properties, you can select the one that you want by writing its key (since keys are unique)

const obj = {
    name: "mike",
    age: 22,
    number: 5545646,
    address: "Not found",
    id: 455555
}

const {age, address} = obj;
console.log(age, address);