Hi All,<\/p>\n
I would like to take this opportunity and explain you the asynchronous programming in JavaScript.<\/p>\n
<\/p>\n
Before diving deep into asynchronous concepts like callbacks, promises, async\/await.<\/p>\n
<\/p>\n
Javascript<\/strong> is a synchronous single threaded programming language – JavaScript (JS) Engine will execute one task at a time.<\/p>\n JavaScript is also a <\/span>interpreted<\/strong> programming language – JS Engine executes the code line by line from top to bottom. <\/span><\/p>\n <\/p>\n So, based on above two sentences we cannot run different task in parallel. Isn’t it? Is it good or bad? If you take other languages like Java or .net we have something called multi threading.<\/p>\n <\/p>\n <\/p>\n No friends, even in JavaScript we can achieve asynchronous behaviour with the help of callbacks and promises.<\/p>\n <\/p>\n callbacks – in simple terms : calling back whenever time comes.<\/p>\n <\/p>\n Similarly in JavaScript, if a function “A” gets called by function “B”, somehow we must give the function “A” control to a function “B”.<\/p>\n <\/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’s all you have to do! \ud83d\ude09<\/em><\/p>\n <\/p>\n Sample Code Example:<\/p>\n In the above code, we have given complete control of function A to function B.<\/p>\n <\/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 <\/p>\n setTimeout is one of the web APIs in JavaScript which takes two arguments 1. callback function and 2. Delay time<\/p>\n <\/p>\n When JS engine starts, it goes line by line. So,<\/p>\n First it ogs “Start” 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 “End” in the console.<\/p>\n Finally, JS engine waits for the timer (5 sec) to expire then it execute the callback function to log “setTimeout Called!”<\/p>\n <\/p>\n This is how we can achieve asynchronous programming in JavaScript.<\/p>\n <\/p>\n Continue to this… I will come up with promises and async\/await concepts. Stay tuned!<\/p>\n <\/p>\n <\/p>\n Keep learning and keep sharing \ud83d\ude04<\/p>\n <\/p>\n <\/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 – JavaScript (JS) Engine will execute one task at a time. JavaScript is also a interpreted programming language – JS<\/p>\n","protected":false},"author":15,"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,230,172,263],"tags":[330],"class_list":["post-4789","post","type-post","status-publish","format-standard","category-asynchronous-javascript","category-chosen-topic","category-javascript","category-javascript-frameworks","tag-javascript"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/4789","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\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/comments?post=4789"}],"version-history":[{"count":1,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/4789\/revisions"}],"predecessor-version":[{"id":4790,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/4789\/revisions\/4790"}],"wp:attachment":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/media?parent=4789"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/categories?post=4789"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/tags?post=4789"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}function A(){\n console.log(\"Function A called!\")\n}\n\nfunction B(funcA){\n console.log(\"Inside Function B\")\n funcA() \/\/ function A gets called here! \n}\n\n\/\/calling or invoking function B\nB(A) \n\n<\/pre>\nconsole.log(\"Start\")\nsetTimeout(function (){ \n console.log(\"setTimeout Called!\"), 5000\n}\nconsole.log(\"End\")\n<\/pre>\n