<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Nikesh Dahal</title>
    <description>The latest articles on DEV Community by Nikesh Dahal (@nikeshdahal).</description>
    <link>https://dev.to/nikeshdahal</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1045568%2F16a9894b-a9a8-4cac-9e59-f74775bd3c0c.jpg</url>
      <title>DEV Community: Nikesh Dahal</title>
      <link>https://dev.to/nikeshdahal</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/nikeshdahal"/>
    <language>en</language>
    <item>
      <title>The Easiest Way to Generate a GitHub SSH Key</title>
      <dc:creator>Nikesh Dahal</dc:creator>
      <pubDate>Mon, 26 Jan 2026 04:54:31 +0000</pubDate>
      <link>https://dev.to/nikeshdahal/the-easiest-way-to-generate-a-github-ssh-key-2gf</link>
      <guid>https://dev.to/nikeshdahal/the-easiest-way-to-generate-a-github-ssh-key-2gf</guid>
      <description>&lt;p&gt;&lt;strong&gt;(No thinking. No stress. Just copy–paste like a pro)&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;This is the simplest method to generate an SSH key and save it on your local system.&lt;br&gt;
No theory. No confusion. Just copy → paste → enter → done &lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Step 1: Open your terminal
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;Mac / Linux / Windows (Git Bash) — all good.&lt;br&gt;
Just open it like you’re opening Netflix 😌&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Step 2: Create the SSH key (magic spell 🧙‍♂️)&lt;/strong&gt;
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;ssh&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;keygen&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;t&lt;/span&gt; &lt;span class="nx"&gt;ed25519&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;C&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;your_email@example.com&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;Note :  ed25519 is is a modern cryptographic algorithm used to generate SSH keys.&lt;br&gt;
In simple terms:&lt;br&gt;
It’s the method used to create your SSH key — like choosing a lock type 🔑 that's it .&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Now your terminal will ask questions like an interview panel:&lt;/p&gt;

&lt;p&gt;Q1: Where to save the key?&lt;br&gt;
👉 Press Enter&lt;/p&gt;

&lt;p&gt;Q2: Enter passphrase?&lt;br&gt;
👉 Press Enter (skip like ads)&lt;/p&gt;

&lt;p&gt;Q3: Confirm passphrase?&lt;br&gt;
👉 Press Enter again&lt;/p&gt;

