title: What is the difference between callback, high-order functions, and callback queue
body: <p>At this point, I have a question on what exactly is a <strong>callback</strong>, what makes it different from a <strong>high-order function</strong> and how does it relate to the concept of <strong>callback queue</strong>?</p>
  
  <p>From MDN: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Callback_function" rel="noreferrer">Callback function</a></p>
  
  <blockquote>
    <p>A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.</p>
  </blockquote>
  
  <p>Looks like there's an overlap with the definition of High-Order Functions. A function that gets passed (and later invoked) to another function.</p>
  
  <p>This is the MDN example of a callback:</p>
  
  <pre><code>function greeting(name) {
    alert('Hello ' + name);
  }
  
  function processUserInput(callback) {
    var name = prompt('Please enter your name.');
    callback(name);
  }
  
  processUserInput(greeting);
  </code></pre>
  
  <p>No doubt so far.</p>
  
  <p>I then faced with the idea of <strong>Event Loop</strong> and <strong>Callback queue</strong>.</p>
  
  <pre><code> console.log("me first");
  
    setTimeout(function asyncLog() {
         console.log("i am the last")
    }, 2000);
  
    console.log("me second")
  </code></pre>
  
  <p>Turns out the <code>seTimeout</code> function, is actually a JavaScript wrapper that interfaces under the hood with Web Browser API (timer). setTimeout passes to the Timer API a function (asyncLog) and the timer (2000ms).</p>
  
  <p>When the timer feature (in the web browser) has completed its work, will send the function <code>asyncLog</code> in the <code>callback queue</code> ready to be invoked in the call stack as soon as the JS call stack is (1) Empty and (2) has processed everything in the global execution context.</p>
  
  <p>So after the last line <code>console.log("me second")</code> is processed the Event Loop passes the callback function <code>asyncLog</code> from the callback queue to the call stack, and executes it.</p>
  
  <p>The final order is:</p>
  
  <pre><code>me first
  me second
  i am the last
  </code></pre>
  
  <p>In the first example, even though we are referring to <code>greeting</code> as the "callback" function, my understanding suggests that the entire mechanism of Callback queue gets skipped entirely: we're not doing anything asynchronous and we're not interfacing with the web browser API (everything is self-contained into JS).</p>
  
  <p>If so, why do we refer to functions that get passed into other functions as callbacks (and not as simple High-order functions), when they have nothing to do with the callback queue and with the asynchronous world?</p>