Why is function argument is 'transformed' into an array

Question

I cannot understand why first argument of the callback for the Intersection Observer is 'transformed' into an array.

(function () {
  var observer = new IntersectionObserver(function (entries) {
    // entries is an array
    console.log('entries', entries);
    if (entries[0].isIntersecting) {
      observer.unobserve(entries[0].target);
    }
  });

  var target = document.querySelector('#load'); // this in NOT an array
  console.log('target', target);
  observer.observe(target);
})();

<div id="load">load</div>

You would know it by looking at the documentation (maybe the same documentation that gave you the start for the rest of the code), and it’s like that because having a value that’s sometimes an array and sometimes not depending on how many elements you’re observing would be bad API design. — Ry-, Apr 18 '20 at 19:50
@Ry- Maybe you could explain why the argument is 'transformed' into an array, if I do not pass an array to the function... — jack, Apr 18 '20 at 19:58
I supposed they implemented it this way to make the API lighter, perhaps? So they were't needing to check what you passed as query selector. It's not that difficult to add `[0]` to the end of the returned array after all. From MDN docs: the callback's first argument is "An array of IntersectionObserverEntry objects, one for each target element whose intersection with the root has changed since the last time the intersections were checked." So where you have named your callback argument "entry" I would instead name it "entries" since this ALWAYS returns an array. — mepley, Apr 18 '20 at 20:00
@mepley I understand that. Maybe I asked the wrong question. Maybe I should have asked `why (or how) does a non-array value transfrom into an array after passed in a function` — jack, Apr 18 '20 at 20:03
This might interest you: https://github.com/w3c/IntersectionObserver/issues/81 and this... https://www.w3.org/TR/intersection-observer/ — mepley, Apr 18 '20 at 20:07
`.observe(element)` adds an element to the set of elements to be observed. The callback is called with a set of entries, where each element being observed can have zero or one corresponding entries. It’s not really a transformation. — Ry-, Apr 18 '20 at 20:07

score 1 · Answer 1 · answered Apr 18 '20 at 21:02

From the documentation:

The IntersectionObserver method observe() adds an element to the set of target elements being watched by the IntersectionObserver. One observer has one set of thresholds and one root, but can watch multiple target elements for visibility changes in keeping with those. […]

When the visibility of the specified element crosses over one of the observer's visibility thresholds […], the observer's callback is executed with an IntersectionObserverEntry representing the intersection change which occurred. Note that this design allows multiple elements' intersection changes to be processed by a single call to the callback using an array of IntersectionObserverEntry objects.

_{(emphasis mine)}

Why is function argument is 'transformed' into an array

1 Answers1