Give the Array Items in a forEach method the value 'this' (javascript)

Question

I'm using a forEach method on an array and I would like to make the array items have the value 'this'.

When I change 'item' in the code below to = 'this' nothing happens.

Is it possible to do this with the forEach method, or is what I'm trying to do just not possible?

I've simplified the problem from the actual code I'm using so as not to add further complications (in the actual code the array items control a series scroll triggers and I need each one of these to have the value 'this').

In the example below I just need to use 'this' to change the background color.

Codepen link is here https://codepen.io/emilychews/pen/boJBKB

 var div1 = document.getElementById('div1'); var div2 = document.getElementById('div2'); var div3 = document.getElementById('div3'); var myArray = [div1, div2, div3] myArray.forEach(function(item) { item = this; this.style.backgroundColor = "blue"; }) 

 .div { height: 50px; width: 50px; background-color: red; margin-bottom: 10px; } 

 <div class="div" id="div1"></div> <div class="div" id="div2"></div> <div class="div" id="div3"></div> 

Answer 1

You can set the value of this in the callback, but you can't set it to a new item on each iteration. This would be unnecessary and redundant because the parameter exists for that purpose.

in the actual code the array items control a series scroll triggers and I need each one of these to have the value 'this'

As to the actual situation you alluded to, you'll need to give more detail. A separate function may be sufficient.

 var div1 = document.getElementById('div1'); var div2 = document.getElementById('div2'); var div3 = document.getElementById('div3'); var myArray = [div1, div2, div3]; myArray.forEach(function(item) { doStuff.call(item); }); function doStuff() { this.style.backgroundColor = "blue"; } 

 .div { height: 50px; width: 50px; background-color: red; margin-bottom: 10px; } 

 <div class="div" id="div1"></div> <div class="div" id="div2"></div> <div class="div" id="div3"></div> 

Here we use .call() to invoke doStuff() , so that the first argument to .call() becomes the this value of doStuff .

Answer 2

Array.prototype.forEach is different from jQuery 's each function as forEach passes the item from the array, the index of that item and the array itself to its callback function. So the callback is supposed to be like:

function(item, index, array)

And forEach , unlike each , doesn't pass the item as this to its callback, so you have to use item . So, since you don't specify the this parameter to forEach and the function doesn't appear to be bound to any this , the this inside it will refer to window .

That beign said, your code should be:

myArray.forEach(function(item){
    item.style.backgroundColor = "blue";
//  ^^^^ item is the current item from the array myArray
});

Note:

As mentioned by @newToJs, you could use document.getElementsByClassName or document.querySelectorAll to get the all divs in one go rather than getting them one by one using document.getElementById :

 var divs = document.querySelectorAll(".div"); // divs is not an array (it is a NodeList which is an array-like object) that does not have a forEach function (at least not in some older browsers), so we have to use .call of forEach like so [].forEach.call(divs, function(item) { item.style.backgroundColor = "blue"; }); 

 .div { height: 50px; width: 50px; background-color: red; margin-bottom: 10px; } 

 <div class="div" id="div1"></div> <div class="div" id="div2"></div> <div class="div" id="div3"></div>