&lt;p&gt;🎉 Boom! Key generated. *&lt;em&gt;(No stress just click Enter,Enter,Enter and that's it .) *&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  🧠 Step 3: Wake up the SSH agent (it’s sleeping 😴)
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nb"&gt;eval&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;$(ssh-agent -s)&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  🔑 Step 4: Add your key to the agent
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;ssh&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;add&lt;/span&gt; &lt;span class="o"&gt;~&lt;/span&gt;&lt;span class="sr"&gt;/.ssh/i&lt;/span&gt;&lt;span class="nx"&gt;d_ed25519&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;Note: Now your key is officially hired 🧑‍💼&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  📋 Step 5: Copy your public key (the VIP pass 🎟️)
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;cat&lt;/span&gt; &lt;span class="o"&gt;~&lt;/span&gt;&lt;span class="sr"&gt;/.ssh/i&lt;/span&gt;&lt;span class="nx"&gt;d_ed25519&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;pub&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now in your terminal you will get the long string key &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;👉 Copy everything that appears&lt;/strong&gt;&lt;br&gt;
(yes, everything… don’t act smart and trim it 😏)&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 6: Tell GitHub who you are
&lt;/h2&gt;

&lt;p&gt;Go to GitHub.com&lt;/p&gt;

&lt;p&gt;Profile pic → Settings&lt;/p&gt;

&lt;p&gt;SSH and GPG keys&lt;/p&gt;

&lt;p&gt;New SSH key&lt;/p&gt;

&lt;p&gt;Title: My Laptop&lt;/p&gt;

&lt;p&gt;Paste the key&lt;/p&gt;

&lt;p&gt;Click Add SSH key&lt;/p&gt;

&lt;p&gt;and that's it done . &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;GitHub: “Ah yes, I know this human now.” 🤝&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  🎉 DONE DONE DONE
&lt;/h2&gt;

&lt;p&gt;No passwords&lt;br&gt;
No tokens&lt;br&gt;
No drama&lt;br&gt;
No errors&lt;br&gt;
No crying at 2 AM&lt;br&gt;
No “permission denied” trauma&lt;/p&gt;

&lt;p&gt;Just clean SSH vibes 😌🔐&lt;/p&gt;

&lt;p&gt;Thankyou .&lt;br&gt;
Keep Learning.&lt;/p&gt;

</description>
      <category>ssh</category>
      <category>sshkey</category>
      <category>github</category>
      <category>bitbucket</category>
    </item>
    <item>
      <title>📢 Just published a new blog! " JavaScript Promises &amp; Async/Await – A Beginner-Friendly Guide With Examples" Whether you're starting with JS or brushing up your skills, this guide will help you write better, more readable async code. 🚀 Check it out here</title>
      <dc:creator>Nikesh Dahal</dc:creator>
      <pubDate>Mon, 21 Apr 2025 07:43:50 +0000</pubDate>
      <link>https://dev.to/nikeshdahal/just-published-a-new-blog-javascript-promises-asyncawait-a-beginner-friendly-guide-with-2inc</link>
      <guid>https://dev.to/nikeshdahal/just-published-a-new-blog-javascript-promises-asyncawait-a-beginner-friendly-guide-with-2inc</guid>
      <description>&lt;div class="ltag__link--embedded"&gt;
  &lt;div class="crayons-story "&gt;
  &lt;a href="https://dev.to/nikeshdahal/javascript-promises-asyncawait-a-beginner-friendly-guide-with-examples-1h1i" class="crayons-story__hidden-navigation-link"&gt;📘 JavaScript Promises &amp;amp; Async/Await – A Beginner-Friendly Guide With Examples&lt;/a&gt;


  &lt;div class="crayons-story__body crayons-story__body-full_post"&gt;
    &lt;div class="crayons-story__top"&gt;
      &lt;div class="crayons-story__meta"&gt;
        &lt;div class="crayons-story__author-pic"&gt;

          &lt;a href="/nikeshdahal" class="crayons-avatar  crayons-avatar--l  "&gt;
            &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1045568%2F16a9894b-a9a8-4cac-9e59-f74775bd3c0c.jpg" alt="nikeshdahal profile" class="crayons-avatar__image"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;a href="/nikeshdahal" class="crayons-story__secondary fw-medium m:hidden"&gt;
              Nikesh Dahal
            &lt;/a&gt;
            &lt;div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"&gt;
              
                Nikesh Dahal
                
              
              &lt;div id="story-author-preview-content-2420989" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"&gt;
                &lt;div class="gap-4 grid"&gt;
                  &lt;div class="-mt-4"&gt;
                    &lt;a href="/nikeshdahal" class="flex"&gt;
                      &lt;span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"&gt;
                        &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1045568%2F16a9894b-a9a8-4cac-9e59-f74775bd3c0c.jpg" class="crayons-avatar__image" alt=""&gt;
                      &lt;/span&gt;
                      &lt;span class="crayons-link crayons-subtitle-2 mt-5"&gt;Nikesh Dahal&lt;/span&gt;
                    &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="print-hidden"&gt;
                    
                      Follow
                    
                  &lt;/div&gt;
                  &lt;div class="author-preview-metadata-container"&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;

          &lt;/div&gt;
          &lt;a href="https://dev.to/nikeshdahal/javascript-promises-asyncawait-a-beginner-friendly-guide-with-examples-1h1i" class="crayons-story__tertiary fs-xs"&gt;&lt;time&gt;Apr 21 '25&lt;/time&gt;&lt;span class="time-ago-indicator-initial-placeholder"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;

    &lt;/div&gt;

    &lt;div class="crayons-story__indention"&gt;
      &lt;h2 class="crayons-story__title crayons-story__title-full_post"&gt;
        &lt;a href="https://dev.to/nikeshdahal/javascript-promises-asyncawait-a-beginner-friendly-guide-with-examples-1h1i" id="article-link-2420989"&gt;
          📘 JavaScript Promises &amp;amp; Async/Await – A Beginner-Friendly Guide With Examples
        &lt;/a&gt;
      &lt;/h2&gt;
        &lt;div class="crayons-story__tags"&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/javascript"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;javascript&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/webdev"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;webdev&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/beginners"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;beginners&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/programming"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;programming&lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="crayons-story__bottom"&gt;
        &lt;div class="crayons-story__details"&gt;
          &lt;a href="https://dev.to/nikeshdahal/javascript-promises-asyncawait-a-beginner-friendly-guide-with-examples-1h1i" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"&gt;
            &lt;div class="multiple_reactions_aggregate"&gt;
              &lt;span class="multiple_reactions_icons_container"&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18"&gt;
                  &lt;/span&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18"&gt;
                  &lt;/span&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18"&gt;
                  &lt;/span&gt;
              &lt;/span&gt;
              &lt;span class="aggregate_reactions_counter"&gt;20&lt;span class="hidden s:inline"&gt; reactions&lt;/span&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/a&gt;
            &lt;a href="https://dev.to/nikeshdahal/javascript-promises-asyncawait-a-beginner-friendly-guide-with-examples-1h1i#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"&gt;
              Comments


              8&lt;span class="hidden s:inline"&gt; comments&lt;/span&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="crayons-story__save"&gt;
          &lt;small class="crayons-story__tertiary fs-xs mr-2"&gt;
            5 min read
          &lt;/small&gt;
            
              &lt;span class="bm-initial"&gt;
                

              &lt;/span&gt;
              &lt;span class="bm-success"&gt;
                

              &lt;/span&gt;
            
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;


</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>programming</category>
    </item>
    <item>
      <title>📢 Just published a new blog! " JavaScript Promises &amp; Async/Await – A Beginner-Friendly Guide With Examples" In this post, I break down the evolution of handling asynchronous operations in JavaScript — from messy callbacks to clean and modern Promises.</title>
      <dc:creator>Nikesh Dahal</dc:creator>
      <pubDate>Mon, 21 Apr 2025 07:42:59 +0000</pubDate>
      <link>https://dev.to/nikeshdahal/just-published-a-new-blog-javascript-promises-asyncawait-a-beginner-friendly-guide-dc8</link>
      <guid>https://dev.to/nikeshdahal/just-published-a-new-blog-javascript-promises-asyncawait-a-beginner-friendly-guide-dc8</guid>
      <description>&lt;div class="ltag__link--embedded"&gt;
  &lt;div class="crayons-story "&gt;
  &lt;a href="https://dev.to/nikeshdahal/javascript-promises-asyncawait-a-beginner-friendly-guide-with-examples-1h1i" class="crayons-story__hidden-navigation-link"&gt;📘 JavaScript Promises &amp;amp; Async/Await – A Beginner-Friendly Guide With Examples&lt;/a&gt;


  &lt;div class="crayons-story__body crayons-story__body-full_post"&gt;
    &lt;div class="crayons-story__top"&gt;
      &lt;div class="crayons-story__meta"&gt;
        &lt;div class="crayons-story__author-pic"&gt;

          &lt;a href="/nikeshdahal" class="crayons-avatar  crayons-avatar--l  "&gt;
            &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1045568%2F16a9894b-a9a8-4cac-9e59-f74775bd3c0c.jpg" alt="nikeshdahal profile" class="crayons-avatar__image"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;a href="/nikeshdahal" class="crayons-story__secondary fw-medium m:hidden"&gt;
              Nikesh Dahal
            &lt;/a&gt;
            &lt;div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"&gt;
              
                Nikesh Dahal
                
              
              &lt;div id="story-author-preview-content-2420989" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"&gt;
                &lt;div class="gap-4 grid"&gt;
                  &lt;div class="-mt-4"&gt;
                    &lt;a href="/nikeshdahal" class="flex"&gt;
                      &lt;span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"&gt;
                        &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1045568%2F16a9894b-a9a8-4cac-9e59-f74775bd3c0c.jpg" class="crayons-avatar__image" alt=""&gt;
                      &lt;/span&gt;
                      &lt;span class="crayons-link crayons-subtitle-2 mt-5"&gt;Nikesh Dahal&lt;/span&gt;
                    &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="print-hidden"&gt;
                    
                      Follow
                    
                  &lt;/div&gt;
                  &lt;div class="author-preview-metadata-container"&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;

          &lt;/div&gt;
          &lt;a href="https://dev.to/nikeshdahal/javascript-promises-asyncawait-a-beginner-friendly-guide-with-examples-1h1i" class="crayons-story__tertiary fs-xs"&gt;&lt;time&gt;Apr 21 '25&lt;/time&gt;&lt;span class="time-ago-indicator-initial-placeholder"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;

    &lt;/div&gt;

    &lt;div class="crayons-story__indention"&gt;
      &lt;h2 class="crayons-story__title crayons-story__title-full_post"&gt;
        &lt;a href="https://dev.to/nikeshdahal/javascript-promises-asyncawait-a-beginner-friendly-guide-with-examples-1h1i" id="article-link-2420989"&gt;
          📘 JavaScript Promises &amp;amp; Async/Await – A Beginner-Friendly Guide With Examples
        &lt;/a&gt;
      &lt;/h2&gt;
        &lt;div class="crayons-story__tags"&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/javascript"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;javascript&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/webdev"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;webdev&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/beginners"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;beginners&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/programming"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;programming&lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="crayons-story__bottom"&gt;
        &lt;div class="crayons-story__details"&gt;
          &lt;a href="https://dev.to/nikeshdahal/javascript-promises-asyncawait-a-beginner-friendly-guide-with-examples-1h1i" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"&gt;
            &lt;div class="multiple_reactions_aggregate"&gt;
              &lt;span class="multiple_reactions_icons_container"&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18"&gt;
                  &lt;/span&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18"&gt;
                  &lt;/span&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18"&gt;
                  &lt;/span&gt;
              &lt;/span&gt;
              &lt;span class="aggregate_reactions_counter"&gt;20&lt;span class="hidden s:inline"&gt; reactions&lt;/span&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/a&gt;
            &lt;a href="https://dev.to/nikeshdahal/javascript-promises-asyncawait-a-beginner-friendly-guide-with-examples-1h1i#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"&gt;
              Comments


              8&lt;span class="hidden s:inline"&gt; comments&lt;/span&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="crayons-story__save"&gt;
          &lt;small class="crayons-story__tertiary fs-xs mr-2"&gt;
            5 min read
          &lt;/small&gt;
            
              &lt;span class="bm-initial"&gt;
                

              &lt;/span&gt;
              &lt;span class="bm-success"&gt;
                

              &lt;/span&gt;
            
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;


</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>programming</category>
    </item>
    <item>
      <title>📢 Just published a new blog! " JavaScript Promises &amp; Async/Await – A Beginner-Friendly Guide With Examples"</title>
      <dc:creator>Nikesh Dahal</dc:creator>
      <pubDate>Mon, 21 Apr 2025 07:41:25 +0000</pubDate>
      <link>https://dev.to/nikeshdahal/just-published-a-new-blog-javascript-promises-asyncawait-a-beginner-friendly-guide-1hak</link>
      <guid>https://dev.to/nikeshdahal/just-published-a-new-blog-javascript-promises-asyncawait-a-beginner-friendly-guide-1hak</guid>
      <description>&lt;div class="ltag__link--embedded"&gt;
  &lt;div class="crayons-story "&gt;
  &lt;a href="https://dev.to/nikeshdahal/javascript-promises-asyncawait-a-beginner-friendly-guide-with-examples-1h1i" class="crayons-story__hidden-navigation-link"&gt;📘 JavaScript Promises &amp;amp; Async/Await – A Beginner-Friendly Guide With Examples&lt;/a&gt;


  &lt;div class="crayons-story__body crayons-story__body-full_post"&gt;
    &lt;div class="crayons-story__top"&gt;
      &lt;div class="crayons-story__meta"&gt;
        &lt;div class="crayons-story__author-pic"&gt;

          &lt;a href="/nikeshdahal" class="crayons-avatar  crayons-avatar--l  "&gt;
            &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1045568%2F16a9894b-a9a8-4cac-9e59-f74775bd3c0c.jpg" alt="nikeshdahal profile" class="crayons-avatar__image"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;a href="/nikeshdahal" class="crayons-story__secondary fw-medium m:hidden"&gt;
              Nikesh Dahal
            &lt;/a&gt;
            &lt;div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"&gt;
              
                Nikesh Dahal
                
              
              &lt;div id="story-author-preview-content-2420989" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"&gt;
                &lt;div class="gap-4 grid"&gt;
                  &lt;div class="-mt-4"&gt;
                    &lt;a href="/nikeshdahal" class="flex"&gt;
                      &lt;span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"&gt;
                        &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1045568%2F16a9894b-a9a8-4cac-9e59-f74775bd3c0c.jpg" class="crayons-avatar__image" alt=""&gt;
                      &lt;/span&gt;
                      &lt;span class="crayons-link crayons-subtitle-2 mt-5"&gt;Nikesh Dahal&lt;/span&gt;
                    &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="print-hidden"&gt;
                    
                      Follow
                    
                  &lt;/div&gt;
                  &lt;div class="author-preview-metadata-container"&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;

          &lt;/div&gt;
          &lt;a href="https://dev.to/nikeshdahal/javascript-promises-asyncawait-a-beginner-friendly-guide-with-examples-1h1i" class="crayons-story__tertiary fs-xs"&gt;&lt;time&gt;Apr 21 '25&lt;/time&gt;&lt;span class="time-ago-indicator-initial-placeholder"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;

    &lt;/div&gt;

    &lt;div class="crayons-story__indention"&gt;
      &lt;h2 class="crayons-story__title crayons-story__title-full_post"&gt;
        &lt;a href="https://dev.to/nikeshdahal/javascript-promises-asyncawait-a-beginner-friendly-guide-with-examples-1h1i" id="article-link-2420989"&gt;
          📘 JavaScript Promises &amp;amp; Async/Await – A Beginner-Friendly Guide With Examples
        &lt;/a&gt;
      &lt;/h2&gt;
        &lt;div class="crayons-story__tags"&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/javascript"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;javascript&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/webdev"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;webdev&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/beginners"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;beginners&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/programming"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;programming&lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="crayons-story__bottom"&gt;
        &lt;div class="crayons-story__details"&gt;
          &lt;a href="https://dev.to/nikeshdahal/javascript-promises-asyncawait-a-beginner-friendly-guide-with-examples-1h1i" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"&gt;
            &lt;div class="multiple_reactions_aggregate"&gt;
              &lt;span class="multiple_reactions_icons_container"&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18"&gt;
                  &lt;/span&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18"&gt;
                  &lt;/span&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18"&gt;
                  &lt;/span&gt;
              &lt;/span&gt;
              &lt;span class="aggregate_reactions_counter"&gt;20&lt;span class="hidden s:inline"&gt; reactions&lt;/span&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/a&gt;
            &lt;a href="https://dev.to/nikeshdahal/javascript-promises-asyncawait-a-beginner-friendly-guide-with-examples-1h1i#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"&gt;
              Comments


              8&lt;span class="hidden s:inline"&gt; comments&lt;/span&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="crayons-story__save"&gt;
          &lt;small class="crayons-story__tertiary fs-xs mr-2"&gt;
            5 min read
          &lt;/small&gt;
            
              &lt;span class="bm-initial"&gt;
                

              &lt;/span&gt;
              &lt;span class="bm-success"&gt;
                

              &lt;/span&gt;
            
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;


</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>programming</category>
    </item>
    <item>
      <title>📘 JavaScript Promises &amp; Async/Await – A Beginner-Friendly Guide With Examples</title>
      <dc:creator>Nikesh Dahal</dc:creator>
      <pubDate>Mon, 21 Apr 2025 06:35:02 +0000</pubDate>
      <link>https://dev.to/nikeshdahal/javascript-promises-asyncawait-a-beginner-friendly-guide-with-examples-1h1i</link>
      <guid>https://dev.to/nikeshdahal/javascript-promises-asyncawait-a-beginner-friendly-guide-with-examples-1h1i</guid>
      <description>&lt;h2&gt;
  
  
  Why Do We Even Need Promises?
&lt;/h2&gt;

&lt;p&gt;🕰️ &lt;strong&gt;Problem&lt;/strong&gt;: JavaScript is primarily synchronous, running one piece of code at a time.&lt;br&gt;
Imagine JS as a one-man band — it can only do one thing at a time. But the world (like APIs, file reading, or user clicks) doesn't wait.&lt;/p&gt;

&lt;p&gt;Let’s say:&lt;br&gt;
You fetch data from a server.&lt;br&gt;
It takes 2 seconds.&lt;br&gt;
Meanwhile, your app shouldn’t freeze.&lt;br&gt;
So we need a way to wait without blocking other work.&lt;/p&gt;

&lt;p&gt;i think now we are clear about the problem right ?  ok now lets understand about what exactly is promise.&lt;/p&gt;
&lt;h2&gt;
  
  
  🧃 The Juice Shop Analogy: Understanding Promises
&lt;/h2&gt;

&lt;p&gt;Imagine you're at a juice shop:&lt;br&gt;
You place an order for a mango juice.&lt;br&gt;
The shopkeeper says, "It'll be ready in 5 minutes."&lt;br&gt;
You receive a token and wait.&lt;/p&gt;

&lt;p&gt;After 5 minutes:&lt;/p&gt;

&lt;p&gt;If the juice is ready, you get it. ✅&lt;br&gt;
If mangoes are out of stock, you're informed. ❌&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;In JavaScript, this scenario shows how Promises work.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;
  
  
  🧠 So, What is a Promise in JavaScript?
&lt;/h2&gt;

&lt;p&gt;A Promise is like a "contract" that says:&lt;/p&gt;

&lt;p&gt;“I promise to give you something in the future — either a success or a failure.”&lt;/p&gt;

&lt;p&gt;🔄 The 3 States of a Promise:&lt;/p&gt;
&lt;h2&gt;
  
  
  JavaScript Promise States
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;State&lt;/th&gt;
&lt;th&gt;Meaning&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;🕒 Pending&lt;/td&gt;
&lt;td&gt;Still waiting. Not ready yet.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;✅ Fulfilled&lt;/td&gt;
&lt;td&gt;Promise kept. Success! Got the result.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;❌ Rejected&lt;/td&gt;
&lt;td&gt;Something went wrong. It failed.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;
&lt;h2&gt;
  
  
  🧪 Let’s Try a Simple Example (No need to panic)
&lt;/h2&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;juicePromise&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Promise&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;resolve&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;reject&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;mangoes&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;mangoes&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;resolve&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Here is your mango juice!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;reject&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Sorry, no mangoes today.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="nx"&gt;juicePromise&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;  &lt;span class="c1"&gt;// when successful&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;catch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt; &lt;span class="c1"&gt;// when failed&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h2&gt;
  
  
  ⏱️ Why Use Promises?
&lt;/h2&gt;

&lt;p&gt;Because JavaScript is single-threaded. That means it can only do one thing at a time. So if you wait 5 seconds to get data from a server, JavaScript would freeze your whole website.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Promises let JS do something else while waiting.&lt;/strong&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  😵‍💫 Old Way: Callback Hell (Before Promises)
&lt;/h2&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nf"&gt;getData&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;processData&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;final&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;displayData&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;final&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="c1"&gt;// more and more nesting 😭&lt;/span&gt;
    &lt;span class="p"&gt;});&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;blockquote&gt;
