{"id":9114,"date":"2025-06-24T15:16:35","date_gmt":"2025-06-24T09:46:35","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=9114"},"modified":"2025-06-24T15:16:42","modified_gmt":"2025-06-24T09:46:42","slug":"synchronous-vs-asynchronous-javascript","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/synchronous-vs-asynchronous-javascript\/","title":{"rendered":"Synchronous vs Asynchronous JavaScript"},"content":{"rendered":"\n

<\/h1>\n\n\n\n

Knowing how the code operates, particularly the distinction between synchronous and asynchronous execution, is crucial when working with JavaScript. Let’s simplify it using relatable examples.<\/p>\n\n\n\n

What is Synchronous?<\/strong><\/p>\n\n\n\n

Line by line, synchronous code runs in a sequential fashion.Before proceeding to the next task, each one must be finished.<\/p>\n\n\n\n

An example:<\/strong><\/h3>\n\n\n\n

Let’s\u00a0say\u00a0a\u00a0user\u00a0completes\u00a0a\u00a0website\u00a0form. The\u00a0browser\u00a0begins\u00a0examining\u00a0each\u00a0field\u00a0individually\u00a0as\u00a0soon\u00a0as\u00a0they\u00a0click\u00a0the\u00a0“Submit”\u00a0button: Name\u00a0\u2192\u00a0OK
Email\u00a0\u2192\u00a0All\u00a0right
Phone\u00a0Number\u00a0\u2192\u00a0All\u00a0right
Until\u00a0all\u00a0checks\u00a0are\u00a0finished,\u00a0nothing\u00a0else\u00a0can\u00a0happen\u00a0on\u00a0the\u00a0page.<\/p>\n\n\n\n

Code Example<\/strong><\/h3>\n\n\n\n

console.log(“Validating form\u2026”);<\/p>\n\n\n\n

function validateForm() {
for (let i = 0; i < 1e9; i++) {
\/\/ Simulate heavy validation (e.g., complex calculations)
}
console.log(“Form is valid.”);
}
validateForm();
console.log(“Form submitted.”);<\/p>\n\n\n\n

Output:<\/strong><\/h3>\n\n\n\n

Start
Long task finished
End<\/p>\n\n\n\n

What is Asynchronous?<\/strong><\/p>\n\n\n\n

Because JavaScript is asynchronous, it can start a task and move on to the next line without waiting for it to finish.<\/p>\n\n\n\n

An example:<\/strong><\/strong><\/h3>\n\n\n\n

Modern apps often send data to the server and show a loading spinner so that the user can interact with the page while waiting.<\/p>\n\n\n\n

Code Example:<\/strong><\/h3>\n\n\n\n

console.log(“Submitting form\u2026”);<\/p>\n\n\n\n

setTimeout(() => {
console.log(“Server responded: Form saved successfully.”);
}, 2000); \/\/ Simulates network delay<\/p>\n\n\n\n

console.log(“Showing loading spinner\u2026”);<\/p>\n\n\n\n

Output:<\/strong><\/h3>\n\n\n\n

Submitting form\u2026
Showing loading spinner\u2026
Server responded: Form saved successfully.<\/p>\n\n\n\n

When to Use Asynchronous Code?<\/strong><\/p>\n\n\n\n

When a task requires a lot of time, use async code, like:<\/p>\n\n\n\n

    \n
  • Fetching data from an API<\/li>\n\n\n\n
  • Awaiting user input (such as button presses)<\/li>\n\n\n\n
  • Reading files<\/li>\n\n\n\n
  • Timers or delays
    <\/li>\n<\/ul>\n\n\n\n

    An example Using fetch (Asynchronous)<\/strong><\/p>\n\n\n\n

    console.log(“Start”);<\/p>\n\n\n\n

    fetch(“https:\/\/jsonplaceholder.typicode.com\/posts\/1”)<\/p>\n\n\n\n

      .then(response => response.json())<\/p>\n\n\n\n

      .then(data => console.log(“Post:”, data.title));<\/p>\n\n\n\n

    console.log(“End”);<\/p>\n\n\n\n

    Output:<\/strong><\/h3>\n\n\n\n

    Start  <\/p>\n\n\n\n

    End  <\/p>\n\n\n\n

    Post: sunt aut facere repellat provident occaecati…<\/p>\n\n\n\n

    JavaScript does not wait for the data, despite the fetch call being above console.log(“End”). While the data is loading, it continues to run.<\/p>\n\n\n\n

    Conclusion<\/strong><\/p>\n\n\n\n

    Understanding the difference: <\/p>\n\n\n\n

    Concept<\/strong><\/td>Explanation<\/strong><\/td><\/tr>
    Synchronous<\/strong><\/td>Wait your turn \u2014 step-by-step<\/td><\/tr>
    Asynchronous<\/strong><\/td>Do other things while waiting<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

    JavaScript may run on a single thread<\/strong>, but with asynchronous code, it feels like it’s multitasking.<\/p>\n","protected":false},"excerpt":{"rendered":"

    Knowing how the code operates, particularly the distinction between synchronous and asynchronous execution, is crucial when working with JavaScript. Let’s […]<\/p>\n","protected":false},"author":507,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1022],"tags":[],"class_list":["post-9114","post","type-post","status-publish","format-standard","hentry","category-web-architecture","psol-cat-web-architecture"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/phn2x7-2n0","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/9114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/507"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=9114"}],"version-history":[{"count":0,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/9114\/revisions"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=9114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=9114"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=9114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}