{"id":4740,"date":"2024-06-02T17:24:05","date_gmt":"2024-06-02T11:54:05","guid":{"rendered":"https:\/\/namastedev.com\/blog\/?p=4740"},"modified":"2024-06-02T17:24:06","modified_gmt":"2024-06-02T11:54:06","slug":"asynchronous-programming-in-javascript","status":"publish","type":"post","link":"https:\/\/namastedev.com\/blog\/asynchronous-programming-in-javascript\/","title":{"rendered":"Asynchronous Programming in JavaScript"},"content":{"rendered":"<p>If there arises a requirement where the application which we create should be flexible, fast and efficient, Asynchronous Programming is your best bet!<\/p>\n<p>JavaScript is a synchronous and single threaded programming language. But if we need to perform multiple tasks simultaneously instead of waiting, asynchronous JavaScript comes into picture.<\/p>\n<p>Asynchronous JavaScript solves a lot of problems which are caused due to the single threaded nature of JavaScript as it can multitask.<\/p>\n<p>To use Asynchronous Programming in JavaScript, one of the fundamental functions is setTimeOut(). setTimeOut takes in two arguments:<\/p>\n<ul>\n<li>The callback function<\/li>\n<li>Time in milliseconds<\/li>\n<\/ul>\n<p>the callback function describes the necessary task which the setTimeOut should perform after the described time limit given.<\/p>\n<p><strong><em><u>Syntax:<br \/>\n<\/u><\/em><\/strong><span class=\"ql-font-monospace\">setTimeOut(() =&gt; {<br \/>\n<\/span><span style=\"font-size: inherit; color: var(--c-contrast-800);\">\u00a0 \u00a0 \u00a0 \u00a0console.log(&#8220;Hello World&#8221;);<br \/>\n<\/span><span class=\"ql-font-monospace\">}, 4000);<\/span><\/p>\n<p>So after the program is executed, <strong>Hello World <\/strong>appears on the console after 4000 milliseconds i.e. 4 seconds.<\/p>\n<p>This can be associated with another scenario:<\/p>\n<p><strong><em><u>Example:<\/u><\/em><\/strong><\/p>\n<p><span class=\"ql-font-monospace\">setTimeOut(() =&gt; {<br \/>\n<\/span><span class=\"ql-font-monospace\">\u00a0 \u00a0 \u00a0 \u00a0console.log(&#8220;Inside setTimeOut&#8221;);<br \/>\n<\/span><span class=\"ql-font-monospace\">}, 4000);<br \/>\n<\/span><span class=\"ql-font-monospace\">console.log(&#8220;Outside setTimeOut&#8221;);<\/span><\/p>\n<p>In the above scenario, while using other programming languages it can be assumable that <strong>Inside setTimeOut <\/strong>will appear on the console first and <strong>Outside setTimeOut <\/strong>will appear next.<\/p>\n<p>But that is entirely opposite in case of JavaScript!<\/p>\n<p>after identifying that the setTimeOut function will be called after 4000 milliseconds, the JS engine will try to execute the other part of the code which is to log <strong>Outside setTimeOut <\/strong>on the console.<\/p>\n<p>This will lead to execute the console.log(&#8220;Outside setTimeOut&#8221;) statement first and the console.log(&#8220;Outside setTimeOut&#8221;) will get executed after 4000 milliseconds.<\/p>\n<p>This ensures to eliminate idle time as the other part of code gets executed instead of waiting for the setTimeOut function<\/p>\n<p>to complete execution.<\/p>\n<p>Having knowledge on Asynchronous JavaScript is vital in creating efficient and responsive Web Applications.<\/p>\n<p>It handles Input\/Output operations smoothly, it improves User Experience and it enables concurrency in the application.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If there arises a requirement where the application which we create should be flexible, fast and efficient, Asynchronous Programming is your best bet! JavaScript is a synchronous and single threaded programming language. But if we need to perform multiple tasks simultaneously instead of waiting, asynchronous JavaScript comes into picture. Asynchronous JavaScript solves a lot of<\/p>\n","protected":false},"author":9,"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],"tags":[330],"class_list":["post-4740","post","type-post","status-publish","format-standard","category-asynchronous-javascript","category-chosen-topic","category-javascript","tag-javascript"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/4740","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\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/comments?post=4740"}],"version-history":[{"count":1,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/4740\/revisions"}],"predecessor-version":[{"id":4742,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/4740\/revisions\/4742"}],"wp:attachment":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/media?parent=4740"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/categories?post=4740"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/tags?post=4740"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}