&lt;p&gt;Too many () inside () inside () = messy and hard to read.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;
  
  
  🦸‍♂️ Superhero: Promises to the Rescue
&lt;/h2&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nf"&gt;getData&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;processData&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;displayData&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;catch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Cleaner, right? 😊&lt;/p&gt;
&lt;h2&gt;
  
  
  🧱 Let's Understand Promise Chaining
&lt;/h2&gt;

&lt;p&gt;Every .then() returns a new promise. You can chain .then() to run things in order.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;first&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Promise&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;resolve&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;setTimeout&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;resolve&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Step 1 done&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="mi"&gt;1000&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;second&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Promise&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;resolve&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;setTimeout&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;resolve&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt; → Step 2 done&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="mi"&gt;1000&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nf"&gt;first&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;second&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;final&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;final&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;code&gt;Output: Step 1 done → Step 2 done (after 2 seconds)&lt;/code&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  🔃 What is async/await and Why is it Cool?
&lt;/h2&gt;

&lt;p&gt;Problem: .then() is better than callbacks, but still not very “human-friendly”.&lt;/p&gt;

&lt;p&gt;Let’s rewrite using async/await (which works on top of promises):&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;getJuice&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Promise&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;resolve&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;setTimeout&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nf"&gt;resolve&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Here's your juice!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="mi"&gt;2000&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;serveJuice&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Ordering juice...&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;getJuice&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;  &lt;span class="c1"&gt;// wait until juice is ready&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nf"&gt;serveJuice&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;output:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Ordering juice...
(wait 2 sec)
Here's your juice!
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Why it’s easier?&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;No .then()&lt;/li&gt;
&lt;li&gt;Looks like normal code, but still async!&lt;/li&gt;
&lt;li&gt;Easier to debug and read&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  ⚡ Parallel vs Sequential
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;getUser&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;   &lt;span class="c1"&gt;// wait 1 sec&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;posts&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;getPosts&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// wait 1 sec&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;Takes 2 seconds total right ? yes it will took 2 sec but what if we can do this same thing in 1 sec ?  yes you heard it right . we can do same thing in 1 sec and that's parallel way.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;✅ Parallel: Run together&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;posts&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nb"&gt;Promise&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;all&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="nf"&gt;getUser&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt; &lt;span class="nf"&gt;getPosts&lt;/span&gt;&lt;span class="p"&gt;()]);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;Takes 1 second only!&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  ❌ Mixing await with normal functions
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;await getSomething(); // ❌ ERROR if not inside async

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;async function doIt() {
  await getSomething(); // ✅
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;lets try to recall all of the above things and know the things to handle the asynchronous events in JS.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  🕰️ Evolution of Asynchronous Handling in JavaScript
&lt;/h2&gt;

&lt;p&gt;1)📞 Callbacks (The Beginning)&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What is it?&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A function passed as an argument to be called after another function finishes.&lt;/li&gt;
&lt;li&gt;The earliest way to handle async behavior in JavaScript.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Problem:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Callback Hell (nested pyramid of doom).&lt;/li&gt;
&lt;li&gt;Hard to read, debug, and maintain.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;getData&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;callback&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;setTimeout&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;callback&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;📦 Data received&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="mi"&gt;1000&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nf"&gt;getData&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;2)🔮 Promises (Introduced in ES6 - 2015)&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What is it?&lt;/strong&gt;&lt;br&gt;
An object that represents a value that may not be available yet, but will be resolved in the future.&lt;/p&gt;

&lt;p&gt;Uses .then() for success and .catch() for errors.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Improvement:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Avoids nesting by using chaining.&lt;/li&gt;
&lt;li&gt;Easier error handling&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;getData&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Promise&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;resolve&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;reject&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;setTimeout&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nf"&gt;resolve&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;📦 Data from promise&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="mi"&gt;1000&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nf"&gt;getData&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;catch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;3)🧙 Async/Await (Introduced in ES8 - 2017)&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What is it?&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Syntactic sugar over promises.&lt;/li&gt;
&lt;li&gt;Makes async code look synchronous.&lt;/li&gt;
&lt;li&gt;Works only inside async functions.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Improvement:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Cleaner, more readable.&lt;/li&gt;
&lt;li&gt;Try/catch block makes error handling familiar.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;fetchData&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;getData&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nf"&gt;fetchData&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;4)🧩 Top-level Await (Introduced in ES2022)&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What is it?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Allows you to use await outside of an async function.&lt;br&gt;
Mostly used in modules or top-level script files.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Improvement:&lt;/strong&gt;&lt;br&gt;
Useful for initialization scripts, loading configs, or data before app starts.&lt;/p&gt;

