{"id":4845,"date":"2021-08-20T04:06:41","date_gmt":"2021-08-20T04:06:41","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=4845"},"modified":"2021-08-20T05:30:18","modified_gmt":"2021-08-20T05:30:18","slug":"javascript-callbacks-promises-and-async-await","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/javascript-callbacks-promises-and-async-await\/","title":{"rendered":"Javascript Callbacks, Promises, and Async\/await"},"content":{"rendered":"

In this article, I will cover some tips and tricks for javascript that should be known by all javascript developers.<\/p>\n

Callback functions:<\/strong> A callback function is a function passed into another function as an argument, It can run after another function has finished. This technique allows a function to call another function.<\/p>\n

Using a javascript callback, you could call the calculator function (myCalculator) with a callback, and let the calculator function run the callback after the calculation is finished.
\nWhen you pass a function as an argument<\/a>, remember not to use parenthesis.
\nfunction myDisplayer(some) {
\n document.getElementById(\"demo\").innerHTML = some;
\n}
\nfunction myCalculator(num1, num2, myCallback) {
\n let sum = num1 + num2;
\n myCallback(sum);
\n}
\n\/\/ Use function without parentheses
\nmyCalculator(5, 5, myDisplayer);<\/code>
\nPromise:<\/strong> Promises are used to handle asynchronous\/ operations in JavaScript. They are easy to manage when handling multiple asynchronous operations where callbacks can create callback hell resulting in unmanageable code.
\nA promise is an object that may produce a single value sometime in the future: either a resolved value or a reason that it\u2019s not resolved (e.g., a network error occurred). A promise could also be in one of three possible states: fulfilled, rejected, or pending. Promise users can attach callbacks to handle the fulfilled value or the rationale for rejection.
\nvar promise = new Promise(function(resolve, reject) {
\n reject('Promise Rejected')
\n})
\npromise
\n .then(function(successMessage) {
\n console.log(suforccessMessage);
\n })
\n .catch(function(errorMessage) {
\n \/\/error handler function is invoked
\n console.log(errorMessage);
\n });<\/code><\/p>\n

Async\/await:<\/strong> An async function is a function declared with the async keyword, and the await keyword is permitted within them. The async and await keywords enable asynchronous, promise-based behavior to be written in a cleaner style, avoiding the need to explicitly configure promise chains.<\/p>\n

Example for Async:<\/h2>\n

async function myFunction() {
\n return \"Hello World!\";
\n}
\nmyFunction().then(
\n function(value) {myDisplayer(value);},
\n function(error) {myDisplayer(error);}
\n);<\/code>
\nAwait keyword can be only used inside the Async function. It is used before a function makes the function wait for a promise.
\nasync function myDisplay() {
\n let myPromise = new Promise(function(myResolve, myReject) {
\n\tmyResolve(\"I love You !!\");
\n });
\n document.getElementById(\"demo\").innerHTML = await myPromise;
\n}
\nmyDisplay();<\/code><\/p>\n

If you have skills in PHP programming and you want to enhance your career in this field, a PHP certification<\/a> from StudySection can help you reach your desired goals. Both beginner level and expert level PHP certification exams are offered by StudySection along with other programming certification exams. <\/em><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"

In this article, I will cover some tips and tricks for javascript that should be known by all javascript developers.<\/p>\n","protected":false},"author":1,"featured_media":4846,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[695,696],"acf":[],"yoast_head":"\nJavascript Callbacks, Promises, and Async\/await - SS Blog<\/title>\n<meta name=\"description\" content=\"A callback function in Javascript is a function passed into another function as an argument, It can run after another function has finished.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/studysection.com\/blog\/javascript-callbacks-promises-and-async-await\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Javascript Callbacks, Promises, and Async\/await - SS Blog\" \/>\n<meta property=\"og:description\" content=\"A callback function in Javascript is a function passed into another function as an argument, It can run after another function has finished.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/studysection.com\/blog\/javascript-callbacks-promises-and-async-await\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Posts on famous people, innovations and educational topics\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/studysection\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-20T04:06:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-20T05:30:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/08\/Javascript.png\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin-studysection-blog\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@studysection\" \/>\n<meta name=\"twitter:site\" content=\"@studysection\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin-studysection-blog\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/studysection.com\/blog\/javascript-callbacks-promises-and-async-await\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/javascript-callbacks-promises-and-async-await\/\"},\"author\":{\"name\":\"admin-studysection-blog\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\"},\"headline\":\"Javascript Callbacks, Promises, and Async\/await\",\"datePublished\":\"2021-08-20T04:06:41+00:00\",\"dateModified\":\"2021-08-20T05:30:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/studysection.com\/blog\/javascript-callbacks-promises-and-async-await\/\"},\"wordCount\":310,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"keywords\":[\"Async\/await\",\"Javascript Callbacks\"],\"articleSection\":[\"Learn and Grow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/studysection.com\/blog\/javascript-callbacks-promises-and-async-await\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/studysection.com\/blog\/javascript-callbacks-promises-and-async-await\/\",\"url\":\"https:\/\/studysection.com\/blog\/javascript-callbacks-promises-and-async-await\/\",\"name\":\"Javascript Callbacks, Promises, and Async\/await - SS Blog\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/#website\"},\"datePublished\":\"2021-08-20T04:06:41+00:00\",\"dateModified\":\"2021-08-20T05:30:18+00:00\",\"description\":\"A callback function in Javascript is a function passed into another function as an argument, It can run after another function has finished.\",\"breadcrumb\":{\"@id\":\"https:\/\/studysection.com\/blog\/javascript-callbacks-promises-and-async-await\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/studysection.com\/blog\/javascript-callbacks-promises-and-async-await\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/studysection.com\/blog\/javascript-callbacks-promises-and-async-await\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/studysection.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Javascript Callbacks, Promises, and Async\/await\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/studysection.com\/blog\/#website\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"name\":\"Blog Posts on famous people, innovations and educational topics\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/studysection.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/studysection.com\/blog\/#organization\",\"name\":\"StudySection\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"contentUrl\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"width\":920,\"height\":440,\"caption\":\"StudySection\"},\"image\":{\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/studysection\",\"https:\/\/twitter.com\/studysection\",\"https:\/\/www.instagram.com\/study.section\/\",\"https:\/\/www.linkedin.com\/company\/studysection\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\",\"name\":\"admin-studysection-blog\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"caption\":\"admin-studysection-blog\"},\"url\":\"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Javascript Callbacks, Promises, and Async\/await - SS Blog","description":"A callback function in Javascript is a function passed into another function as an argument, It can run after another function has finished.","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:\/\/studysection.com\/blog\/javascript-callbacks-promises-and-async-await\/","og_locale":"en_US","og_type":"article","og_title":"Javascript Callbacks, Promises, and Async\/await - SS Blog","og_description":"A callback function in Javascript is a function passed into another function as an argument, It can run after another function has finished.","og_url":"https:\/\/studysection.com\/blog\/javascript-callbacks-promises-and-async-await\/","og_site_name":"Blog Posts on famous people, innovations and educational topics","article_publisher":"https:\/\/www.facebook.com\/studysection","article_published_time":"2021-08-20T04:06:41+00:00","article_modified_time":"2021-08-20T05:30:18+00:00","og_image":[{"width":300,"height":200,"url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/08\/Javascript.png","type":"image\/png"}],"author":"admin-studysection-blog","twitter_card":"summary_large_image","twitter_creator":"@studysection","twitter_site":"@studysection","twitter_misc":{"Written by":"admin-studysection-blog","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/studysection.com\/blog\/javascript-callbacks-promises-and-async-await\/#article","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/javascript-callbacks-promises-and-async-await\/"},"author":{"name":"admin-studysection-blog","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402"},"headline":"Javascript Callbacks, Promises, and Async\/await","datePublished":"2021-08-20T04:06:41+00:00","dateModified":"2021-08-20T05:30:18+00:00","mainEntityOfPage":{"@id":"https:\/\/studysection.com\/blog\/javascript-callbacks-promises-and-async-await\/"},"wordCount":310,"commentCount":0,"publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"keywords":["Async\/await","Javascript Callbacks"],"articleSection":["Learn and Grow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/studysection.com\/blog\/javascript-callbacks-promises-and-async-await\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/studysection.com\/blog\/javascript-callbacks-promises-and-async-await\/","url":"https:\/\/studysection.com\/blog\/javascript-callbacks-promises-and-async-await\/","name":"Javascript Callbacks, Promises, and Async\/await - SS Blog","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/#website"},"datePublished":"2021-08-20T04:06:41+00:00","dateModified":"2021-08-20T05:30:18+00:00","description":"A callback function in Javascript is a function passed into another function as an argument, It can run after another function has finished.","breadcrumb":{"@id":"https:\/\/studysection.com\/blog\/javascript-callbacks-promises-and-async-await\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/studysection.com\/blog\/javascript-callbacks-promises-and-async-await\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/studysection.com\/blog\/javascript-callbacks-promises-and-async-await\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/studysection.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Javascript Callbacks, Promises, and Async\/await"}]},{"@type":"WebSite","@id":"https:\/\/studysection.com\/blog\/#website","url":"https:\/\/studysection.com\/blog\/","name":"Blog Posts on famous people, innovations and educational topics","description":"","publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/studysection.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/studysection.com\/blog\/#organization","name":"StudySection","url":"https:\/\/studysection.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","contentUrl":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","width":920,"height":440,"caption":"StudySection"},"image":{"@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/studysection","https:\/\/twitter.com\/studysection","https:\/\/www.instagram.com\/study.section\/","https:\/\/www.linkedin.com\/company\/studysection"]},{"@type":"Person","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402","name":"admin-studysection-blog","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","caption":"admin-studysection-blog"},"url":"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/"}]}},"views":542,"_links":{"self":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/4845"}],"collection":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/comments?post=4845"}],"version-history":[{"count":4,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/4845\/revisions"}],"predecessor-version":[{"id":4849,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/4845\/revisions\/4849"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media\/4846"}],"wp:attachment":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media?parent=4845"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/categories?post=4845"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/tags?post=4845"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}