title: understanding an eventListener solution from Eloquent JavaScript
body: <p>Help would be really appreciated, I’ve been trying to figure this out for hours now.</p>
  
  <p>So this was the solution to an exercise I was doing:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;tab-panel&gt;
  &lt;div data-tabname="one"&gt;Tab one&lt;/div&gt;
  &lt;div data-tabname="two"&gt;Tab two&lt;/div&gt;
  &lt;div data-tabname="three"&gt;Tab three&lt;/div&gt;
  &lt;/tab-panel&gt;
  &lt;script&gt;
  function asTabs(node) {
  let tabs = Array.from(node.children).map(node =&gt; {
    let button = document.createElement("button");
    button.textContent = node.getAttribute("data-tabname");
    let tab = {node, button};
    button.addEventListener("click", () =&gt; selectTab(tab));
    return tab;
  });
  let tabList = document.createElement("div");
  for (let {button} of tabs) tabList.appendChild(button);
  node.insertBefore(tabList, node.firstChild);
  
  function selectTab(selectedTab) {
    for (let tab of tabs) {
      let selected = tab == selectedTab;
      console.log(selected)
      tab.node.style.display = selected ? "" : "none";
      tab.button.style.color = selected ? "red" : "";
    }
  }
  selectTab(tabs[0]);
  }
  asTabs(document.querySelector("tab-panel"));
  &lt;/script&gt;
  </code></pre>
  
  <p>the part that confused me is on line 13:</p>
  
  <pre><code>button.addEventListener("click", () =&gt; selectTab(tab));
  </code></pre>
  
  <p>Normally when adding event listeners, you wouldnt need to place a function call inside another function - it would be sufficient to say something like this:</p>
  
  <pre><code>button.addEventListener("click", selectTab(tab));
  </code></pre>
  
  <p>However when I do, an error comes up saying:</p>
  
  <pre><code>ReferenceError: tabs is not defined (line 15 in function selectTab)
  called from line 7 in function Array.from.map.node
  called from line 3 in function asTabs
  called from line 25
  </code></pre>
  
  <p>and that’s where I’m lost.
  Thanks for your time as always</p>