&lt;p&gt;example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;https://api.example.com/data&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;Must be in a module or a supported runtime like Deno or modern Node.js (with "type": "module").&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;5)🛠️ Newer Promise Features&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;not new paradigms, but powerful tools&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;5.1. Promise.all()&lt;br&gt;
Run multiple promises in parallel and wait for all.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nb"&gt;Promise&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;all&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="nf"&gt;getUser&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt; &lt;span class="nf"&gt;getPosts&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt; &lt;span class="nf"&gt;getComments&lt;/span&gt;&lt;span class="p"&gt;()])&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(([&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;posts&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;comments&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;posts&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;comments&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;5.2. Promise.race()&lt;br&gt;
Resolves/rejects as soon as any one of the promises does.&lt;/p&gt;

&lt;p&gt;5.3. Promise.allSettled()&lt;br&gt;
Waits for all promises to finish (regardless of success or failure).&lt;/p&gt;
&lt;h2&gt;
  
  
  📕 Summary
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;JavaScript Promise Concept Cheat Sheet&lt;/strong&gt;&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Concept&lt;/th&gt;
&lt;th&gt;Meaning&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Promise&lt;/td&gt;
&lt;td&gt;"I’ll give it to you later"&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;resolve&lt;/td&gt;
&lt;td&gt;"Here you go!"&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;reject&lt;/td&gt;
&lt;td&gt;"Sorry, can't do it."&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;.then()&lt;/td&gt;
&lt;td&gt;"What to do after it’s done"&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;.catch()&lt;/td&gt;
&lt;td&gt;"What to do if it failed"&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;async&lt;/td&gt;
&lt;td&gt;Tells JS this function uses &lt;code&gt;await&lt;/code&gt; inside&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;await&lt;/td&gt;
&lt;td&gt;"Wait here until I get the result"&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;📊 Summary Table: Async Handling in JavaScript&lt;/strong&gt;&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Approach&lt;/th&gt;
&lt;th&gt;Introduced In&lt;/th&gt;
&lt;th&gt;Syntax Style&lt;/th&gt;
&lt;th&gt;Pros&lt;/th&gt;
&lt;th&gt;Cons&lt;/th&gt;
&lt;th&gt;Example Keywords&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Callbacks&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Before ES6&lt;/td&gt;
&lt;td&gt;Function-based&lt;/td&gt;
&lt;td&gt;Simple, works everywhere&lt;/td&gt;
&lt;td&gt;Callback Hell, hard to manage&lt;/td&gt;
&lt;td&gt;&lt;code&gt;function(cb) {}&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Promises&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;ES6 (2015)&lt;/td&gt;
&lt;td&gt;Chain-based&lt;/td&gt;
&lt;td&gt;Cleaner than callbacks, chaining&lt;/td&gt;
&lt;td&gt;Can still get nested&lt;/td&gt;
&lt;td&gt;
&lt;code&gt;.then()&lt;/code&gt;, &lt;code&gt;.catch()&lt;/code&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Async/Await&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;ES8 (2017)&lt;/td&gt;
&lt;td&gt;Synchronous-like&lt;/td&gt;
&lt;td&gt;Easy to read, debug, write&lt;/td&gt;
&lt;td&gt;Only usable inside async funcs&lt;/td&gt;
&lt;td&gt;
&lt;code&gt;async&lt;/code&gt;, &lt;code&gt;await&lt;/code&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Top-level Await&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;ES2022&lt;/td&gt;
&lt;td&gt;Global await usage&lt;/td&gt;
&lt;td&gt;Useful in modules&lt;/td&gt;
&lt;td&gt;Not supported everywhere&lt;/td&gt;
&lt;td&gt;
&lt;code&gt;await&lt;/code&gt; (no func wrapper)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Promise utilities&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;ES6+&lt;/td&gt;
&lt;td&gt;Combined use&lt;/td&gt;
&lt;td&gt;Advanced control flow&lt;/td&gt;
&lt;td&gt;Must understand promises well&lt;/td&gt;
&lt;td&gt;
&lt;code&gt;Promise.all()&lt;/code&gt;, &lt;code&gt;race()&lt;/code&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;
&lt;h2&gt;
  
  
  Want to Try It Yourself?
&lt;/h2&gt;

&lt;p&gt;Here’s a simple test you can run in your browser console or in JSFiddle:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;makeTea&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Promise&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;resolve&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;reject&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;setTimeout&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nf"&gt;resolve&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;☕ Tea is ready!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="mi"&gt;1500&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;startDay&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Starting the day...&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;tea&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;makeTea&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;tea&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nf"&gt;startDay&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;💡 Pro Tip: Always choose the approach that keeps your code clean and readable. &lt;code&gt;async/await&lt;/code&gt; is your best friend in modern JavaScript!&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;i will post all promises methods in an interesting way in next blog soon . the above content is just to make you familiar about promises and async and await . &lt;/p&gt;

&lt;p&gt;stay tuned !!&lt;br&gt;
Happy Learning !!&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>programming</category>
    </item>
    <item>
      <title>New blog alert! 📣 Essential JavaScript Cheat Sheet for beginners 👉 Check it</title>
      <dc:creator>Nikesh Dahal</dc:creator>
      <pubDate>Sun, 20 Apr 2025 10:52:55 +0000</pubDate>
      <link>https://dev.to/nikeshdahal/new-blog-alert-essential-javascript-cheat-sheet-for-beginners-check-it-566c</link>
      <guid>https://dev.to/nikeshdahal/new-blog-alert-essential-javascript-cheat-sheet-for-beginners-check-it-566c</guid>
      <description>&lt;div class="ltag__link--embedded"&gt;
  &lt;div class="crayons-story "&gt;
  &lt;a href="https://dev.to/nikeshdahal/javascript-cheat-sheet-essential-methods-every-developer-should-know-3n28" class="crayons-story__hidden-navigation-link"&gt;📚JavaScript Cheat Sheet: Essential Methods Every Developer Should Know&lt;/a&gt;


  &lt;div class="crayons-story__body crayons-story__body-full_post"&gt;
    &lt;div class="crayons-story__top"&gt;
      &lt;div class="crayons-story__meta"&gt;
        &lt;div class="crayons-story__author-pic"&gt;

          &lt;a href="/nikeshdahal" class="crayons-avatar  crayons-avatar--l  "&gt;
            &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1045568%2F16a9894b-a9a8-4cac-9e59-f74775bd3c0c.jpg" alt="nikeshdahal profile" class="crayons-avatar__image"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;a href="/nikeshdahal" class="crayons-story__secondary fw-medium m:hidden"&gt;
              Nikesh Dahal
            &lt;/a&gt;
            &lt;div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"&gt;
              
                Nikesh Dahal
                
              
              &lt;div id="story-author-preview-content-2410372" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"&gt;
                &lt;div class="gap-4 grid"&gt;
                  &lt;div class="-mt-4"&gt;
                    &lt;a href="/nikeshdahal" class="flex"&gt;
                      &lt;span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"&gt;
                        &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1045568%2F16a9894b-a9a8-4cac-9e59-f74775bd3c0c.jpg" class="crayons-avatar__image" alt=""&gt;
                      &lt;/span&gt;
                      &lt;span class="crayons-link crayons-subtitle-2 mt-5"&gt;Nikesh Dahal&lt;/span&gt;
                    &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="print-hidden"&gt;
                    
                      Follow
                    
                  &lt;/div&gt;
                  &lt;div class="author-preview-metadata-container"&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;

          &lt;/div&gt;
          &lt;a href="https://dev.to/nikeshdahal/javascript-cheat-sheet-essential-methods-every-developer-should-know-3n28" class="crayons-story__tertiary fs-xs"&gt;&lt;time&gt;Apr 16 '25&lt;/time&gt;&lt;span class="time-ago-indicator-initial-placeholder"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;

    &lt;/div&gt;

    &lt;div class="crayons-story__indention"&gt;
      &lt;h2 class="crayons-story__title crayons-story__title-full_post"&gt;
        &lt;a href="https://dev.to/nikeshdahal/javascript-cheat-sheet-essential-methods-every-developer-should-know-3n28" id="article-link-2410372"&gt;
          📚JavaScript Cheat Sheet: Essential Methods Every Developer Should Know
        &lt;/a&gt;
      &lt;/h2&gt;
        &lt;div class="crayons-story__tags"&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/javascript"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;javascript&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/beginners"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;beginners&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/programming"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;programming&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/cheatsheet"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;cheatsheet&lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="crayons-story__bottom"&gt;
        &lt;div class="crayons-story__details"&gt;
          &lt;a href="https://dev.to/nikeshdahal/javascript-cheat-sheet-essential-methods-every-developer-should-know-3n28" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"&gt;
            &lt;div class="multiple_reactions_aggregate"&gt;
              &lt;span class="multiple_reactions_icons_container"&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18"&gt;
                  &lt;/span&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18"&gt;
                  &lt;/span&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18"&gt;
                  &lt;/span&gt;
              &lt;/span&gt;
              &lt;span class="aggregate_reactions_counter"&gt;18&lt;span class="hidden s:inline"&gt; reactions&lt;/span&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/a&gt;
            &lt;a href="https://dev.to/nikeshdahal/javascript-cheat-sheet-essential-methods-every-developer-should-know-3n28#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"&gt;
              Comments


              10&lt;span class="hidden s:inline"&gt; comments&lt;/span&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="crayons-story__save"&gt;
          &lt;small class="crayons-story__tertiary fs-xs mr-2"&gt;
            4 min read
          &lt;/small&gt;
            
              &lt;span class="bm-initial"&gt;
                

              &lt;/span&gt;
              &lt;span class="bm-success"&gt;
                

              &lt;/span&gt;
            
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;


