{"id":10093,"date":"2016-01-12T16:11:50","date_gmt":"2016-01-12T14:11:50","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=10093"},"modified":"2018-01-10T16:13:46","modified_gmt":"2018-01-10T14:13:46","slug":"javascript-callback-function-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-callback-function-example\/","title":{"rendered":"Javascript Callback Function Example"},"content":{"rendered":"<p>By now you are all aware that functions in Javascript are first-class objects, which means that they behave like any other object: they can be stored in variables, be passed as arguments, or be returned from other functions.<\/p>\n<p>Because of this peculiar quality of theirs, they can be passed as arguments to other functions, which is the essence of callback functions. But let&#8217;s see it in more detail!<\/p>\n<h2>What are Callback Functions?<\/h2>\n<p><em>Callback Functions<\/em> are a derivative of a programming paradigm known as <em>functional programming<\/em>. A callback function, in itself is just a function passed as an argument to another function, and then executed inside of it. This is a widespread solution to many problems, so now we call it &#8220;callback pattern&#8221;. This pattern is used a lot not only in plain Javascript,  but also other programming languages and frameworks such as jQuery or Node.js.<br \/>\n[ulp id=&#8217;tCIwOngQUb3zSUuF&#8217;]<br \/>\n&nbsp;<br \/>\nLet&#8217;s see a very typical use in jQuery:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n$(&quot;#btn_1&quot;).click(function() {\r\n  alert(&quot;Btn 1 Clicked&quot;);\r\n});\r\n<\/pre>\n<p>As you can see, what we have passed as an argument to the method <code>click()<\/code> is not a variable but a whole function. The method will then invoke the function we passed to it. Let&#8217;s see how this goes in Javascript. Take a look at the code snippet below:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar friends = &#x5B;&quot;John&quot;, &quot;Jane&quot;, &quot;Bill&quot;, &quot;Mary&quot;];\r\n\u200b\r\nfriends.forEach(function (eachName, index){\r\nconsole.log(index + 1 + &quot;. &quot; + eachName); \r\n});\r\n<\/pre>\n<p>Note that in this example, as in the previous one, we have passed an anonymous function as a parameter to our method (<code>forEach()<\/code> in the second case). Let&#8217;s see how callback works with non-anonymous functions and start making our own callback functions.<\/p>\n<p>When we are passing a callback function as a parameter, we are only passing it&#8217;s definition, we are not executing it, as would be the case if we also passed the trailing pair of () parenthesis. Since the containing function also has the callback&#8217;s definition, it can execute it anytime. Usually, the callback is not executed immediately, but is &#8220;called back&#8221; at a specified time inside the containing function&#8217;s body. That is also the reason why we call it &#8220;callback&#8221;. <\/p>\n<p>Considering this, you now understand that in the example above, the unnamed function passed as a parameter is not executed immediately, but will be called later inside the method&#8217;s body. Even though the callback function doesn&#8217;t have a name, it can be accessed later using the <code>argument<\/code> object of the containing function. <\/p>\n<p>Another important thing to point out is that callback functions are <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Closures\" target=\"_blank\">closures<\/a>. That means that the callbacks are executed as if they were defined inside the body of the containing functions. That makes it possible for callbacks to access the variables set either in the containing function&#8217;s scope or  in the global one, apart from those placed in it&#8217;s own scope.<\/p>\n<h2>Using named functions as callbacks<\/h2>\n<p>In the previous examples we only used anonymous functions as callbacks. Another very popular way to do this is by declaring a named function and then passing it as a callback by it to the containing function. Take a look at the code snippet below:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n\u200bvar allUserData = &#x5B;];\r\n\u200b\r\n\u200bfunction logStuff (userData) {\r\n    if ( typeof userData === &quot;string&quot;)\r\n    {\r\n        console.log(userData);\r\n    }\r\n    else if ( typeof userData === &quot;object&quot;)\r\n    {\r\n        for (var item in userData) {\r\n            console.log(item + &quot;: &quot; + userData&#x5B;item]);\r\n        }\r\n\u200b\r\n    }\r\n\u200b\r\n}\r\n\u200b\r\n\u200bfunction getInput (options, callback) {\r\n    allUserData.push (options);\r\n    callback (options);\r\n\u200b\r\n}\r\n\u200b\r\ngetInput ({name:&quot;John&quot;, speciality:&quot;JavaScript&quot;}, logStuff);\r\n<\/pre>\n<p>What we&#8217;ve done here is pretty simple. First we have declared an empty array named <code>allUserData<\/code> as a global variable. Then we have declared a simple function named <code>logStuff<\/code> which just puts out things in our console. After defining this function we create another one named <code>getInput<\/code>, which will serve us as a containing function, as it takes two parameters, the second of which is a callback function. What we do in the last line is put all this to work by invoking the containing function. Considering our code, it would only take the inputs we gave it and print it out in the console. Easy, right?<\/p>\n<h2>Passing parameters to callback functions<\/h2>\n<p>Since callback functions are in essence just that, functions, we can  pass parameters to them. These can be global or local variables, or really, whatever. Take a look at the code snippet below:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar generalLastName = &quot;Clinton&quot;;\r\n\u200b\r\n\u200bfunction getInput (options, callback) {\r\n    allUserData.push (options);\r\n    callback (generalLastName, options);\r\n}\r\n<\/pre>\n<p>In this example the variable we have passed to the callback function is <code>generalLastName<\/code>, which is a global one, and also the local <code>options<\/code>.<\/p>\n<h2>Checking if callback is a function<\/h2>\n<p>When using named functions as callbacks, it is very recommended  to check if it really is a function first, before passing it as an argument. This is because it may happen that  the argument you pass is not a function, and you would be presented with a runtime error. Take a look below:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nfunction getInput(options, callback) {\r\n    allUserData.push(options);\r\n\u200b\r\n    if (typeof callback === &quot;function&quot;) {\r\n        callback(options);\r\n    }\r\n}\r\n<\/pre>\n<p>This is how the previous example would look with this added benefit. <\/p>\n<h2><em>this<\/em> in a callback function<\/h2>\n<p>When we use <code>this<\/code> keyword in a function that we will later use as a callback function we might encounter some problems. We have to preserve the value stored in it by modifying how we execute the callback function, or the keyword will point to the global window object when callback is passed to a global function,  or to the object of the containing function. Let&#8217;s see the example below:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar clientData = {\r\n    id: 01611,\r\n    fullName: &quot;Not Set&quot;,\r\n    setUserName: function (firstName, lastName)  {\r\n      this.fullName = firstName + &quot; &quot; + lastName;\r\n    }\r\n}\r\n\u200b\r\n\u200bfunction getUserInput(firstName, lastName, callback)  {\r\n    callback (firstName, lastName);\r\n}\r\ngetUserInput (&quot;Doe&quot;, &quot;John&quot;, clientData.setUserName);\r\n\u200b\r\nconsole.log (clientData.fullName);\r\n\u200b\r\nconsole.log (window.fullName); \r\n<\/pre>\n<p>Firstly, we have declared and object with some properties and a method named <code>setUserName<\/code>, which uses the keyword <code>this<\/code>. The latter refers to the <code>fullName<\/code> property of the <code>clientData<\/code> object. <\/p>\n<p>Secondly, we define the containing function, which takes three parameters, two of which are <code>firstName<\/code> and <code>lastName<\/code>, both properties of the object, and the third one is the callback function. After doing that we invoke the containing function, giving it <code>clientData.setUserName<\/code> as a callback function. Notice that it is the method we defined inside the object <code>clientData<\/code>. <\/p>\n<p>When the callback function is executed, <code>this.fullName<\/code> will not set the <code>fullName<\/code> property in the <code>clientData<\/code> object, since the function <code>getUserInput<\/code> is a global object. Instead it will set it on the window object, because there is where <code>this<\/code> is currently pointing.<\/p>\n<p>This problem can be easily solved by using the <code>call<\/code> and <code>apply<\/code> methods of functions. These methods are used to set the <code>this<\/code> object inside the function and to pass arguments to the functions. Both methods take the value to be used as the <code>this<\/code> object inside the function as a first parameter. While <code>call<\/code> takes the rest of the arguments individually (separated by commas), <code>apply<\/code> takes as a second argument an array of values that represent the rest of the arguments.<\/p>\n<p>Let&#8217;s see below how would we be using <code>apply<\/code> in the previous example to fix our problem:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n\u200bfunction getUserInput(firstName, lastName, callback, callbackObj)  {\r\n    callback.apply (callbackObj, &#x5B;firstName, lastName]);\r\n}\r\n\u2028getUserInput (&quot;John&quot;, &quot;Doe&quot;, clientData.setUserName, clientData);\r\n\u200b\r\nconsole.log (clientData.fullName); \r\n<\/pre>\n<p>As we explained the very subtle difference in using the two functions, you can very easily figure out how to do this by using the <code>call<\/code> function.<\/p>\n<h2>&#8220;Callback Hell&#8221;<\/h2>\n<p>You might have heard about asynchronous code execution. It consists of code executing in any order, not only line by line. Sometimes, when using multiple callbacks on numerous levels of your code, you will have a very cluttered code which will be impossibly difficult to follow. To demonstrate how your code could look like, take a look at the code snippet below:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar p_client = new Db('integration_tests_20', new Server(&quot;127.0.0.1&quot;, 27017, {}), {'pk':CustomPKFactory});\r\np_client.open(function(err, p_client) {\r\n    p_client.dropDatabase(function(err, done) {\r\n        p_client.createCollection('test_custom_key', function(err, collection) {\r\n            collection.insert({'a':1}, function(err, docs) {\r\n                collection.find({'_id':new ObjectID(&quot;aaaaaaaaaaaa&quot;)}, function(err, cursor) {\r\n                    cursor.toArray(function(err, items) {\r\n                        test.assertEquals(1, items.length);\r\n\u200b\r\n                        \/\/ Let's close the db\u200b\r\n                        p_client.close();\r\n                    });\r\n                });\r\n            });\r\n        });\r\n    });\r\n});\r\n<\/pre>\n<p>The code is difficult to understand because of how many callbacks there are. Even though you might not encounter this problem very often, you better be prepared for it if, on the off chance, you do (you might, if you look at the MongoDB driver for Node.js). This problem is called &#8220;callback hell&#8221; and the solution to it is to use named functions as callbacks instead of using anonymous ones that are defined in the parameter of the containing function. Another recommended practice is to divide your code into modules. Never underestimate the power of modularization. <\/p>\n<h2>Download the source code<\/h2>\n<p>This was an example of Callback Functions in Javascript. Download the source code for this tutorial: <\/p>\n<div class=\"download\"><strong>Download<\/strong><br \/>You can download the full source code of this example here :  <strong><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/CallbackFunctions.zip\">CallbackFunctions<\/a><\/strong><\/div>\n","protected":false},"excerpt":{"rendered":"<p>By now you are all aware that functions in Javascript are first-class objects, which means that they behave like any other object: they can be stored in variables, be passed as arguments, or be returned from other functions. Because of this peculiar quality of theirs, they can be passed as arguments to other functions, which &hellip;<\/p>\n","protected":false},"author":25,"featured_media":920,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[314],"class_list":["post-10093","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-functional-programming"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Javascript Callback Function Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"By now you are all aware that functions in Javascript are first-class objects, which means that they behave like any other object: they can be stored in\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-callback-function-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Javascript Callback Function Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"By now you are all aware that functions in Javascript are first-class objects, which means that they behave like any other object: they can be stored in\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-callback-function-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/era.balliu.7\" \/>\n<meta property=\"article:published_time\" content=\"2016-01-12T14:11:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-10T14:13:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Era Balliu\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@BalliuEra\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Era Balliu\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-callback-function-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-callback-function-example\/\"},\"author\":{\"name\":\"Era Balliu\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/c27ecf40c810e6396ba93ffb829c7b0e\"},\"headline\":\"Javascript Callback Function Example\",\"datePublished\":\"2016-01-12T14:11:50+00:00\",\"dateModified\":\"2018-01-10T14:13:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-callback-function-example\/\"},\"wordCount\":1514,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-callback-function-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"keywords\":[\"Functional Programming\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-callback-function-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-callback-function-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-callback-function-example\/\",\"name\":\"Javascript Callback Function Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-callback-function-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-callback-function-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"datePublished\":\"2016-01-12T14:11:50+00:00\",\"dateModified\":\"2018-01-10T14:13:46+00:00\",\"description\":\"By now you are all aware that functions in Javascript are first-class objects, which means that they behave like any other object: they can be stored in\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-callback-function-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-callback-function-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-callback-function-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-callback-function-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Javascript Callback Function Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/c27ecf40c810e6396ba93ffb829c7b0e\",\"name\":\"Era Balliu\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f6adddf7eada210f682608fea9d8159441369ec622998a5851a447e0a2bfa3f3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f6adddf7eada210f682608fea9d8159441369ec622998a5851a447e0a2bfa3f3?s=96&d=mm&r=g\",\"caption\":\"Era Balliu\"},\"description\":\"Era is a Telecommunications Engineering student, with a great passion for new technologies. Up until now she has been coding with HTML\/CSS, Bootstrap and other front-end coding languages and frameworks, and her recent love is Angular JS.\",\"sameAs\":[\"http:\/\/www.webcodegeeks.com\/\",\"https:\/\/www.facebook.com\/era.balliu.7\",\"https:\/\/www.instagram.com\/eraballiu\/\",\"https:\/\/www.linkedin.com\/in\/eraballiu\",\"https:\/\/www.pinterest.com\/001r2gw0jt0ln6d\/\",\"https:\/\/x.com\/BalliuEra\",\"https:\/\/www.youtube.com\/c\/eraballiu\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/era-balliu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Javascript Callback Function Example - Web Code Geeks - 2026","description":"By now you are all aware that functions in Javascript are first-class objects, which means that they behave like any other object: they can be stored in","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:\/\/www.webcodegeeks.com\/javascript\/javascript-callback-function-example\/","og_locale":"en_US","og_type":"article","og_title":"Javascript Callback Function Example - Web Code Geeks - 2026","og_description":"By now you are all aware that functions in Javascript are first-class objects, which means that they behave like any other object: they can be stored in","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-callback-function-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/era.balliu.7","article_published_time":"2016-01-12T14:11:50+00:00","article_modified_time":"2018-01-10T14:13:46+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","type":"image\/jpeg"}],"author":"Era Balliu","twitter_card":"summary_large_image","twitter_creator":"@BalliuEra","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Era Balliu","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-callback-function-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-callback-function-example\/"},"author":{"name":"Era Balliu","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/c27ecf40c810e6396ba93ffb829c7b0e"},"headline":"Javascript Callback Function Example","datePublished":"2016-01-12T14:11:50+00:00","dateModified":"2018-01-10T14:13:46+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-callback-function-example\/"},"wordCount":1514,"commentCount":2,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-callback-function-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","keywords":["Functional Programming"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/javascript-callback-function-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-callback-function-example\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-callback-function-example\/","name":"Javascript Callback Function Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-callback-function-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-callback-function-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","datePublished":"2016-01-12T14:11:50+00:00","dateModified":"2018-01-10T14:13:46+00:00","description":"By now you are all aware that functions in Javascript are first-class objects, which means that they behave like any other object: they can be stored in","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-callback-function-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/javascript-callback-function-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-callback-function-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-callback-function-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"Javascript Callback Function Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/c27ecf40c810e6396ba93ffb829c7b0e","name":"Era Balliu","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f6adddf7eada210f682608fea9d8159441369ec622998a5851a447e0a2bfa3f3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f6adddf7eada210f682608fea9d8159441369ec622998a5851a447e0a2bfa3f3?s=96&d=mm&r=g","caption":"Era Balliu"},"description":"Era is a Telecommunications Engineering student, with a great passion for new technologies. Up until now she has been coding with HTML\/CSS, Bootstrap and other front-end coding languages and frameworks, and her recent love is Angular JS.","sameAs":["http:\/\/www.webcodegeeks.com\/","https:\/\/www.facebook.com\/era.balliu.7","https:\/\/www.instagram.com\/eraballiu\/","https:\/\/www.linkedin.com\/in\/eraballiu","https:\/\/www.pinterest.com\/001r2gw0jt0ln6d\/","https:\/\/x.com\/BalliuEra","https:\/\/www.youtube.com\/c\/eraballiu"],"url":"https:\/\/www.webcodegeeks.com\/author\/era-balliu\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/10093","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=10093"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/10093\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/920"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=10093"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=10093"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=10093"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}