Iterating array-like objects using forEach, [].forEach.call(...) or Array.prototype.slice.call(...).forEach?

Question

We can achieve iteration on array-like objects using both of the following methods:

let arrayLike = document.getElementsByClassName('dummy');

[].forEach.call(arrayLike, (e) => {
  console.log(e);
});

<div class = "dummy">Test1</div>
<div class = "dummy">Test2</div>

Or using slice to convert array-like objects to array first:

let arrayLike = document.getElementsByClassName('dummy');

Array.prototype.slice.call(arrayLike).forEach((e) => {
  console.log(e);
});

<div class = "dummy">Test1</div>
<div class = "dummy">Test2</div>

Which one is more preferrable and why in the case where I need not the converted array-like object? The first one feels a little 'hacky' but the second one feels more readable. Or are both just the same, meaning both will do just fine?

[...arrayLike].forEach() or Array.from(arrayLike)

adiga
– adiga

2019-04-08 08:52:44 +00:00
Commented Apr 8, 2019 at 8:52 — adiga
– adiga, Commented Apr 8, 2019 at 8:52
Another option is for...of

hindmost
– hindmost

2019-04-08 08:54:32 +00:00
Commented Apr 8, 2019 at 8:54 — hindmost
– hindmost, Commented Apr 8, 2019 at 8:54

Nina Scholz · Accepted Answer · 2019-04-08 08:52:42Z

4

You could take Array.from and convert the array like object to a real array. Then iterate with some of the array methods.

let array = Array.from(document.getElementsByClassName('dummy'));

array.forEach((e) => {
    console.log(e);
});

<div class = "dummy">Test1</div>
<div class = "dummy">Test2</div>

answered Apr 8, 2019 at 8:52

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

5 Comments

Richard Over a year ago

That's only supported in ES6 (2015), which I think is kinda new? I did think that it's so much cleaner, but am worried about its support.

maazadeeb Over a year ago

Unless you plan to support <=IE11, looks like you're covered without a polyfill: link

Nina Scholz Over a year ago

you take arrow functions and let. it is supported in more or less any browser, without IE.

Richard Over a year ago

I'm not planning to support below IE11, if at all xD Thank you for the answer.

Richard Over a year ago

Oh just found out that the things I've used are from ES6. I was worried for nothing.

brk · Accepted Answer · 2019-04-08 08:54:43Z

1

You can also use spread syntax

[...document.getElementsByClassName('dummy')].forEach((e) => {
  e.classList.add('test')
});

.test {
  color: green;
}

<div class="dummy">Test1</div>
<div class="dummy">Test2</div>

answered Apr 8, 2019 at 8:54

brk

50.3k10 gold badges59 silver badges85 bronze badges

Comments

Jack Bashford · Accepted Answer · 2019-04-08 08:59:48Z

0

Use Array.from, slice or ... (spreading):

var divs = [...document.getElementsByClassName('dummy')]
divs.forEach(d => console.log(d));
var divs2 = Array.from(document.getElementsByClassName('dummy'));
divs2.forEach(d => console.log(d));
var divs3 = Array.from(document.getElementsByClassName('dummy'));
divs3.forEach(d => console.log(d));

<div class="dummy">Test1</div>
<div class="dummy">Test2</div>

answered Apr 8, 2019 at 8:59

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

Collectives™ on Stack Overflow

Iterating array-like objects using forEach, [].forEach.call(...) or Array.prototype.slice.call(...).forEach?

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related