</description>
      <category>javascript</category>
      <category>beginners</category>
      <category>programming</category>
      <category>cheatsheet</category>
    </item>
    <item>
      <title>New blog alert! 📣 I’ve compiled an Essential JavaScript Cheat Sheet for beginners 👉 Check it</title>
      <dc:creator>Nikesh Dahal</dc:creator>
      <pubDate>Sun, 20 Apr 2025 10:52:21 +0000</pubDate>
      <link>https://dev.to/nikeshdahal/new-blog-alert-ive-compiled-an-essential-javascript-cheat-sheet-for-beginners-check-it-13pb</link>
      <guid>https://dev.to/nikeshdahal/new-blog-alert-ive-compiled-an-essential-javascript-cheat-sheet-for-beginners-check-it-13pb</guid>
      <description>&lt;div class="ltag__link--embedded"&gt;
  &lt;div class="crayons-story "&gt;
  &lt;a href="https://dev.to/nikeshdahal/javascript-cheat-sheet-essential-methods-every-developer-should-know-3n28" class="crayons-story__hidden-navigation-link"&gt;📚JavaScript Cheat Sheet: Essential Methods Every Developer Should Know&lt;/a&gt;


  &lt;div class="crayons-story__body crayons-story__body-full_post"&gt;
    &lt;div class="crayons-story__top"&gt;
      &lt;div class="crayons-story__meta"&gt;
        &lt;div class="crayons-story__author-pic"&gt;

          &lt;a href="/nikeshdahal" class="crayons-avatar  crayons-avatar--l  "&gt;
            &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1045568%2F16a9894b-a9a8-4cac-9e59-f74775bd3c0c.jpg" alt="nikeshdahal profile" class="crayons-avatar__image"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;a href="/nikeshdahal" class="crayons-story__secondary fw-medium m:hidden"&gt;
              Nikesh Dahal
            &lt;/a&gt;
            &lt;div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"&gt;
              
                Nikesh Dahal
                
              
              &lt;div id="story-author-preview-content-2410372" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"&gt;
                &lt;div class="gap-4 grid"&gt;
                  &lt;div class="-mt-4"&gt;
                    &lt;a href="/nikeshdahal" class="flex"&gt;
                      &lt;span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"&gt;
                        &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1045568%2F16a9894b-a9a8-4cac-9e59-f74775bd3c0c.jpg" class="crayons-avatar__image" alt=""&gt;
                      &lt;/span&gt;
                      &lt;span class="crayons-link crayons-subtitle-2 mt-5"&gt;Nikesh Dahal&lt;/span&gt;
                    &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="print-hidden"&gt;
                    
                      Follow
                    
                  &lt;/div&gt;
                  &lt;div class="author-preview-metadata-container"&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;

          &lt;/div&gt;
          &lt;a href="https://dev.to/nikeshdahal/javascript-cheat-sheet-essential-methods-every-developer-should-know-3n28" class="crayons-story__tertiary fs-xs"&gt;&lt;time&gt;Apr 16 '25&lt;/time&gt;&lt;span class="time-ago-indicator-initial-placeholder"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;

    &lt;/div&gt;

    &lt;div class="crayons-story__indention"&gt;
      &lt;h2 class="crayons-story__title crayons-story__title-full_post"&gt;
        &lt;a href="https://dev.to/nikeshdahal/javascript-cheat-sheet-essential-methods-every-developer-should-know-3n28" id="article-link-2410372"&gt;
          📚JavaScript Cheat Sheet: Essential Methods Every Developer Should Know
        &lt;/a&gt;
      &lt;/h2&gt;
        &lt;div class="crayons-story__tags"&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/javascript"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;javascript&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/beginners"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;beginners&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/programming"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;programming&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/cheatsheet"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;cheatsheet&lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="crayons-story__bottom"&gt;
        &lt;div class="crayons-story__details"&gt;
          &lt;a href="https://dev.to/nikeshdahal/javascript-cheat-sheet-essential-methods-every-developer-should-know-3n28" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"&gt;
            &lt;div class="multiple_reactions_aggregate"&gt;
              &lt;span class="multiple_reactions_icons_container"&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18"&gt;
                  &lt;/span&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18"&gt;
                  &lt;/span&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18"&gt;
                  &lt;/span&gt;
              &lt;/span&gt;
              &lt;span class="aggregate_reactions_counter"&gt;18&lt;span class="hidden s:inline"&gt; reactions&lt;/span&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/a&gt;
            &lt;a href="https://dev.to/nikeshdahal/javascript-cheat-sheet-essential-methods-every-developer-should-know-3n28#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"&gt;
              Comments


              10&lt;span class="hidden s:inline"&gt; comments&lt;/span&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="crayons-story__save"&gt;
          &lt;small class="crayons-story__tertiary fs-xs mr-2"&gt;
            4 min read
          &lt;/small&gt;
            
              &lt;span class="bm-initial"&gt;
                

              &lt;/span&gt;
              &lt;span class="bm-success"&gt;
                

              &lt;/span&gt;
            
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;


</description>
      <category>javascript</category>
      <category>beginners</category>
      <category>programming</category>
      <category>cheatsheet</category>
    </item>
    <item>
      <title>New blog alert! 📣 I’ve compiled an Essential JavaScript Cheat Sheet for beginners It’s packed with essential methods and real-world examples to strengthen your JS foundation. Perfect for anyone starting out with JavaScript, React, or Node.js! 👉 Check it</title>
      <dc:creator>Nikesh Dahal</dc:creator>
      <pubDate>Sun, 20 Apr 2025 10:51:31 +0000</pubDate>
      <link>https://dev.to/nikeshdahal/new-blog-alert-ive-compiled-an-essential-javascript-cheat-sheet-for-beginners-its-packed-5adf</link>
      <guid>https://dev.to/nikeshdahal/new-blog-alert-ive-compiled-an-essential-javascript-cheat-sheet-for-beginners-its-packed-5adf</guid>
      <description>&lt;div class="ltag__link--embedded"&gt;
  &lt;div class="crayons-story "&gt;
  &lt;a href="https://dev.to/nikeshdahal/javascript-cheat-sheet-essential-methods-every-developer-should-know-3n28" class="crayons-story__hidden-navigation-link"&gt;📚JavaScript Cheat Sheet: Essential Methods Every Developer Should Know&lt;/a&gt;


  &lt;div class="crayons-story__body crayons-story__body-full_post"&gt;
    &lt;div class="crayons-story__top"&gt;
      &lt;div class="crayons-story__meta"&gt;
        &lt;div class="crayons-story__author-pic"&gt;

          &lt;a href="/nikeshdahal" class="crayons-avatar  crayons-avatar--l  "&gt;
            &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1045568%2F16a9894b-a9a8-4cac-9e59-f74775bd3c0c.jpg" alt="nikeshdahal profile" class="crayons-avatar__image"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;a href="/nikeshdahal" class="crayons-story__secondary fw-medium m:hidden"&gt;
              Nikesh Dahal
            &lt;/a&gt;
            &lt;div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"&gt;
              
                Nikesh Dahal
                
              
              &lt;div id="story-author-preview-content-2410372" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"&gt;
                &lt;div class="gap-4 grid"&gt;
                  &lt;div class="-mt-4"&gt;
                    &lt;a href="/nikeshdahal" class="flex"&gt;
                      &lt;span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"&gt;
                        &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1045568%2F16a9894b-a9a8-4cac-9e59-f74775bd3c0c.jpg" class="crayons-avatar__image" alt=""&gt;
                      &lt;/span&gt;
                      &lt;span class="crayons-link crayons-subtitle-2 mt-5"&gt;Nikesh Dahal&lt;/span&gt;
                    &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="print-hidden"&gt;
                    
                      Follow
                    
                  &lt;/div&gt;
                  &lt;div class="author-preview-metadata-container"&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;

          &lt;/div&gt;
          &lt;a href="https://dev.to/nikeshdahal/javascript-cheat-sheet-essential-methods-every-developer-should-know-3n28" class="crayons-story__tertiary fs-xs"&gt;&lt;time&gt;Apr 16 '25&lt;/time&gt;&lt;span class="time-ago-indicator-initial-placeholder"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;

    &lt;/div&gt;

    &lt;div class="crayons-story__indention"&gt;
      &lt;h2 class="crayons-story__title crayons-story__title-full_post"&gt;
        &lt;a href="https://dev.to/nikeshdahal/javascript-cheat-sheet-essential-methods-every-developer-should-know-3n28" id="article-link-2410372"&gt;
          📚JavaScript Cheat Sheet: Essential Methods Every Developer Should Know
        &lt;/a&gt;
      &lt;/h2&gt;
        &lt;div class="crayons-story__tags"&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/javascript"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;javascript&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/beginners"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;beginners&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/programming"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;programming&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/cheatsheet"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;cheatsheet&lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="crayons-story__bottom"&gt;
        &lt;div class="crayons-story__details"&gt;
          &lt;a href="https://dev.to/nikeshdahal/javascript-cheat-sheet-essential-methods-every-developer-should-know-3n28" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"&gt;
            &lt;div class="multiple_reactions_aggregate"&gt;
              &lt;span class="multiple_reactions_icons_container"&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18"&gt;
                  &lt;/span&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18"&gt;
                  &lt;/span&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18"&gt;
                  &lt;/span&gt;
              &lt;/span&gt;
              &lt;span class="aggregate_reactions_counter"&gt;18&lt;span class="hidden s:inline"&gt; reactions&lt;/span&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/a&gt;
            &lt;a href="https://dev.to/nikeshdahal/javascript-cheat-sheet-essential-methods-every-developer-should-know-3n28#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"&gt;
              Comments


              10&lt;span class="hidden s:inline"&gt; comments&lt;/span&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="crayons-story__save"&gt;
          &lt;small class="crayons-story__tertiary fs-xs mr-2"&gt;
            4 min read
          &lt;/small&gt;
            
              &lt;span class="bm-initial"&gt;
                

              &lt;/span&gt;
              &lt;span class="bm-success"&gt;
                

              &lt;/span&gt;
            
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;


