콜백, 왜 써야 되는 건데?

• A callback is merely a defined action that occurs in response to something.

 

• A callback can be set to fire at the completion of an event handler

 

• The function that gets fired when AJAX completes.... that is a callback

 

• Mentally rename them functionToRunWhenYoureDone.

 

• Example: http.get(url, callback) basically says: hey http module, get me this url, oh and also here's a function you should run when you're done!

 

• Every time you run some code, you always need some way to communicate with code that isn't your own. In the browser you may need to communicate with the browser DOM. In a native app you may need to communicate with the OS.So, you call the function that is provided to you and the function just returns a value that you can store in a variable and use in the next part of your code.So with a callback, not only do you get a return value, you also get the possibility to specify how the return value should be processed afterwards.One way around that is to use callbacks. Since callbacks are automatically executed once the external code is done doing its thing, you no longer need to wait for the external code to return. Your code can continue doing unrelated tasks or simply exit and yield control back to the browser or operating system. That way your browser can update the UI or do other stuff it needs to do, without being halted by your code just waiting for stuff to happen. This means your app is more responsive and system resources are used more efficiently.

 

• This may seem useless when thinking about simple imperative code, or in other words code that is just a sequence of steps, "Do this, then do this, then do this." and so on. The problem that often comes up with this approach, is that while your sequence of steps are being run, your application can't do anything else, like for instance updating the UI. So if external calls take a long while to complete, it may seem that your application locks up and becomes unresponsive.

 

• Callbacks builds on this by allowing you to tell the external code that once it is done finding the result, instead of just returning it, it should run a function that you provide and put the result in as an argument to that function.

 

• The simplest way to do that is to call a function that the external code provides and wait for it to return a result. In a native app you might call an OS function that returns how many printers are attached to your computer. In a browser app you might want to find a particular node in the DOM tree.

 

• A callback is simply a function passed as an argument to another function.

 

• Function Wrapper
  • () ⇒ {…} 
  • Wraps custom logic to be executed later
  • setTimeout( () => { const order = Math.random() > 0.5 ? 'Coffee' : 'Tea'; callback(order); // Calling the callback with custom behavior }, 1000 );

 

• Usage
  • setTimeout : built-in JS function to execute first parameter after certain delay
  • setTimeout(callback(), 1000) (X, wrong usage)
    • This is incorrect because callback() executes the callback function immediately and passes its result
    • function sayHi() { console.log('Hi'); } setTimeout(sayHi(), 1000); // Wrong: "Hi" logs immediately, nothing happens after 1 second.
  • setTimeout(callback, 1000) (O, pass Reference)
    • setTimeout will execute the function after the delay.
    • function sayHi() { console.log('Hi'); } setTimeout(sayHi, 1000); // Correct: "Hi" will log after 1 second.
  • setTimeout( () ⇒ { callback(’Tea’); } , 1000) (O, wraps custom logic that calls callback with ‘tea’)

 

출처 : https://www.reddit.com/r/javascript/comments/3muplc/how_do_you_quickly_and_intuitively_understand/