How does javascript callback work

You may unsubscribe at any time using the unsubscribe link in the digest email. See our privacy policy for more information. By design, JavaScript is a synchronous scripting language. In fact, many of the widely used asynchronous functions in JavaScript are not part of the core language. Understanding how asynchronous features work in the JavaScript ecosystem, including the role played by external APIs, is an essential part of using the language effectively. This post will show you how to use asynchronous functionality in JavaScript.

Understanding this difference is essential to understanding how to do asynchronous programming with JavaScript. JavaScript programs rely on a JavaScript runtime environment for execution.

Browsers, like Chrome and Firefox, and application servers, like Node. This enables websites to run JavaScript in client browsers and standalone JavaScript applications to run in Node. While Chrome and Node. In many execution environments, such as Java application servers,.

NET, and Ruby on Rails, speed, scalability, and throughput are handled by spawning new threads of execution. This is how many web servers respond dynamically to changing traffic volume, but it comes with overhead costs in thread scheduling and context switching.

JavaScript uses a single-threaded, nonblocking , event loop to provide concurrency. In the case study code below you'll see the JavaScript event loop in action and you'll get first-hand experience using the callback queue. This is why understanding JavaScript callbacks is essential to understanding asynchronous programming in JavaScript. In server-side applications, like those running on Node.

Because JavaScript is a synchronous language by design, and because the event loop is implemented in the JavaScript engines that are part of browsers and application servers, all of the asynchronous functionality in JavaScript is implemented in external libraries.

In fact, even commonly used asynchronous functions like setTimeout are provided by libraries and interfaces. Access to the DOM and functions for manipulating it are built in to the language. As the use of JavaScript expanded into more areas, such as server-side functionality with Node. There is a companion repository for this post available on GitHub. Begin your exploration of concurrency in JavaScript by initializing a new Node. You can initialize the project and its Git repository with a series of command line instructions.

Open a console window and execute the following instructions in the directory where you want to create the project directory:. You can learn more about initializing Node.

You can see how the JavaScript event loop works by writing a few simple functions. In the first example the code executes synchronously from the stack and behaves the way you'd expect it to from looking at the code. Then you'll write a function that behaves in a way you might not expect. Create a greet. Run the program with Node. You may know the setTimeout method. It accepts two parameters: the first is a function you want to execute and the second is the time, in milliseconds, the program should wait before executing the function.

The function to be executed is passed to setTimeout as an argument. This is a callback function: it's a function you want to run after the function to which you're passing it as an argument does whatever it's supposed to do. In the case of setTimeout , this just means waiting a number of milliseconds. Modify the greet function in the greet. Learn to code for free. Get started.

Forum Donate. Cem Eygi. What is a Callback Function? In JavaScript, functions are objects. Can we pass objects to functions as parameters? You can also watch the video version of callback functions below: Why do we need Callback Functions?

What is an Anonymous Function? As you can see, callback functions are also used for event declarations in JavaScript. You could call a calculator function myCalculator , save the result, and then call another function myDisplayer to display the result:. Or, you could call a calculator function myCalculator , and let the calculator function call the display function myDisplayer :.

The problem with the first example above, is that you have to call two functions to display the result.

The problem with the second example, is that you cannot prevent the calculator function from displaying the result. Using a callback, you could call the calculator function myCalculator with a callback, and let the calculator function run the callback after the calculation is finished:.

So what happens now when we invoke our functions? Even though we invoked the first function first, we logged out the result of that function after the second function. So why show you this? Alright, enough talk, lets create a callback!

Our function takes one variable, the subject that we are working on. Call your function by typing the following into your console:. Now lets add in our callback — as our last parameter in the doHomework function we can pass in callback. The callback function is then defined in the second argument of our call to doHomework.

They can be defined elsewhere in our code like this:. This result of this example is exactly the same as the previous example, but the setup is a little different. Last week I published an article on how to Create a Twitter Bot in 38 lines of code. The only reason the code in that article works is because of Twitters API. When you make requests to an API, you have to wait for the response before you can act on that response.

This is a wonderful example of a real-world callback. A callback is important here because we need to wait for a response from the server before we can move forward in our code.