</description>
      <category>javascript</category>
      <category>beginners</category>
      <category>programming</category>
      <category>cheatsheet</category>
    </item>
    <item>
      <title>📚JavaScript Cheat Sheet: Essential Methods Every Developer Should Know</title>
      <dc:creator>Nikesh Dahal</dc:creator>
      <pubDate>Wed, 16 Apr 2025 04:48:27 +0000</pubDate>
      <link>https://dev.to/nikeshdahal/javascript-cheat-sheet-essential-methods-every-developer-should-know-3n28</link>
      <guid>https://dev.to/nikeshdahal/javascript-cheat-sheet-essential-methods-every-developer-should-know-3n28</guid>
      <description>&lt;h2&gt;
  
  
  🧾 Description:
&lt;/h2&gt;

&lt;p&gt;This guide book is perfect for beginners who want to explore JavaScript and build proficiency. It covers essential JavaScript methods that will strengthen your base and set you on the path to becoming a skilled JavaScript developer.&lt;/p&gt;

&lt;p&gt;Buckle up for a wild JavaScript ride! 🎢 This guide makes learning methods fun and easy, helping you build a strong foundation while keeping things exciting. Let’s get started!&lt;/p&gt;

&lt;h2&gt;
  
  
  1. 🔤 String Methods
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;strong&gt;Method&lt;/strong&gt;&lt;/th&gt;
&lt;th&gt;&lt;strong&gt;Description&lt;/strong&gt;&lt;/th&gt;
&lt;th&gt;&lt;strong&gt;Example&lt;/strong&gt;&lt;/th&gt;
&lt;th&gt;&lt;strong&gt;Use Case&lt;/strong&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;length&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Returns length of string&lt;/td&gt;
&lt;td&gt;&lt;code&gt;"hello".length → 5&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Validate input length&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;toUpperCase()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Converts string to uppercase&lt;/td&gt;
&lt;td&gt;&lt;code&gt;"abc".toUpperCase() → "ABC"&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Case-insensitive comparison&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;toLowerCase()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Converts string to lowercase&lt;/td&gt;
&lt;td&gt;&lt;code&gt;"ABC".toLowerCase() → "abc"&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Normalize string&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;trim()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Removes whitespace from both ends&lt;/td&gt;
&lt;td&gt;&lt;code&gt;"  hi  ".trim() → "hi"&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Clean user input&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;includes()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Checks if string contains substring&lt;/td&gt;
&lt;td&gt;&lt;code&gt;"hello".includes("ll") → true&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Search text&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;startsWith()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Checks if string starts with given substring&lt;/td&gt;
&lt;td&gt;&lt;code&gt;"hello".startsWith("he") → true&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Input format validation&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;endsWith()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Checks if string ends with given substring&lt;/td&gt;
&lt;td&gt;&lt;code&gt;"hello".endsWith("lo") → true&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;File extension validation&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;slice(start, end)&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Extracts part of string&lt;/td&gt;
&lt;td&gt;&lt;code&gt;"hello".slice(1,4) → "ell"&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Substring manipulation&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;split()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Splits string into an array&lt;/td&gt;
&lt;td&gt;&lt;code&gt;"a,b,c".split(",") → ["a", "b", "c"]&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;CSV parsing&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;replace()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Replaces substring in string&lt;/td&gt;
&lt;td&gt;&lt;code&gt;"hello".replace("l", "x") → "hexlo"&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Text formatting&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;match()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Matches string with regex&lt;/td&gt;
&lt;td&gt;&lt;code&gt;"abc123".match(/\d+/) → ["123"]&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Pattern matching&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  2. 📦 Array Methods
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;strong&gt;Method&lt;/strong&gt;&lt;/th&gt;
&lt;th&gt;&lt;strong&gt;Description&lt;/strong&gt;&lt;/th&gt;
&lt;th&gt;&lt;strong&gt;Example&lt;/strong&gt;&lt;/th&gt;
&lt;th&gt;&lt;strong&gt;Use Case&lt;/strong&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;length&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Array length&lt;/td&gt;
&lt;td&gt;&lt;code&gt;[1,2,3].length → 3&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Limit pagination&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;push()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Add element to the end&lt;/td&gt;
&lt;td&gt;&lt;code&gt;[1,2].push(3) → [1,2,3]&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Add elements dynamically&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;pop()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Remove element from the end&lt;/td&gt;
&lt;td&gt;&lt;code&gt;[1,2,3].pop() → 3&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Stack behavior&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;unshift()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Add element to the beginning&lt;/td&gt;
&lt;td&gt;&lt;code&gt;[2,3].unshift(1) → [1,2,3]&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Queue behavior&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;shift()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Remove element from the beginning&lt;/td&gt;
&lt;td&gt;&lt;code&gt;[1,2,3].shift() → 1&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Queue behavior&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;map()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Transform array&lt;/td&gt;
&lt;td&gt;&lt;code&gt;[1,2,3].map(x =&amp;gt; x*2) → [2,4,6]&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;UI rendering&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;filter()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Filter array&lt;/td&gt;
&lt;td&gt;&lt;code&gt;[1,2,3].filter(x =&amp;gt; x &amp;gt; 1) → [2,3]&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Search result&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;reduce()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Reduce array to a single value&lt;/td&gt;
&lt;td&gt;&lt;code&gt;[1,2,3].reduce((a,b) =&amp;gt; a + b) → 6&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Calculate total&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;find()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Find first match&lt;/td&gt;
&lt;td&gt;&lt;code&gt;[1,2,3].find(x =&amp;gt; x === 2) → 2&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Find user&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;findIndex()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Find index of first match&lt;/td&gt;
&lt;td&gt;&lt;code&gt;[1,2,3].findIndex(x =&amp;gt; x === 2) → 1&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Locate position&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;forEach()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Loop through array&lt;/td&gt;
&lt;td&gt;&lt;code&gt;[1,2].forEach(x =&amp;gt; console.log(x))&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Side effects&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;some()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Check if at least one match exists&lt;/td&gt;
&lt;td&gt;&lt;code&gt;[1,2].some(x =&amp;gt; x &amp;gt; 1) → true&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Validation&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;every()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Check if all items match&lt;/td&gt;
&lt;td&gt;&lt;code&gt;[1,2].every(x =&amp;gt; x &amp;gt; 0) → true&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Input checks&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;sort()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Sort array elements&lt;/td&gt;
&lt;td&gt;&lt;code&gt;[3,1,2].sort() → [1,2,3]&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Alphabetical or numeric sort&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;concat()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Merge arrays&lt;/td&gt;
&lt;td&gt;&lt;code&gt;[1,2].concat([3,4]) → [1,2,3,4]&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Pagination merge&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;flat()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Flatten nested arrays&lt;/td&gt;
&lt;td&gt;&lt;code&gt;[1,[2,3]].flat() → [1,2,3]&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Clean structure&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;includes()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Check presence of an element&lt;/td&gt;
&lt;td&gt;&lt;code&gt;[1,2,3].includes(2) → true&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Item check&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  3. 🧱 Object Methods
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Method&lt;/th&gt;
&lt;th&gt;Description&lt;/th&gt;
&lt;th&gt;Example&lt;/th&gt;
&lt;th&gt;Use Case&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;Object.keys(obj)&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Array of keys&lt;/td&gt;
&lt;td&gt;&lt;code&gt;Object.keys({a:1}) → ["a"]&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Iterate object&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;Object.values(obj)&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Array of values&lt;/td&gt;
&lt;td&gt;&lt;code&gt;Object.values({a:1}) → [1]&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Values loop&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;Object.entries(obj)&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Array of [key,value]&lt;/td&gt;
&lt;td&gt;&lt;code&gt;Object.entries({a:1}) → [["a",1]]&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Convert to array&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;Object.assign()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Merge objects&lt;/td&gt;
&lt;td&gt;&lt;code&gt;Object.assign({}, a, b)&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Combine data&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;hasOwnProperty()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Check key exists&lt;/td&gt;
&lt;td&gt;&lt;code&gt;obj.hasOwnProperty("x")&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Secure access&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  4. 🔢 Number Methods
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Method&lt;/th&gt;
&lt;th&gt;Description&lt;/th&gt;
&lt;th&gt;Example&lt;/th&gt;
&lt;th&gt;Use Case&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;parseInt()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;String to int&lt;/td&gt;
&lt;td&gt;&lt;code&gt;parseInt("10") → 10&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Input conversion&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;parseFloat()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;String to float&lt;/td&gt;
&lt;td&gt;&lt;code&gt;parseFloat("10.5") → 10.5&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Price parsing&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;toFixed()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Format decimals&lt;/td&gt;
&lt;td&gt;&lt;code&gt;(2.345).toFixed(2) → "2.35"&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Display currency&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;isNaN()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Check if Not a Number&lt;/td&gt;
&lt;td&gt;&lt;code&gt;isNaN("abc") → true&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Validate input&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  5. 📅 Date Methods
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Method&lt;/th&gt;
&lt;th&gt;Description&lt;/th&gt;
&lt;th&gt;Example&lt;/th&gt;
&lt;th&gt;Use Case&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;new Date()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Create date&lt;/td&gt;
&lt;td&gt;&lt;code&gt;new Date()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Current timestamp&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;Date.now()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Get timestamp&lt;/td&gt;
&lt;td&gt;&lt;code&gt;Date.now()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Timer/log&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;getFullYear()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Get year&lt;/td&gt;
&lt;td&gt;&lt;code&gt;new Date().getFullYear()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Age calc&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;getMonth()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Get month (0-index)&lt;/td&gt;
&lt;td&gt;&lt;code&gt;new Date().getMonth()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Calendar logic&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;getDate()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Get date&lt;/td&gt;
&lt;td&gt;&lt;code&gt;new Date().getDate()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Billing&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;toISOString()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;ISO format&lt;/td&gt;
&lt;td&gt;&lt;code&gt;new Date().toISOString()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Backend format&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  6. 🌐 DOM Methods
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Method&lt;/th&gt;
&lt;th&gt;Description&lt;/th&gt;
&lt;th&gt;Example&lt;/th&gt;
&lt;th&gt;Use Case&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;getElementById()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Get by ID&lt;/td&gt;
&lt;td&gt;&lt;code&gt;document.getElementById("app")&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Manipulate DOM&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;querySelector()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Get first match&lt;/td&gt;
&lt;td&gt;&lt;code&gt;document.querySelector(".btn")&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Advanced selection&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;createElement()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Create HTML element&lt;/td&gt;
&lt;td&gt;&lt;code&gt;document.createElement("div")&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Dynamic UI&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;appendChild()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Add element&lt;/td&gt;
&lt;td&gt;&lt;code&gt;parent.appendChild(child)&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Build tree&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;innerHTML&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Read/write HTML&lt;/td&gt;
&lt;td&gt;&lt;code&gt;div.innerHTML = "&amp;lt;b&amp;gt;Hi&amp;lt;/b&amp;gt;"&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Inject content&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;addEventListener()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Add event handler&lt;/td&gt;
&lt;td&gt;&lt;code&gt;btn.addEventListener("click", fn)&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;UI interactivity&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  7. 🛠️ Utility Functions
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Function&lt;/th&gt;
&lt;th&gt;Description&lt;/th&gt;
&lt;th&gt;Example&lt;/th&gt;
&lt;th&gt;Use Case&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;setTimeout()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Delay function&lt;/td&gt;
&lt;td&gt;&lt;code&gt;setTimeout(() =&amp;gt; console.log("Hi"), 1000)&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Debounce&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;setInterval()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Repeated function&lt;/td&gt;
&lt;td&gt;&lt;code&gt;setInterval(fn, 1000)&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Real-time clock&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;clearTimeout()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Cancel timeout&lt;/td&gt;
&lt;td&gt;&lt;code&gt;clearTimeout(timer)&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Stop debounce&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;JSON.stringify()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Object to JSON&lt;/td&gt;
&lt;td&gt;&lt;code&gt;JSON.stringify({a:1}) → '{"a":1}'&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;API send&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;JSON.parse()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;JSON to Object&lt;/td&gt;
&lt;td&gt;&lt;code&gt;JSON.parse('{"a":1}') → {a:1}&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;API receive&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  8.  ⚙️ Function Helpers
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Feature&lt;/th&gt;
&lt;th&gt;Description&lt;/th&gt;
&lt;th&gt;Example&lt;/th&gt;
&lt;th&gt;Use Case&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;()=&amp;gt;{}&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Arrow function&lt;/td&gt;
&lt;td&gt;&lt;code&gt;x =&amp;gt; x * 2&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Inline logic&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;function&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Standard function&lt;/td&gt;
&lt;td&gt;&lt;code&gt;function test(){}&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Reuse code&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;call()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Call with context&lt;/td&gt;
&lt;td&gt;&lt;code&gt;fn.call(obj)&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Manual bind&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;apply()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Call with array&lt;/td&gt;
&lt;td&gt;&lt;code&gt;fn.apply(obj, [args])&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Spread context&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;bind()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Permanently bind context&lt;/td&gt;
&lt;td&gt;&lt;code&gt;fn.bind(obj)&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;React events&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;arguments&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Access args&lt;/td&gt;
&lt;td&gt;&lt;code&gt;function fn(){ console.log(arguments) }&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Dynamic params&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;rest (...)&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Collect args&lt;/td&gt;
&lt;td&gt;&lt;code&gt;function fn(...args){}&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Variadic functions&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;spread (...)&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Expand array/object&lt;/td&gt;
&lt;td&gt;&lt;code&gt;[...a, ...b]&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Merge arrays&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  ✅ Wrapping Up
&lt;/h2&gt;

