{"id":28404,"date":"2018-11-09T15:01:41","date_gmt":"2018-11-09T07:01:41","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=28404"},"modified":"2023-04-06T19:19:19","modified_gmt":"2023-04-06T11:19:19","slug":"synchronous-asynchronous-javascript","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/synchronous-asynchronous-javascript\/","title":{"rendered":"Mastering Synchronous & Asynchronous JavaScript – Part 1"},"content":{"rendered":"

Synchronous<\/strong> and asynchronous<\/strong> are confusing concepts in JavaScript, especially for beginners. Two or more things are synchronous<\/strong> when they happen at the same time<\/strong> (in sync), and asynchronous when they don\u2019t <\/strong>(not in sync).<\/p>\n

Although these definitions are easy to take in, it is actually more complicated than it looks. We need to take into account what exactly are in sync<\/strong>, and what aren\u2019t<\/strong>.<\/p>\n

You\u2019d probably call a normal<\/q> function in JavaScript synchronous, right? And if it\u2019s something like setTimeout()<\/code><\/a> or AJAX<\/a> that you\u2019re working with, you will refer to it as being asynchronous, yes? What if I tell you that both<\/em> are asynchronous in a way<\/strong>?<\/p>\n

To explain the why<\/em>, we need to turn to Mr X for help.<\/p>\n

Read Also:<\/strong> 15 DOM Manipulation JavaScript Methods for Web Developers<\/a><\/p>\n

Scenario 1 \u2013 Mr X is trying synchronicity<\/h2>\n

Here\u2019s the setup:<\/p>\n

    \n
  1. Mr X is someone who can answer tough questions, and carry out any requested task.<\/li>\n
  2. The only way to contact him is through a phone call.<\/li>\n
  3. Whatever question or task you got, in order to ask Mr X\u2019s help to carry it out; you call him.<\/li>\n
  4. Mr X gives you the answer or completes the task right away<\/strong>, and lets you know it\u2019s done<\/strong>.<\/li>\n
  5. You put down the receiver feeling content and go out for a movie.<\/li>\n<\/ol>\n

    What you\u2019ve just carried out was a synchronous (back and forth) communication<\/strong> with Mr X.\n He listened as you were asking him your question, and you listened when he was answering it.<\/p>\n

    \"Wire<\/figure>\n

    Scenario 2 \u2013 Mr X isn\u2019t happy with synchronicity<\/h2>\n

    Since Mr X is so efficient, he starts receiving many more calls. So what happens when you call him but he\u2019s already busy<\/strong> talking to someone else? You won\u2019t be able to ask him your question \u2013 not till he is free to receive your call. All you will hear is a busy tone.<\/p>\n

    So what can Mr X do to combat this?<\/p>\n

    Instead of taking calls directly:<\/p>\n

      \n
    1. Mr X hires a new guy, Mr M and gives him an answering machine for the callers to leave messages<\/strong>.<\/li>\n
    2. Mr M\u2019s job is to pass on a message<\/strong> from the answering machine to Mr X once he knows Mr X has completely finished processing all previous messages and is already free to take a new one<\/strong>.<\/li>\n
    3. So now when you call him, instead of getting a busy tone, you get to leave a message for Mr X, then wait for him to call you back<\/strong> (no movie time yet).<\/li>\n
    4. Once Mr X is done with all the queued up messages he received before yours, he will look into your issue, and call you back<\/strong> to give you an answer.<\/li>\n<\/ol>\n

      Now here lies the question: were the actions so far synchronous or asynchronous?<\/strong><\/p>\n

      It\u2019s mixed. When you left your message, Mr X wasn\u2019t listening in to it, so the forth communication was asynchronous.<\/strong><\/p>\n

      But, when he replied, you were there listening<\/strong>, which makes the return communication synchronous<\/strong>.<\/p>\n

      I hope by now you have acquired a better understanding of how synchronicity is perceived in terms of communication. Time to bring in JavaScript.<\/p>\n

      JavaScript \u2013 An Asynchronous Programming Language<\/h2>\n

      When someone labels JavaScript asynchronous, what they are referring to in general is how you can leave a message<\/strong> for it, and not have your call blocked<\/strong> with a busy tone.<\/p>\n

      The function calls are never direct in JavaScript<\/strong>, they\u2019re literally done via messages<\/strong>.<\/p>\n

      JavaScript uses a message queue<\/strong> where incoming messages (or events) are held. An event-loop<\/strong> (a message dispatcher) sequentially dispatches those messages to a call stack<\/strong> where the corresponding functions of the messages are stacked as frames<\/strong> (function arguements & variables) for execution.<\/p>\n

      The call stack holds the frame of the initial function being called, and any other frames for functions called via nested calls<\/strong> on top of it .<\/p>\n

      \"JavaScript<\/figure>\n

      When a message joins the queue, it waits until the call stack is empty of all frames from the previous message<\/strong>, and when it is, the event-loop dequeues the previous message<\/strong>, and adds the corresponding frames of the current message to the call stack.<\/p>\n

      The message waits again until the call stack becomes empty of its own corresponding frames<\/strong> (i.e. the executions of all the stacked functions are over), then is dequeued.<\/p>\n

      Consider the following code:<\/p>\n

      \r\nfunction foo(){}\r\nfunction bar(){\r\n  foo();\r\n}\r\nfunction baz(){\r\n  bar();\r\n}\r\nbaz();\r\n<\/pre>\n
      The function being run is baz()<\/code> (at the last row of the code snippet), for which a message is added to the queue<\/strong>, and when the event-loop picks it up, the call stack starts stacking frames<\/strong> for baz()<\/code>, bar()<\/code>, and foo()<\/code> at the relevant points of execution.<\/p>\n
      \"Pushing<\/figure>\n
      Once the execution of the functions is complete one by one, their frames are removed from the call stack<\/strong>, while the message is still waiting in the queue<\/strong>, until baz()<\/code> is popped from the stack.<\/p>\n
      \"Popping<\/figure>\n
      Remember, the function calls are never direct in JavaScript<\/strong>, they\u2019re done via messages<\/strong>. So whenever you hear someone say that JavaScript itself is an asynchronous programming language, assume that they are talking about its built-in \u201canswering machine\u201d, and how you\u2019re free to leave messages.<\/p>\n
      But what about the specific asynchronous methods?<\/h2>\n
      So far I\u2019ve not touched on APIs such as setTimeout()<\/code> and AJAX, those are the ones that are specifically referred to as asynchronous<\/strong>. Why is that?<\/p>\n
      It\u2019s important to understand what  exactly is  being synchronous or asynchronous. JavaScript, with the help of events and the event-loop, may practice asynchronous processing of messages<\/strong>, but that doesn\u2019t mean everything<\/em> in JavaScript is asynchronous<\/strong>.<\/p>\n
      Remember, I told you the message didn\u2019t leave until the call stack was empty of its corresponding frames<\/strong>, just like you didn\u2019t leave for a movie until you got your answer \u2014 that\u2019s being synchronous<\/strong>, you are there waiting until the task is complete<\/strong>, and you get the answer.<\/p>\n
      Waiting isn\u2019t ideal in all scenarios<\/strong>. What if after leaving a message, instead of waiting, you can leave for the movie? What if a function can retire (emptying the call stack), and its message can be dequeued even before the task of the function is complete? What if you can have code executed asynchronously?<\/p>\n
      This is where APIs such as setTimeout()<\/code> and AJAX come into the picture, and what they do is\u2026 hold on, I can\u2019t explain this without going back to Mr X, which we\u2019ll see in the second part of this article. Stay tuned.<\/p>","protected":false},"excerpt":{"rendered":"
      Synchronous and asynchronous are confusing concepts in JavaScript, especially for beginners. Two or more things are synchronous when they happen at the same time (in sync), and asynchronous when they don\u2019t (not in sync). Although these definitions are easy to take in, it is actually more complicated than it looks. We need to take into…<\/p>\n","protected":false},"author":145,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[4117,511],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nMastering Synchronous & Asynchronous JavaScript - Part 1 - Hongkiat<\/title>\n<meta name=\"description\" content=\"Synchronous and asynchronous are confusing concepts in JavaScript, especially for beginners. Two or more things are synchronous when they happen at the\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/synchronous-asynchronous-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mastering Synchronous & Asynchronous JavaScript - Part 1\" \/>\n<meta property=\"og:description\" content=\"Synchronous and asynchronous are confusing concepts in JavaScript, especially for beginners. Two or more things are synchronous when they happen at the\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/synchronous-asynchronous-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2018-11-09T07:01:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-06T11:19:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/synchronous-asynchronous-javascript\/wire-phone.jpg\" \/>\n<meta name=\"author\" content=\"Preethi Ranjit\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Preethi Ranjit\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/synchronous-asynchronous-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/synchronous-asynchronous-javascript\\\/\"},\"author\":{\"name\":\"Preethi Ranjit\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\"},\"headline\":\"Mastering Synchronous & Asynchronous JavaScript – Part 1\",\"datePublished\":\"2018-11-09T07:01:41+00:00\",\"dateModified\":\"2023-04-06T11:19:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/synchronous-asynchronous-javascript\\\/\"},\"wordCount\":1048,\"commentCount\":16,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/synchronous-asynchronous-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/synchronous-asynchronous-javascript\\\/wire-phone.jpg\",\"keywords\":[\"Javascripts\",\"Web Developers\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/synchronous-asynchronous-javascript\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/synchronous-asynchronous-javascript\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/synchronous-asynchronous-javascript\\\/\",\"name\":\"Mastering Synchronous & Asynchronous JavaScript - Part 1 - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/synchronous-asynchronous-javascript\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/synchronous-asynchronous-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/synchronous-asynchronous-javascript\\\/wire-phone.jpg\",\"datePublished\":\"2018-11-09T07:01:41+00:00\",\"dateModified\":\"2023-04-06T11:19:19+00:00\",\"description\":\"Synchronous and asynchronous are confusing concepts in JavaScript, especially for beginners. Two or more things are synchronous when they happen at the\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/synchronous-asynchronous-javascript\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/synchronous-asynchronous-javascript\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/synchronous-asynchronous-javascript\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/synchronous-asynchronous-javascript\\\/wire-phone.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/synchronous-asynchronous-javascript\\\/wire-phone.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/synchronous-asynchronous-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mastering Synchronous & Asynchronous JavaScript – Part 1\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\",\"name\":\"Preethi Ranjit\",\"description\":\"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/preethi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Mastering Synchronous & Asynchronous JavaScript - Part 1 - Hongkiat","description":"Synchronous and asynchronous are confusing concepts in JavaScript, especially for beginners. Two or more things are synchronous when they happen at the","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:\/\/www.hongkiat.com\/blog\/synchronous-asynchronous-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Mastering Synchronous & Asynchronous JavaScript - Part 1","og_description":"Synchronous and asynchronous are confusing concepts in JavaScript, especially for beginners. Two or more things are synchronous when they happen at the","og_url":"https:\/\/www.hongkiat.com\/blog\/synchronous-asynchronous-javascript\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2018-11-09T07:01:41+00:00","article_modified_time":"2023-04-06T11:19:19+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/synchronous-asynchronous-javascript\/wire-phone.jpg","type":"","width":"","height":""}],"author":"Preethi Ranjit","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Preethi Ranjit","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/synchronous-asynchronous-javascript\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/synchronous-asynchronous-javascript\/"},"author":{"name":"Preethi Ranjit","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3"},"headline":"Mastering Synchronous & Asynchronous JavaScript – Part 1","datePublished":"2018-11-09T07:01:41+00:00","dateModified":"2023-04-06T11:19:19+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/synchronous-asynchronous-javascript\/"},"wordCount":1048,"commentCount":16,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/synchronous-asynchronous-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/synchronous-asynchronous-javascript\/wire-phone.jpg","keywords":["Javascripts","Web Developers"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/synchronous-asynchronous-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/synchronous-asynchronous-javascript\/","url":"https:\/\/www.hongkiat.com\/blog\/synchronous-asynchronous-javascript\/","name":"Mastering Synchronous & Asynchronous JavaScript - Part 1 - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/synchronous-asynchronous-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/synchronous-asynchronous-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/synchronous-asynchronous-javascript\/wire-phone.jpg","datePublished":"2018-11-09T07:01:41+00:00","dateModified":"2023-04-06T11:19:19+00:00","description":"Synchronous and asynchronous are confusing concepts in JavaScript, especially for beginners. Two or more things are synchronous when they happen at the","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/synchronous-asynchronous-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/synchronous-asynchronous-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/synchronous-asynchronous-javascript\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/synchronous-asynchronous-javascript\/wire-phone.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/synchronous-asynchronous-javascript\/wire-phone.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/synchronous-asynchronous-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Mastering Synchronous & Asynchronous JavaScript – Part 1"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3","name":"Preethi Ranjit","description":"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.","url":"https:\/\/www.hongkiat.com\/blog\/author\/preethi\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-7o8","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28404","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=28404"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28404\/revisions"}],"predecessor-version":[{"id":65989,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28404\/revisions\/65989"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=28404"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=28404"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=28404"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=28404"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}