<\/p>\n
Hi All,<\/p>\n
I would like to take this opportunity and explain you the asynchronous programming in JavaScript.<\/p>\n
Before diving deep into asynchronous concepts like callbacks, promises, async\/await.<\/p>\n
Javascript<\/strong> is a synchronous single threaded programming language \u2013 JavaScript (JS) Engine will execute one task at a time.<\/p>\n JavaScript is also a interpreted<\/strong> programming language \u2013 JS Engine executes the code line by line from top to bottom.<\/p>\n So, based on above two sentences we cannot run different task in parallel. Isn\u2019t it? Is it good or bad? If you take other languages like Java or .net we have something called multi threading.<\/p>\n No friends, even in JavaScript we can achieve asynchronous behaviour with the help of callbacks and promises.<\/p>\n callbacks \u2013 in simple terms : calling back whenever time comes.<\/p>\n Similarly in JavaScript, if a function \u201cA\u201d gets called by function \u201cB\u201d, somehow we must give the function \u201cA\u201d control to a function \u201cB\u201d.<\/p>\n How to achieve it in JS?<\/p>\n Pass function A as an argument to the function B and function B will take care of function A. That\u2019s all you have to do! \ud83d\ude09<\/em><\/p>\n Sample Code Example:<\/p>\n <\/p>\n function A(){ console.log(“Function A called!”) } function B(funcA){ console.log(“Inside Function B”) funcA() \/\/ function A gets called here! } \/\/calling or invoking function B B(A)<\/p>\n In the above code, we have given complete control of function A to function B.<\/p>\n We will go to next level to understand asynchronous with the help of callbacks. I would strongly say that, in JavaScript asynchronous behaviour exist only because of callbacks!!!<\/p>\n console.log(“Start”) setTimeout(function (){ console.log(“setTimeout Called!”), 5000 } console.log(“End”)<\/p>\n setTimeout is one of the web APIs in JavaScript which takes two arguments 1. callback function and 2. Delay time<\/p>\n When JS engine starts, it goes line by line. So,<\/p>\n First it ogs \u201cStart\u201d in the console.<\/p>\n Then it registers a setTimeout web API in the browser and continues to execute next statements.<\/p>\n Then it logs \u201cEnd\u201d in the console.<\/p>\n Finally, JS engine waits for the timer (5 sec) to expire then it execute the callback function to log \u201csetTimeout Called!\u201d<\/p>\n This is how we can achieve asynchronous programming in JavaScript.<\/p>\n Continue to this\u2026 I will come up with promises and async\/await concepts. Stay tuned!<\/p>\n Keep learning and keep sharing \ud83d\ude04<\/p>\n Cheers,<\/p>\n Adarsha \ud83d\ude80<\/p>\n","protected":false},"excerpt":{"rendered":" Hi All, I would like to take this opportunity and explain you the asynchronous programming in JavaScript. Before diving deep into asynchronous concepts like callbacks, promises, async\/await. Javascript is a synchronous single threaded programming language \u2013 JavaScript (JS) Engine will execute one task at a time. JavaScript is also a interpreted programming language \u2013 JS Engine executes the<\/p>\n","protected":false},"author":56,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[333,172],"tags":[330],"class_list":["post-4986","post","type-post","status-publish","format-standard","category-asynchronous-javascript","category-javascript","tag-javascript"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/4986","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/users\/56"}],"replies":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/comments?post=4986"}],"version-history":[{"count":1,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/4986\/revisions"}],"predecessor-version":[{"id":5006,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/4986\/revisions\/5006"}],"wp:attachment":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/media?parent=4986"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/categories?post=4986"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/tags?post=4986"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}