Learn localStorage by Building a Todo App - Step 17

I am very confused on how arrow syntax works. I don’t understand why you’d use it or where you would add it in. I tried looking it up and just general explanations but I just can’t seem to wrap my head around the arrows at all. I am also confused on why there is two sets of () and one set of {} in taskData.forEach(({id, title, date, description}));

It then asks me to add the arrow syntax in there and I have no idea where to put it or why it’s even needed. Please help! I’ve only been learning to code for a few months so some of this is still a bit rough for me.

Your browser information:

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

Challenge Information:

Learn localStorage by Building a Todo App - Step 17

Hi @raquel.stepp and welcome to the FCC community!

I would highly recommend going back and reviewing the concepts behind destructuring and array methods like forEach but I’m giving a synopsis below of this concept.

Taking a look at this first:

taskData.forEach(({id, title, date, description}));

Let’s dive deeper and look at just this part inside of the parenthesis:

({id, title, date, description})

What this is doing is destructuring an object into individual variables. Inside of the taskData array, there are a bunch of objects that have those property names: id, title, date, and description. If we put them inside of the object brackets when we are about to do a function, it will put those properties into variables that are named the same thing.

Next, forEach is a method that takes a callback function as its parameter. This method specifically loops over every item in an array. It has a few parameters you can access if you add them in, but in this case, we’re only dealing with the first parameter which is always a reference to the current element.

A simpler forEach method call with arrow functions looks like this:

//You can run all of this in your browser's console window to see the output
const myNamesArray = ['Mary', 'Bob', 'Ignacio'];
/*
name is a reference to each name in here and
depending on what you're doing, you can remove the parenthesis below that is surrounding the name parameter
but I'm keeping it here for example's sake
*/
myNamesArray.forEach((name) => {
    //very first output: "Hi, Mary, nice to meet you!"
    console.log(`Hi, ${name}, nice to meet you!`);
});

So, starting with that parameter that is a reference to the element, and since we know that the elements within this array specifically are going to be objects, we can use that destructuring to split each property into a variable with the same name. Now you can treat ({id, title, date, description}) the same as name in the above example and use each individual variable.

1 Like

This is very helpful, thank you! I’ll definitely go ahead and review all that.

1 Like