&lt;p&gt;JavaScript can feel like a jungle 🌴 when you're just starting out, but once you know the paths, it becomes an adventure. These methods and functions are like your survival toolkit 🧰 — use them wisely, and you'll be building amazing things in no time! Whether you're debugging code at 2 AM 😅 or crafting the next big app 💡, this cheatsheet’s got your back.&lt;/p&gt;

&lt;p&gt;Keep learning, keep experimenting, and most importantly — have fun with it! 🎉&lt;br&gt;
Happy coding! 💻🚀&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>beginners</category>
      <category>programming</category>
      <category>cheatsheet</category>
    </item>
    <item>
      <title>Integrating Facebook Login in NestJS with Limited Facebook Login for iOS And standard Facebook Login for Android</title>
      <dc:creator>Nikesh Dahal</dc:creator>
      <pubDate>Wed, 09 Apr 2025 10:26:59 +0000</pubDate>
      <link>https://dev.to/nikeshdahal/title-integrating-facebook-login-in-nestjs-with-limited-facebook-login-for-ios-1jac</link>
      <guid>https://dev.to/nikeshdahal/title-integrating-facebook-login-in-nestjs-with-limited-facebook-login-for-ios-1jac</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;In modern mobile applications, social logins like Facebook have become essential for smooth user onboarding and authentication. Facebook Login offers two primary methods for integration:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Limited Facebook Login (commonly used in specific cases like iOS).&lt;/li&gt;
&lt;li&gt;Standard Facebook Graph API Login&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This guide explains how to integrate Facebook login in a NestJS backend, including the logic for both standard and limited Facebook login. We’ll also clarify why Limited Facebook Login is particularly useful for iOS devices but generally not required for Android.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
## Prerequisites:
NestJS Setup: A NestJS backend configured with basic authentication and JWT-based tokens.

Facebook Developer Account: A Facebook App set up in the Facebook Developer Console.

Facebook SDK/Graph API Access: Proper access to Facebook's Graph API or JWT-based access tokens.

## Directory Structure

Here’s a suggested directory structure to reflect the implementation of Facebook Login, including a fallback to Limited Facebook Login. It covers services, resolvers, utilities, and related GraphQL components.


src/
│
├── auth/
│   ├── dto/
│   │   ├── input/
│   │   │   └── login.facebook.input.ts
│   ├── service/
│   │   ├── user.name.service.ts
│   │   └── facebook.login.service.ts   &amp;lt;-- Contains Facebook login logic (Standard + Limited login)
│   └── facebook-jwt.utils.ts            &amp;lt;-- Utility function for verifying Facebook JWT
│
├── http-client/
│   └── service/
│       └── http.client.service.ts       &amp;lt;-- Service to interact with external APIs like Facebook Graph API
│
├── stat/
│   └── stat.service.ts                 &amp;lt;-- Service to handle statistics (like user creation)
│
├── token/
│   └── token.service.ts                &amp;lt;-- Service to handle JWT token generation
│
├── repository/
│   └── user.repository.ts              &amp;lt;-- Repository for user data (find, create, update user data)
│
├── entities/
│   └── user.entity.ts                  &amp;lt;-- User schema/entity
│
├── constants/
│   └── language.ts                    &amp;lt;-- Language constants (e.g., `Lang.CREATE_USER`)
│
├── config/
│   ├── facebook.config.ts              &amp;lt;-- Facebook related configurations (optional)
│
├── logger/
│   └── logger.ts                       &amp;lt;-- Custom logging functionality (optional)
│
└── app.module.ts                       &amp;lt;-- Main module where all services and controllers are integrated

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;ok excited ? , now lets dive deep but here in this facebook login is only the primary focused so i am assuming you already have your setup&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Step 1: Install Dependencies&lt;/strong&gt;&lt;br&gt;
You’ll need to install a few dependencies for handling HTTP requests, JWT tokens, and Facebook OAuth interactions.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm install @nestjs/axios axios jsonwebtoken jwks-rsa @nestjs/common

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Step 2: Create Required Modules and Services&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Assuming your auth module already contains the necessary DTOs and endpoints, let’s focus on creating the Facebook login logic.&lt;/p&gt;

