top of page
Search
  • Writer's pictureMegan Spaulding

Updated: Mar 20, 2018

Say you run a donut shop, and you've decided to increase the price of each of the donuts you offer by $1. Your store has hundreds of donut options, and individually changing each price would be time consuming and repetitive, so you decide to use a forEach loop to update your array. But HOW do we change the value of our array within a forEach loop?


First things first, let's set up our forEach loop!

The function in a forEach loop can take in 3 arguments: element, index and array, in that order.


When going to change the value of an array, you might think to use element. After all, that is what holds the value. But, when you go to try to console.log your array, you're not seeing any changes.


Maybe you even try console.logging within the loop. This makes matters EVEN MORE confusing, because the loop prints out the correct values, but when you go to print the array itself, it still remains unchanged!



Why?! It's so frustrating and confusing!


You see, the problem is that the "element" argument is only temporarily holding a value. It really has no other information than that. Because of this, the element argument doesn't know where the data you want to change lives. Without this vital information, it can't actually change the array, as it doesn't know what piece of the array it is changing.


It's almost as if it suffers short term memory loss.... Think Dori, from Finding Nemo... She can tell you her name is Dori... But she can't actually tell you where she's from.


So how DO we change the array? The answer is to use the index value. The index is kind of like the address. It knows exactly where the value you're testing lives, and where to go to change it.



Now when we console.log the array, we can see that the values have been updated.


Still confused?! That's ok! Let's think about this from a real-life perspective.


Say you want to buy a new front door. You call your local door salesman and tell him you'd like to order a new door.



In fact, you tell him you'd like for him to paint the door green, before coming to install it. You give him your credit card information, pay for the door, and hang up the phone.


What's the problem? When you hang up the phone, the door salesman is on the other line scratching his head, because while you've paid for your green door, he doesn't know where to deliver it to. You never told him where you lived.





If you called back, he could tell you that you ordered a green door, but until you tell him where you live, he can't actually change your door.


This is similar to when you use element. Element can tell you there is a "door", it can even seemingly "paint it green", but until it has the index, or the "address", the door won't be changed.


Now, if you call the salesman back, and give him your address, he can then come and change out your door, and you'll finally have your brand new green door.





Your address is like the index, it tells you which "door" to change.


So, without the index you can reference your data, but you cannot change it.





Let's use another real-life example, to help drive this home.


My name is Megan, but my two year old calls me "mama." Just because Foster calls me "mama," doesn't make it my legal name.


This is similar to how element works. Element can tell me my name is Megan, you can even have it call me mama in certain circumstances, but legally within the array my name remains "Megan," not "mama."





Now, if I go to the courthouse and stand in front of a judge, he can legally change my name to "mama" if I ask him to.





In forEach functions, the index is the judge who says "yes, you can permanently change the value here."


When you get down to it, it's all a matter of what does what!


GWG Students, if you have any further questions, please don't hesitate to message me on Slack.


@Megan Spaulding, Lesson 15 & 18 Student Leader

134 views0 comments
bottom of page