How to target specific index with forEach array method?

Question

So what I want to do is console.log a specific element of my array of three nodes.

const sentinel = document.querySelectorAll('.sentinel');

    sentinel.forEach(function(element, index){
    setInterval(function(element) {

        if(index === 0){
            console.log(element);
        }

    }, 3000);
});

I've googled, and I've found this post: Get a specific element within forEach loop, which does ask the same question. However, when I console log the element I expect to get the node on the 0 index. However, I get a null element.

Remove the element parameter from the setInterval callback — adiga
– adiga, Commented Jan 4, 2020 at 12:11
Have a look at the documentation for setInterval. There it is mentioned how you can pass something to the callback invoked by setInterval() (which in this case is not necessary because it's in a .forEach()) — Andreas
– Andreas, Commented Jan 4, 2020 at 12:14

StepUp · Accepted Answer · 2020-01-04 12:30:22Z

2

You can remove element from setInterval because inner function setInterval has an access to the variables of outer function such as element. Such behavior is called closure.

In addition, it is possible to use arrow functions to make shorter and cleaner your code. Moreover, arrow functions:

An arrow function does not have its own this. The this value of the enclosing lexical scope is used; arrow functions follow the normal variable lookup rules.

sentinel.forEach((element, index) => {
   setInterval(() =>{

    if (index === 0){
        console.log(element);
    }

}, 3000);

edited Jan 4, 2020 at 12:30

answered Jan 4, 2020 at 12:12

StepUp

38.5k16 gold badges95 silver badges159 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

adiga Over a year ago

The callback can get arguments. It needs to be passed after the delay parameter to setInterval

Andreas Over a year ago

What do arrow functions have to do with the problem/answer?

Andreas Over a year ago

"You can remove element from setInterval" - Why?

Andreas Over a year ago

Better but I still miss an explanation why just using element works. But why the quote on this for arrow functions? Neither you nor OP use this anywhere. And if you're already adding unrelated stuff then also add a link to the question why you can not always simply exchange a function() { ... } with an arrow function.

StepUp Over a year ago

@Andreas 1.*I still miss an explanation why just using element works* Because inner function setInterval has an access to the variables of outer function such as element. Such behavior is called closure 2. But why the quote on this for arrow functions? This quote is additional info to describe important feature of arrow functions

HoangHieu · Accepted Answer · 2020-01-04 12:17:16Z

1

So actually you need to bind element into setInterval function

const sentinel = document.querySelectorAll('.sentinel');

sentinel.forEach(function(element, index){
    (function (_element, _index){
        setInterval(function() {

           if(_index === 0){
             console.log(_element);
           }

        }, 3000);
    })(element, index);
});

answered Jan 4, 2020 at 12:17

HoangHieu

2,8403 gold badges32 silver badges46 bronze badges

1 Comment

adiga Over a year ago

There is no need for IIFE here. You can pass arguments to the callback from setInterval itself. Anything passed after 3000 (delay parameter), will be used in the callback. So, setInterval(function (e, i) {... }, 3000, element, index) should work. Documentation

Collectives™ on Stack Overflow

How to target specific index with forEach array method?

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related