Help in understanding execution flow of function

anyone please help me understand flow of execution of this function (getbagButton)


    const buttons=[...document.querySelectorAll(".bag-btn")];




    let inCart=cart.find(item=>;


     button.innerText="In Cart";



     button.addEventListener("click",(event)=>{"In cart";


            //get product from products based on id

            let cartItem={...Storage.getProduct(id),amount:1} 


                    //add product to cart

             //add product to cart


             console.log("cart is",cart);


            //save cart in local storage


            //set cart values



            //display cart item

            //show cart






    let tempTotal=0;

    let itemsTotal=0;>{

        tempTotal += item.price * item.amount;

        itemsTotal += item.amount;





i know it would be difficult without knowing the rest of the code
but i hope this piece of code helps
i dont understand how forEach working in this function
as per definition foreach execute the callback function for each value of array

This part is an array:

 const buttons=[...document.querySelectorAll(".bag-btn")];

forEach() is called on the buttons array.


Inside the forEach, button is the current value for iteration of the array, and then the => arrow function callback function:


// ...callback function body...
// ...lots of stuff in here...
// ...all the way up to here...

}   //<-- end of callback function 

)   //<-- end of buttons.forEach() method call



I still struggle with writing arrow functions because for some reason, my silly brain is stuck on the traditional way of writing functions as like I learned once upon a time while taking a class in C at college, back in the late 1990s :smiley:).

There’s lot’s of stuff in there, including calls to other functions, etc.

All of that eventually returns something back to the forEach() which returns something back to the getBagButtons() call.

I am still a beginner in JavaScript (and programming in general), so I am not totally clear on everything. But if you trace the arguments being passed through the function, to the methods, to other methods to other functions, you can see what it is all doing. It has helpful comments in there too.

Is this your code or code from some other site or something? It seems to be code that handles the shopping cart feature for an online store site.

1 Like

If you are familiar with the for loop, forEach is much the same. If, within a for loop, you did this:

function doSomethingWithTheButton(button){
   * get the buttons product id, check if it's
   * in the cart. If so, disable the button. If
   * not, add the add to cart event handler
} // end of the function

const buttons = document.querySelectorAll(".bag-btn");

for(let index=0; index<buttons.length; index++){
  doSomethingWithButton(buttons[index] )

// the above for loop is much the same as

It’s simply a different style of programming, but the end result is the same. Also note in my forEach i simply pass the function name, as I’ve defined it elsewhere in my code. This is a much stronger pattern, as the name of the function can become self documenting. The forEach can now tell you, by the function name, what it’s doing.

But in this case, the forEach simply gets the buttons data-id attribute, checks is it’s in the cart, and responds in one of two possibly ways.

1 Like

@a_aramini @snowmonkey sorry for late reply:

so when forEach executes-----
1st iteration- id=firstbutton dataset value which is 1
2-inCart=cart.find(item=>; //right now cart is empty so inCart has no value.
button.innerText=“In Cart”;
}//this will also not execute because incart has no value

4- button .addevent listener start for click event

Question1: my question is will forEach attach event listener for each button while its execution and then stops iterating?
Question2: what happen when i click on a button will code goes to code where if condition
button.innerText=“In Cart”;
if yes then how because foreach execute and attached event listener with each button already then why would it repeat itself to me only event listener part executes if yes then how would it check inCart value.
IAM Totally confused please explain. thanks in advance

You have posted a portion of code, but it is really just the function definition for getBagButtons. I think that some other code outside of what you have posted that is not shown here must call the getBagButtons function.

When getBagButtons() is called again with new arguments, such as an item was added to the cart by clicking the button for the item, getBackButtons() is called again with different arguments and therefore all its code runs again. .

  1. Yes because forEach is like a loop. It does the operation FOR EACH item in the buttons array. Then at the end it returns the result.

Not sure about your other questions, I will have to think about them for a little while.

getBagButton dont take any argument its just a function without any parameter

well yes but it still needs to be called somewhere outside of the code you have posted.

consider it has been called

well without seeing the code that calls it, it’s hard to know what are the conditions outside of the function that have changed before it is called again.

it is only called once after some UI part executes. do you able to find two question i asked?

Then I am not sure I understand enough yet to answer your question. Sorry. I am just learning these things myself. I am not an expert on the material.

Perhaps someone with more knowledge, more understanding can answer your questions. And then we will both learn something new. :smiley:

dont worry we all are learning thanks for your time

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.