title: How to pass this from one function to another function in vanilla JavaScript?
body: <p>I have the current block of code:</p>
  <pre><code>cells.forEach(cell =&gt; {
    cell.addEventListener('click', clickHandler);
  })
  
  let turn = 0;
  
  function clickHandler() {
    alternateTurn(this).bind(this);
  // do more things here
  }
  
  function alternateTurn() {
    if(turn % 2 === 0) {
      this.innerHTML = 'X';
      this.style.color = 'red';
    } else {
      this.innerHTML = 'Y';
      this.style.color = 'blue';
    }
      turn++;
      this.classList.add('decoration');
  }
  </code></pre>
  <p>Now I want to pass the context of <code>this</code> from the clickHandler function to the alternateTurn function.</p>
  <ol>
  <li>How do I do that? I see answers on here that says I should use <code>call</code> or <code>apply</code>. But <code>call</code> and <code>apply</code> are used when I want to call the second function immediately. However, in this case, do I need to call it immediately?</li>
  <li>Once I pass in <code>this</code> from the clickHandler function, how do I invoke it in the second function?</li>
  </ol>