&lt;p&gt;Create auth/facebook.login.service.ts&lt;/p&gt;

&lt;p&gt;I have included the NestJS Logger here solely for logging errors or key steps. I believe it's better to use the NestJS Logger instead of console.log(). Additionally, this service includes my UserNameService and TokenService, which are specific to my use case and may differ in your scenario. So, please focus only on the workings and functionalities of the Facebook login.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;This service will handle both Standard and Limited Facebook login methods.&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import { Injectable, InternalServerErrorException, UnauthorizedException } from '@nestjs/common';
import { FacebookLoginInput } from '@auth/dto/input/login.facebook.input';
import { HttpClientService } from '@http-client/service/http.client.service';
import { TokenService } from '@token/token.service';
import { UserRepository } from '@repository/user.repository';
import { UserNameService } from '@auth/service/user.name.service';
import { verifyFacebookJwt } from '@auth/facebook-jwt.utils';
import { Logger } from '@nestjs/common';

@Injectable()
export class FacebookLoginService {
  private readonly logger = new Logger(FacebookLoginService.name);

  constructor(
    private readonly httpClientService: HttpClientService,
    private readonly tokenService: TokenService,
    private readonly userNameService: UserNameService,
    private readonly userRepository: UserRepository,
  ) {}

  async loginWithFacebook({ accessToken }: FacebookLoginInput) {
    try {
      let facebookDetails: any;

      // Try standard Facebook Graph API login first
      try {
        facebookDetails = await this.httpClientService.getFacebookDetails(accessToken);
      } catch (standardLoginError) {
        this.logger.warn('Standard Facebook login failed. Attempting limited login.', {
          error: standardLoginError?.message || standardLoginError,
        });

        // Fallback to limited login (JWT-based)
        try {
          facebookDetails = await verifyFacebookJwt(accessToken);
        } catch (limitedLoginError) {
          this.logger.error('Limited Facebook login also failed.', {
            error: limitedLoginError?.message || limitedLoginError,
          });
          throw new InternalServerErrorException('Could not retrieve Facebook user data');
        }
      }

      if (!facebookDetails?.sub &amp;amp;&amp;amp; !facebookDetails?.id) {
        throw new InternalServerErrorException('Could not retrieve Facebook user data');
      }

      // Process user data...
    } catch (error) {
      this.logger.error('Facebook login failed.', { error: error?.message || error });
      throw error instanceof UnauthorizedException ? error : new InternalServerErrorException('Facebook login failed');
    }
  }
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Step 3: Create facebook-jwt.utils.ts&lt;/strong&gt;&lt;br&gt;
This utility handles JWT verification for Limited Facebook login.&lt;/p&gt;

&lt;p&gt;here in this we will verify the token which will provide my mobile-user and  in the process of verification instead of doing just jwt.decode() follow this process to verify because we need to check key and issuer too .&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What jwt.decode() Does:&lt;/strong&gt;&lt;br&gt;
The jwt.decode() function only decodes the token payload without:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Verifying the token’s signature&lt;/li&gt;
&lt;li&gt;Validating the token's authenticity&lt;/li&gt;
&lt;li&gt;Checking the issuer&lt;/li&gt;
&lt;li&gt;Checking expiration&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This means anyone can tamper with the token payload, and jwt.decode() will still return data without any validation. This is dangerous in authentication systems.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why We Should Use jwt.verify() Instead:&lt;/strong&gt;&lt;br&gt;
To ensure the integrity, authenticity, and trustworthiness of the Facebook-issued JWT, we must use jwt.verify() like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import * as jwt from 'jsonwebtoken';
import { UnauthorizedException } from '@nestjs/common';

export async function verifyFacebookJwt(token: string): Promise&amp;lt;any&amp;gt; {
  const jwksClient = jwksLocalClient({
    jwksUri: 'https://www.facebook.com/.well-known/oauth/openid/jwks',
  });

  return new Promise((resolve, reject) =&amp;gt; {
    jwt.verify(
      token,
      async (header, callback) =&amp;gt; {
        const key = await jwksClient.getSigningKey(header.kid);
        const signingKey = key.getPublicKey();
        callback(null, signingKey);
      },
      {
        algorithms: ['RS256'],
        issuer: ['https://facebook.com', 'https://graph.facebook.com'],
      },
      (err, decoded) =&amp;gt; {
        if (err) {
          reject(new UnauthorizedException('Invalid Facebook token.'));
        }
        resolve(decoded);
      },
    );
  });
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;the above is the main part so lets break it down with proper explanation&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Verifying the Signature (with JWKS)&lt;/strong&gt;&lt;br&gt;
Facebook signs JWTs using a public-private key pair. To verify the token, we:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Fetch Facebook’s public key from its JWKS endpoint:&lt;a href="https://www.facebook.com/.well-known/oauth/openid/jwks" rel="noopener noreferrer"&gt;https://www.facebook.com/.well-known/oauth/openid/jwks&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Use that key to validate the token’s signature.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If someone modifies the token payload, the signature won't match, and verification will fail.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Security benefit: Confirms the token is issued by Facebook and hasn’t been tampered with.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Validating the Issuer (issuer Claim)&lt;/strong&gt;&lt;br&gt;
The issuer claim tells us who issued the token. In this case, it should always be:&lt;br&gt;
&lt;code&gt;https://www.facebook.com&lt;br&gt;
&lt;/code&gt;&lt;br&gt;
When we use jwt.verify() with issuer: '&lt;a href="https://www.facebook.com" rel="noopener noreferrer"&gt;https://www.facebook.com&lt;/a&gt;', it ensures that:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The token really came from Facebook&lt;/li&gt;
&lt;li&gt;It hasn’t been faked or generated by a malicious third party&lt;/li&gt;
&lt;li&gt;If the token’s iss claim doesn’t match, it gets rejected.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Validating Expiration, Audience, and Algorithm&lt;/strong&gt;&lt;br&gt;
jwt.verify() also checks:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;If the token has expired (exp)&lt;/li&gt;
&lt;li&gt;The correct algorithm was used (RS256)&lt;/li&gt;
&lt;li&gt;Optional: whether the token is meant for your app (audience claim)&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;This full validation makes it safe to trust the token and use its payload to identify the user.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;Step :3  Create http.client.service.ts&lt;/strong&gt;&lt;br&gt;
This service calls Facebook's Graph API to retrieve user profile information. This is the standard method used in most Android and web-based applications.&lt;/p&gt;

&lt;p&gt;yes we can do this too and this is what we called as Standard Facebook Graph API Login&lt;br&gt;
it will work for android and web based application in this way .&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import { Injectable } from '@nestjs/common';
import { HttpService } from '@nestjs/axios';
import { lastValueFrom } from 'rxjs';
import { UnprocessableEntityException } from '@nestjs/common';

@Injectable()
export class HttpClientService {
  constructor(private readonly httpService: HttpService) {}

  async getFacebookDetails(accessToken: string) {
    try {
      const response: any = await lastValueFrom(
        this.httpService.get(
          `https://graph.facebook.com/me?fields=id,name,picture,email&amp;amp;access_token=${accessToken}`,
        ),
      );
      return response.data;
    } catch (error) {
      throw new UnprocessableEntityException(error.message);
    }
  }
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Response from successful login:
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3pgov3a9kwoyioh1x70e.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3pgov3a9kwoyioh1x70e.png" alt="Image description" width="800" height="519"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Use Limited Facebook Login on iOS?
&lt;/h2&gt;

&lt;p&gt;Apple enforces strict user privacy policies. iOS applications that use Facebook Login must comply with Apple’s App Store guidelines, which often restrict the use of certain Facebook SDK features.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Key Reasons&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Privacy Transparency:&lt;br&gt;
Apple requires apps to limit data collection unless absolutely necessary. Limited Facebook Login complies by restricting access to only essential user info.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;WebView Restrictions:&lt;br&gt;
iOS apps sometimes face issues with Facebook WebView-based login (used by standard login), which can fail or behave inconsistently.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Token Type Differences:&lt;br&gt;
On iOS, you typically receive an ID token (JWT), not just a long-lived access token, and need to verify it manually.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Facebook SDK for iOS: &lt;br&gt;
Facebook recommends using Limited Login for better compatibility with Apple’s login policies.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In contrast, Android does not enforce such strict limitations, making standard Facebook Graph API login more reliable for those devices.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;Facebook Login integration in a NestJS backend can be implemented using both Standard and Limited methods. While the Standard Graph API Login is widely used and suitable for Android and web platforms, the Limited Facebook Login is a reliable fallback—especially for iOS environments that enforce stricter privacy and SDK rules.&lt;/p&gt;

&lt;p&gt;By implementing both login types, your application becomes more resilient, cross-platform compatible, and user-friendly, ensuring seamless authentication across a variety of devices and platforms.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>nestjs</category>
      <category>backenddevelopment</category>
    </item>
  </channel>
</rss>
