#blacktechmatters

...or you could always go with what Michael Jackson said... 

“Don’t stop ‘til you get enough.”

In any event...the point is don’t stop until you are satisfied. Your success is up to you. 

When all else fails...go with Journey...

In my never ending quest to understand all things JAVASCRIPT...I wanted to see if I could tackle .forEach()

Before I jump into that I have to very quickly go over something that I will cover a little later. 

It’s a good idea for me to touch on callback functions. 

Here’s the best way to define a callback function...

A callback function is a function that is passed as a PARAM to another function

AND the callback function is run INSIDE of the function it was passed to.

A callback function can be either SYNC or ASYNC. 

Having said all of that we can get into the ‘meat & potatoes’ of why I am blogging today. 

.forEach() call a function ONCE for each item in an array...in ascending order. The callback function is invoked (called) in THREE (3) arguments...

.forEach(value)  .forEach(__, index)  .forEach(__, __, object) 

Let me see if I can create an example that will make some kind of sense. 

let hotSauces = [”Tabasco”, “Cholula”, “Frank’s”] hotSauces.forEach(hotSauce => { console.log(hotSauce  +  “ain’t hot!”) } Tabasco ain’t hot! Cholula ain’t hot! Frank’s ain’t hot!

I want to talk about what I just did there.

I just said for each item (hotSauce) print out...individually that...(hotSauce) ain’t hot!

Yes, this is a very simplified example but it’s supposed to be. 

Hopefully that example was easy for you to understand. 

I am going to attempt to dig a little deeper. 

Let’s pretend I am in the middle of coding something and I want to use .forEach()

I’m gonna to go for it! 

const bags = document.querySelectorAll(’div’)   bags.forEach(bag => {   bag.addEventListener(’click’, clickOutcome) }) function clickOutcome() { alert(’I got hot sauce in my bag, SWAG!’) }

The above code is saying...

for each item (bag) an event listener will be added and when the bag is clicked the clickOutcome function is invoked (called) and we see the alert. 

This makes hella sense to me. I hope it made hella sense to you! 

It may feel like NOTHING is working...but you have to know that your effort is not in vain. 

This is the time to take a deep breath, take a break, and come back with the same determination you started with. 

Today we are going to be talking about this. 

That’s right, I still yappin’ about JavaScript.

Let me say this (not this) right off the bat, this is similar to self. 

If you haven’t read about self yet, pause here, read, and then come back.

Unfortunately the subject is not as straightforward as one may think. 

Personally, I would have chosen a different keyword...but what do I know? I just started coding in March. 

Time to actually talk like I understand some things. 

this = the object that is executing the present function. 

If the function is a method in an object, this is talking about the literal object.

If the function is NOT apart of an object, this is talking about the global object. 

const beer = { category: 'Stout', drink() { console.log(this); // {category: "Stout", drink: f}  } };

beer.drink();

I made a beer object. 

The beer object has a property called category.

The beer object also has a method called drink. 

When you see the beer object in the console this is talking about about the property and the method.  (drink is a method in the object)

Another example...

const beer = { category: 'Stout', drink() { console.log(this); } };

function drinkBeer() { console.log(this);  } drinkBeer();

When you call this, it’s is talking about whatever is in the “window”. You can also call this a global object.

Please understand that this by default is talking about a global object. 

When a method is inside of an object, this is talking about both the object and the method. 

Not that I made an example for this (not this) instance but, when you call a function with the new operator...this is talking about the new (not new) instance. 

I am sure reading this a few times will help something click in your head...it defiantly clicked as I was typing. 

This is most true for a developer.

In the words of Drake...

“Oh well, I guess you lose some and win some  Long as the outcome is income.”  

If I could change one thing I would make it say this...