{"id":19632,"date":"2020-07-16T16:29:06","date_gmt":"2020-07-16T23:29:06","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=19632"},"modified":"2023-12-01T03:55:24","modified_gmt":"2023-12-01T11:55:24","slug":"javascript-callback","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/javascript-callback\/","title":{"rendered":"How to Use JavaScript Callback Functions"},"content":{"rendered":"\n

You\u2019ve probably seen a few code snippets use the word \u201ccallback\u201d inside a function. Callbacks are a special type of function that are passed inside another function.
<\/p>\n\n\n\n

Callbacks are often used inside event handlers to run a block of code. In this guide, we\u2019re going to talk about what callback functions are and how they work. We\u2019ll walk through an example of a callback function to help you learn how to use them in your code.<\/p>\n\n\n\n

What is a Callback Function?<\/h2>\n\n\n\n

A callback function is a function<\/a> that is passed as a parameter into another function.
<\/p>\n\n\n\n

Callback functions are run within the function in which they are declared. When you execute a function, its callback function, if one is specified, will execute. Once it has run, the callback function will return a response to the main function.
<\/p>\n\n\n\n

Callback functions work because in JavaScript, every function is an object. This means that we can work with them like any other object. We can assign functions to variables, or pass them as arguments, just like we would with any other value.
<\/p>\n\n\n\n

Let\u2019s use a simple example to show how callbacks work. We\u2019re going to create a function which prints out a user\u2019s name for a video game to the console, followed by their character type. Let\u2019s start by declaring a function:
<\/p>\n\n\n\n

function printName(name, callback) {\n\tconsole.log(`Player Name: ${name}`);\n\tcallback();\n}\n<\/pre><\/div>\n\n\n\n
This is an anonymous JavaScript function which contains a callback. Anonymous functions are functions without a name. They usually appear inside other functions, like in the example above.
<\/p>\n\n\n\n
This callback is the second parameter in our code. When this function is run, the name of our player is printed to the console. Then, the contents of our callback() function are executed.
<\/p>\n\n\n\n
Now, let\u2019s use this function:
<\/p>\n\n\n\n
printName("Violet", function() {\n\tconsole.log("Character Type: Mage");\n})\n<\/pre><\/div>\n\n\n\n
We have called our function printName()<\/code> in this code. We have specified \u201cViolet\u201d as the player\u2019s name. We have specified a function which prints out the character type as the callback. Let\u2019s run this code and see what happens:
<\/p>\n\n\n\n
Player Name: Violet<\/p>\n\n\n\n
Character Type: Mage
<\/p>\n\n\n\n
The contents of the printName()<\/code> function are executed, followed by the contents of our callback function. Callback functions do not need to be declared when you are passing them as a parameter. We could refactor our code so that our callback function is on its own:
<\/p>\n\n\n\n
function printCharacterType() {\n\tconsole.log("Character Type: Mage");\n}\n\nprintName("Violet", printCharacterType())\n<\/pre><\/div>\n\n\n\n
This code will return the same response. We have created a function called printCharacterType()<\/code> which prints the character type of a player to the console. This function is executed when we run printName()<\/code>, as it is specified as a callback.<\/p>\n\n\n\n
Using Callbacks with Events<\/h2>\n\n\n\n
Callbacks are commonly used with JavaScript events<\/a>.
<\/p>\n\n\n\n
Events listen out for an action, like a user clicking a button, and run a block of code when that action is taken. Let\u2019s create a callback which runs when a user hovers over an image. Open up an HTML file and paste in the following code inside a <body> tag:
<\/p>\n\n\n\n
<img src=\u201c<\/code>https:\/\/careerkarma.com\/favicon.ico<\/code><\/a>\u201d id=\u201cimage\u201d \/>
<\/code><\/p>\n\n\n\n
This defines an image on the web page which a user can click. Then, enclose the following JavaScript code within a <script><\/code> tag:
<\/p>\n\n\n\n
var image = document.querySelector("#image")\n\nimage.addEventListener("mouseover", function() {\n\tconsole.log("The user has moused over the image.");\n});\n<\/pre><\/div>\n\n\n\n
This code selects the element<\/a> with the ID \u201cimage\u201d. It then uses the addEventListener method to listen out for when the user \u201cmouses over\u201d (hovers over) the image. When the user hovers over the image with their cursor, a message will be printed to the console:
<\/p>\n\n\n\n
The user has moused over the image.<\/p>\n\n\n\n
Using Callbacks with Web Requests<\/h2>\n\n\n\n
Web requests usually need to be executed in a synchronous way. This is because most web applications need to retrieve particular data before the rest of a page can be loaded.
<\/p>\n\n\n\n
Let\u2019s create a program which makes a request to the JSON Placeholder API, an API with dummy data that we can use for testing purposes. Our program should print the response to the console. We\u2019ll start by declaring a function which makes the request:
<\/p>\n\n\n\n
function makeRequest(url, callback) {\n\tvar query = await fetch(url).then(res => res.json());\n\tcallback(query);\n}\n<\/pre><\/div>\n\n\n\n
This function will make a web request using the fetch() API<\/a>. The response is assigned to the variable \u201cquery\u201d. We return the result of this web request to our callback by passing \u201cquery\u201d as an argument in our callback function. Now, let\u2019s call our function and print out its response to the console:
<\/p>\n\n\n\n
makeRequest("https:\/\/jsonplaceholder.typicode.com\/posts\/1", function(data) {\n\tconsole.log(data);\n});\n<\/pre><\/div>\n\n\n\n
This code instructs the makeRequest method to make a request to the JSON Placeholder API. Our callback function prints the data returned from this request to the console:
<\/p>\n\n\n\n
{\n  "userId": 1,\n  "id": 1,\n  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",\n  "body": "quia et suscipit\\nsuscipit recusandae consequuntur expedita et cum\\nreprehenderit molestiae ut ut quas totam\\nnostrum rerum est autem sunt rem eveniet architecto."\n}\n<\/pre><\/div>\n\n\n\n
Great! Our code has made a web request and printed its response to the console.<\/p>\n\n\n\n
Conclusion (and Challenge)<\/h2>\n\n\n\n
Callbacks allow you to pass a function as a parameter inside another function. They are commonly used within event handlers to run code when an event is executed or to make web requests.
<\/p>\n\n\n\n
Are you looking for a challenge? Write a callback function which executes when a button is pressed on a web page. If you\u2019ve already done this, try to write a function which sorts a list of items and uses a callback function to print each one to the console.
<\/p>\n\n\n\n
Now you\u2019re ready to start using JavaScript callbacks for asynchronous programming like a pro!
<\/p>\n","protected":false},"excerpt":{"rendered":"You\u2019ve probably seen a few code snippets use the word \u201ccallback\u201d inside a function. Callbacks are a special type of function that are passed inside another function. Callbacks are often used inside event handlers to run a block of code. In this guide, we\u2019re going to talk about what callback functions are and how they…","protected":false},"author":240,"featured_media":2620,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11933],"tags":[],"class_list":{"0":"post-19632","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"Java","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"\nHow to Use JavaScript Callback Functions | Career Karma<\/title>\n<meta name=\"description\" content=\"A callback function is a function that is passed as a parameter inside another function. On Career Karma, learn how to work with JavaScript callback functions.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/javascript-callback\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use JavaScript Callback Functions\" \/>\n<meta property=\"og:description\" content=\"A callback function is a function that is passed as a parameter inside another function. On Career Karma, learn how to work with JavaScript callback functions.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/javascript-callback\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-16T23:29:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T11:55:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/05\/irvan-smith-563895-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"675\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"James Gallagher\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James Gallagher\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/javascript-callback\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/javascript-callback\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"How to Use JavaScript Callback Functions\",\"datePublished\":\"2020-07-16T23:29:06+00:00\",\"dateModified\":\"2023-12-01T11:55:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/javascript-callback\/\"},\"wordCount\":848,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/javascript-callback\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/05\/irvan-smith-563895-unsplash.jpg\",\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/javascript-callback\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/javascript-callback\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/javascript-callback\/\",\"name\":\"How to Use JavaScript Callback Functions | Career Karma\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/javascript-callback\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/javascript-callback\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/05\/irvan-smith-563895-unsplash.jpg\",\"datePublished\":\"2020-07-16T23:29:06+00:00\",\"dateModified\":\"2023-12-01T11:55:24+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"A callback function is a function that is passed as a parameter inside another function. On Career Karma, learn how to work with JavaScript callback functions.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/javascript-callback\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/javascript-callback\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/javascript-callback\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/05\/irvan-smith-563895-unsplash.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/05\/irvan-smith-563895-unsplash.jpg\",\"width\":1200,\"height\":675},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/javascript-callback\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/careerkarma.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Java\",\"item\":\"https:\/\/careerkarma.com\/blog\/java\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Use JavaScript Callback Functions\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\",\"url\":\"https:\/\/careerkarma.com\/blog\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News & Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/careerkarma.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\",\"name\":\"James Gallagher\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"caption\":\"James Gallagher\"},\"description\":\"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.\",\"url\":\"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Use JavaScript Callback Functions | Career Karma","description":"A callback function is a function that is passed as a parameter inside another function. On Career Karma, learn how to work with JavaScript callback functions.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/careerkarma.com\/blog\/javascript-callback\/","og_locale":"en_US","og_type":"article","og_title":"How to Use JavaScript Callback Functions","og_description":"A callback function is a function that is passed as a parameter inside another function. On Career Karma, learn how to work with JavaScript callback functions.","og_url":"https:\/\/careerkarma.com\/blog\/javascript-callback\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-07-16T23:29:06+00:00","article_modified_time":"2023-12-01T11:55:24+00:00","og_image":[{"width":1200,"height":675,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/05\/irvan-smith-563895-unsplash.jpg","type":"image\/jpeg"}],"author":"James Gallagher","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"James Gallagher","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/javascript-callback\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-callback\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"How to Use JavaScript Callback Functions","datePublished":"2020-07-16T23:29:06+00:00","dateModified":"2023-12-01T11:55:24+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-callback\/"},"wordCount":848,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-callback\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/05\/irvan-smith-563895-unsplash.jpg","articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/javascript-callback\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/javascript-callback\/","url":"https:\/\/careerkarma.com\/blog\/javascript-callback\/","name":"How to Use JavaScript Callback Functions | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-callback\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-callback\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/05\/irvan-smith-563895-unsplash.jpg","datePublished":"2020-07-16T23:29:06+00:00","dateModified":"2023-12-01T11:55:24+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"A callback function is a function that is passed as a parameter inside another function. On Career Karma, learn how to work with JavaScript callback functions.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-callback\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/javascript-callback\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/javascript-callback\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/05\/irvan-smith-563895-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/05\/irvan-smith-563895-unsplash.jpg","width":1200,"height":675},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/javascript-callback\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Java","item":"https:\/\/careerkarma.com\/blog\/java\/"},{"@type":"ListItem","position":3,"name":"How to Use JavaScript Callback Functions"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News & Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94","name":"James Gallagher","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","caption":"James Gallagher"},"description":"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.","url":"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/19632","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=19632"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/19632\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/2620"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=19632"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=19632"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=19632"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}