<?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>Forem: Chandan Singh</title>
    <description>The latest articles on Forem by Chandan Singh (@init_chandan).</description>
    <link>https://forem.com/init_chandan</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%2F1147391%2Fc71f04e2-6a46-4305-bbd3-98e4c550c800.jpg</url>
      <title>Forem: Chandan Singh</title>
      <link>https://forem.com/init_chandan</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/init_chandan"/>
    <language>en</language>
    <item>
      <title>Automating AWS EC2 and RDS Instance Management with AWS Lambda</title>
      <dc:creator>Chandan Singh</dc:creator>
      <pubDate>Tue, 03 Sep 2024 06:15:41 +0000</pubDate>
      <link>https://forem.com/init_chandan/automating-aws-ec2-and-rds-instance-management-with-aws-lambda-3khm</link>
      <guid>https://forem.com/init_chandan/automating-aws-ec2-and-rds-instance-management-with-aws-lambda-3khm</guid>
      <description>&lt;p&gt;Managing AWS EC2 and RDS instances can be a repetitive task, especially when you need to start or stop instances based on specific conditions or schedules. Automating these tasks using AWS Lambda can save time and reduce the risk of human error. In this blog post, we'll explore a simple Node.js-based AWS Lambda function that starts or stops EC2 and RDS instances based on environment variables. Additionally, we'll discuss how to use Amazon EventBridge to schedule the Lambda function and how to add a Lambda layer for Node.js dependencies.&lt;br&gt;
You can find the complete code for this project on my &lt;a href="https://github.com/chandansingh01/aws-eventbridge-lambda.git" rel="noopener noreferrer"&gt;GitHub repository&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;
  
  
  Prerequisites
&lt;/h2&gt;

&lt;p&gt;Before diving into the code, ensure you have the following:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;AWS Account&lt;/strong&gt;: Access to an AWS account with permissions to manage EC2 and RDS instances.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Node.js&lt;/strong&gt;: Installed on your local machine.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;AWS SDK for JavaScript&lt;/strong&gt;: Included in your project dependencies.&lt;/li&gt;
&lt;/ol&gt;
&lt;h2&gt;
  
  
  Project Setup
&lt;/h2&gt;

&lt;p&gt;First, let's look at the &lt;code&gt;package.json&lt;/code&gt; file to understand the project dependencies and structure.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;name&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;aws-lambda&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;version&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;1.0.0&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;description&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;""&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;main&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;index.js&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;scripts&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="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;test&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;echo &lt;/span&gt;&lt;span class="se"&gt;\"&lt;/span&gt;&lt;span class="s2"&gt;Error: no test specified&lt;/span&gt;&lt;span class="se"&gt;\"&lt;/span&gt;&lt;span class="s2"&gt; &amp;amp;&amp;amp; exit 1&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="p"&gt;},&lt;/span&gt;
&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;author&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;""&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;license&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;ISC&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;dependencies&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="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;aws-sdk&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;^2.1678.0&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The key dependency here is the &lt;code&gt;aws-sdk&lt;/code&gt;, which allows us to interact with AWS services.&lt;/p&gt;

&lt;h2&gt;
  
  
  Lambda Function Code
&lt;/h2&gt;

&lt;p&gt;The main logic of our Lambda function is in the &lt;code&gt;index.js&lt;/code&gt; file. This file initializes AWS clients, retrieves environment variables, and defines the Lambda handler function along with helper functions to start and stop instances.&lt;/p&gt;

&lt;h3&gt;
  
  
  Importing AWS SDK and Initializing Clients
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt;&lt;span class="err"&gt; &lt;/span&gt;&lt;span class="nx"&gt;AWS&lt;/span&gt;&lt;span class="err"&gt; &lt;/span&gt;&lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;aws-sdk&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;// Initialize AWS clients&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;ec2&lt;/span&gt;&lt;span class="err"&gt; &lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt;&lt;span class="err"&gt; &lt;/span&gt;&lt;span class="nx"&gt;AWS&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;EC2&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;rds&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;AWS&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;RDS&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We import the AWS SDK and initialize the EC2 and RDS clients.&lt;/p&gt;

&lt;h3&gt;
  
  
  Retrieving Environment Variables
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Get environment variables&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;EC2_INSTANCE_IDS&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;EC2_INSTANCE_ID&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;RDS_INSTANCE_IDS&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;RDS_INSTANCE_ID&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;ACTION&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;ACTION&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;stop&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;toLowerCase&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We retrieve the instance IDs and the action (start or stop) from environment variables. The action defaults to 'stop' if not specified.&lt;/p&gt;

&lt;h3&gt;
  
  
  Lambda Handler Function
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;handler&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;event&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="k"&gt;try&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;ACTION&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;start&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;await&lt;/span&gt; &lt;span class="nf"&gt;startInstances&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="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;ACTION&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;stop&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;await&lt;/span&gt; &lt;span class="nf"&gt;stopInstances&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="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
                &lt;span class="na"&gt;statusCode&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;400&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
                &lt;span class="na"&gt;body&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;`Invalid ACTION specified: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;ACTION&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;. Use "start" or "stop".`&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="p"&gt;{&lt;/span&gt;
            &lt;span class="na"&gt;statusCode&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;200&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="na"&gt;body&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;`Successfully executed &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;ACTION&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt; action on specified instances.`&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="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="na"&gt;statusCode&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;500&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="na"&gt;body&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;`Error executing &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;ACTION&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt; action: &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="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The &lt;code&gt;handler&lt;/code&gt; function is the entry point for the Lambda function. It checks the action and calls the appropriate helper function (&lt;code&gt;startInstances&lt;/code&gt; or &lt;code&gt;stopInstances&lt;/code&gt;). If the action is invalid, it returns a 400 status code with an error message. In case of any errors during execution, it returns a 500 status code with the error message.&lt;/p&gt;

&lt;h3&gt;
  
  
  Helper Functions
&lt;/h3&gt;

&lt;p&gt;The &lt;code&gt;startInstances&lt;/code&gt; and &lt;code&gt;stopInstances&lt;/code&gt; functions handle the logic for starting and stopping the EC2 and RDS instances, respectively.&lt;/p&gt;

&lt;h3&gt;
  
  
  Starting Instances
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;startInstances&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;async &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="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;ec2&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;startInstances&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;InstanceIds&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;EC2_INSTANCE_IDS&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="p"&gt;}).&lt;/span&gt;&lt;span class="nf"&gt;promise&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="s2"&gt;`Started EC2 instances: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;EC2_INSTANCE_IDS&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

        &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;rds&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;startDBInstance&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;DBInstanceIdentifier&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;dbInstanceId&lt;/span&gt; &lt;span class="p"&gt;}).&lt;/span&gt;&lt;span class="nf"&gt;promise&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="s2"&gt;`Started RDS instance: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;dbInstanceId&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&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;p&gt;The &lt;code&gt;startInstances&lt;/code&gt; function starts the specified EC2 and RDS instances and logs the actions.&lt;/p&gt;

&lt;h3&gt;
  
  
  Stopping Instances
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;stopInstances&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;async &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="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;ec2&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;stopInstances&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;InstanceIds&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;EC2_INSTANCE_IDS&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="p"&gt;}).&lt;/span&gt;&lt;span class="nf"&gt;promise&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="s2"&gt;`Stopped EC2 instances: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;EC2_INSTANCE_IDS&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

        &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;rds&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;stopDBInstance&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;DBInstanceIdentifier&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;RDS_INSTANCE_IDS&lt;/span&gt; &lt;span class="p"&gt;}).&lt;/span&gt;&lt;span class="nf"&gt;promise&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="s2"&gt;`Stopped RDS instance: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;RDS_INSTANCE_IDS&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&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;p&gt;The &lt;code&gt;stopInstances&lt;/code&gt; function stops the specified EC2 and RDS instances and logs the actions.&lt;/p&gt;

&lt;h2&gt;
  
  
  Scheduling the Lambda Function with Amazon EventBridge
&lt;/h2&gt;

&lt;p&gt;To automate the execution of the Lambda function, we can use Amazon EventBridge to create a scheduled rule that triggers the Lambda function at specified intervals.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Create a Rule&lt;/strong&gt;: Go to the Amazon EventBridge console and create a new rule.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Define Schedule&lt;/strong&gt;: Set the schedule expression (e.g., cron or rate expression) to specify when the Lambda function should be triggered.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Add Target&lt;/strong&gt;: Add the Lambda function as the target for the rule.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Adding a Lambda Layer for Node.js Dependencies
&lt;/h2&gt;

&lt;p&gt;To reduce the size of your Lambda deployment package and manage dependencies more efficiently, you can use a Lambda layer. Here's how to create and use a Lambda layer for Node.js dependencies:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Create a Layer&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;Create a directory for the layer and install the dependencies:&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;mkdir nodejs
cd nodejs
npm install aws-sdk
cd ..
zip -r layer.zip nodejs

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

&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Upload the &lt;code&gt;layer.zip&lt;/code&gt; file to the AWS Lambda console to create a new layer.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Attach the Layer&lt;/strong&gt;:

&lt;ul&gt;
&lt;li&gt;Go to your Lambda function configuration and add the created layer.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Deploying the Lambda Function
&lt;/h2&gt;

&lt;p&gt;To deploy this Lambda function, follow these steps:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Zip the Project&lt;/strong&gt;: Create a zip file of your project directory.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Upload to AWS Lambda&lt;/strong&gt;: Go to the AWS Lambda console, create a new function, and upload the zip file.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Set Environment Variables&lt;/strong&gt;: Configure the environment variables (&lt;code&gt;EC2_INSTANCE_ID&lt;/code&gt;, &lt;code&gt;RDS_INSTANCE_ID&lt;/code&gt;, and &lt;code&gt;ACTION&lt;/code&gt;) in the Lambda function settings.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Attach the Layer&lt;/strong&gt;: Attach the previously created Lambda layer to your function.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Test the Function&lt;/strong&gt;: Use the AWS Lambda console to test the function with different actions (start and stop).&lt;/li&gt;
&lt;/ol&gt;

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

&lt;p&gt;By automating the management of EC2 and RDS instances using AWS Lambda and Amazon EventBridge, you can streamline your operations and ensure that your instances are only running when needed. This not only saves costs but also reduces the manual effort involved in managing these resources. The provided code serves as a basic template that you can extend and customize based on your specific requirements. Additionally, using Lambda layers helps manage dependencies more efficiently and keeps your deployment package size small.&lt;/p&gt;

</description>
      <category>lambda</category>
      <category>aws</category>
      <category>ec2</category>
      <category>rds</category>
    </item>
    <item>
      <title>Memory Management: The Magical Realm's Storage Vault</title>
      <dc:creator>Chandan Singh</dc:creator>
      <pubDate>Mon, 11 Dec 2023 17:36:34 +0000</pubDate>
      <link>https://forem.com/init_chandan/memory-management-the-magical-realms-storage-vault-3486</link>
      <guid>https://forem.com/init_chandan/memory-management-the-magical-realms-storage-vault-3486</guid>
      <description>&lt;p&gt;Greetings, aspiring code sorcerers! 🧙‍♂️ In our previous explorations, we've unearthed many powerful artifacts and incantations from the vast world of JavaScript. Today, we set our sights on an often overlooked yet crucial domain: Memory Management. Think of it as understanding the inner workings of the storage vault in our magical realm.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Introduction: The Enchanted Vault&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Memory management is much like overseeing a grand enchanted vault. This vault contains shelves and chambers where magical objects (data) are stored. But, space is finite. Efficiently organizing and occasionally cleaning this vault ensures the kingdom (your application) runs smoothly.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Automatic Garbage Collection: The Vault's Sprites&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;The JavaScript realm is blessed with diligent sprites known as garbage collectors. They automatically detect unused or redundant magical items and safely dispose of them, ensuring there's always room for more.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="nx"&gt;javascriptCopy&lt;/span&gt; &lt;span class="nx"&gt;code&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;potion&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Healing&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;
&lt;span class="nx"&gt;potion&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;  &lt;span class="c1"&gt;// Now, the potion object can be picked up by the garbage collector&lt;/span&gt;

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

&lt;/div&gt;



&lt;h2&gt;
  
  
  &lt;strong&gt;Reference Counting: Sprites' Tally Marks&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;One method our sprites use is "reference counting". When an item is referenced, a mark is added. When the reference is removed, a mark is taken away. Items with no marks are considered trash.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Cycle References: Beware the Looping Enchantment!&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;While sprites are efficient, they sometimes get trapped in looping enchantments. For instance, two magical items referencing each other but not used elsewhere might be overlooked, causing clutter.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="nx"&gt;javascriptCopy&lt;/span&gt; &lt;span class="nx"&gt;code&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;createCycle&lt;/span&gt;&lt;span class="p"&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;obj1&lt;/span&gt; &lt;span class="o"&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;obj2&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{};&lt;/span&gt;

  &lt;span class="nx"&gt;obj1&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;ref&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;obj2&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nx"&gt;obj2&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;ref&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;obj1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Cycle created!&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="nf"&gt;createCycle&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

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

&lt;/div&gt;



&lt;h2&gt;
  
  
  &lt;strong&gt;Modern Garbage Collection: Mark-and-Sweep&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Modern JavaScript engines employ a strategy called mark-and-sweep. Sprites mark active items and then sweep away the inactive ones. This ensures no looping enchantments trick our diligent sprites.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Tips for Efficient Storage:&lt;/strong&gt;
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Nullify after Use&lt;/strong&gt;: Once you're done with an object, set its reference to &lt;strong&gt;&lt;code&gt;null&lt;/code&gt;&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Scope Wisely&lt;/strong&gt;: Use variables in the narrowest scope possible, allowing them to be garbage collected once they're out of scope.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Avoid Global Variables&lt;/strong&gt;: Unless absolutely necessary, avoid storing objects as global variables.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Diving Deeper&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;For those wishing to delve deeper into the catacombs of memory management, the &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management"&gt;MDN Documentation on Memory Management&lt;/a&gt; serves as an invaluable map.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Sorcerer’s Assignments: Test Your Magic&lt;/strong&gt;
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Create two objects referencing each other and then nullify their references. Can they be garbage collected?&lt;/li&gt;
&lt;li&gt;Implement a function showcasing a local variable's memory being freed after its execution.&lt;/li&gt;
&lt;li&gt;Study an open-source JavaScript project. Can you spot any potential memory leaks or areas for optimization?&lt;/li&gt;
&lt;/ol&gt;

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

&lt;p&gt;Just as a well-maintained vault ensures the prosperity of the magical realm, efficient memory management ensures the optimal performance of your applications. Remember, the most powerful sorcerers aren't just those who wield potent spells but those who understand their inner workings.&lt;/p&gt;

&lt;p&gt;Until next time, may your memory be ever optimized and your code ever magical! 🌟🔮&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>programming</category>
      <category>typescript</category>
    </item>
    <item>
      <title>Web APIs: The Magical Portals in JavaScript's Enchanted Realm</title>
      <dc:creator>Chandan Singh</dc:creator>
      <pubDate>Sun, 05 Nov 2023 11:15:30 +0000</pubDate>
      <link>https://forem.com/init_chandan/web-apis-the-magical-portals-in-javascripts-enchanted-realm-45om</link>
      <guid>https://forem.com/init_chandan/web-apis-the-magical-portals-in-javascripts-enchanted-realm-45om</guid>
      <description>&lt;p&gt;Greetings, aspiring sorcerers of the code domain! 🌌✨ As we journey deeper into the mystical land of JavaScript, we find ourselves at the doors of ancient portals known as Web APIs. They allow our spells to interact with realms beyond the immediate world of JavaScript. Ready your wands, for today we unlock these doorways!&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Introduction: What are these Magical Portals?&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Web APIs (Application Programming Interfaces) serve as gateways. While JavaScript lays the foundation for our enchantments, Web APIs provide access to browser-specific spells, like interacting with the Document, fetching distant scrolls, and even conjuring animations.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Document Object Model (DOM): The Living Parchment&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;The DOM is a living, breathing representation of your webpage. Think of it as an enchanted scroll that reshapes and transforms as you cast spells upon it.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Manipulating Elements&lt;/strong&gt;: With incantations like &lt;strong&gt;&lt;code&gt;getElementById&lt;/code&gt;&lt;/strong&gt; or &lt;strong&gt;&lt;code&gt;querySelector&lt;/code&gt;&lt;/strong&gt;, you can select and alter parts of the scroll.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Responsive Spells&lt;/strong&gt;: React to events such as clicks or key presses with spells like &lt;strong&gt;&lt;code&gt;addEventListener&lt;/code&gt;&lt;/strong&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;XMLHttpRequest &amp;amp; Fetch: Seeking Ancient Tomes&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Sometimes a sorcerer needs knowledge from distant realms. These tools let you summon data from far-off servers.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Old Scrolls&lt;/strong&gt;: &lt;strong&gt;&lt;code&gt;XMLHttpRequest&lt;/code&gt;&lt;/strong&gt; was once the primary spell for this task.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Newer Enchantments&lt;/strong&gt;: The &lt;strong&gt;&lt;code&gt;Fetch API&lt;/code&gt;&lt;/strong&gt; provides a modern, promise-based way to retrieve distant tomes.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Timers: Time-Bending Potions&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;The sands of time are not beyond a wizard's control! With &lt;strong&gt;&lt;code&gt;setTimeout&lt;/code&gt;&lt;/strong&gt; and &lt;strong&gt;&lt;code&gt;setInterval&lt;/code&gt;&lt;/strong&gt;, you can delay spells or repeat them at fixed intervals.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Other Mystical Doorways&lt;/strong&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Geolocation API&lt;/strong&gt;: Discover the location of a wandering adventurer.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Web Storage&lt;/strong&gt;: Safely store potions and artifacts across sessions.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Canvas &amp;amp; WebGL&lt;/strong&gt;: Craft stunning visual enchantments and illusions.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Unveiling More Magic&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;While these are but a few doors in the vast castle of Web APIs, many more await the curious mage. The &lt;strong&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/API"&gt;MDN Web API Reference&lt;/a&gt;&lt;/strong&gt; serves as a guidebook to this grand repository of knowledge.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Sorcerer’s Assignments: Test Your Conjuring Prowess 🌟&lt;/strong&gt;
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Scroll Alterer&lt;/strong&gt;: Use the DOM to change the title of a webpage.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Distant Summons&lt;/strong&gt;: Employ the Fetch API to retrieve information from a public API.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Temporal Trick&lt;/strong&gt;: Create a countdown timer that alters the webpage when time runs out.&lt;/li&gt;
&lt;/ol&gt;

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

&lt;p&gt;Web APIs bridge the world of JavaScript and the vast capabilities of the browser, letting you craft richer, more interactive spells. By mastering these gateways, your journey as a web mage becomes even more thrilling and boundless.&lt;/p&gt;

&lt;p&gt;Forge ahead, intrepid sorcerer, and may your spells always find their mark! 🪄🌟&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>programming</category>
    </item>
    <item>
      <title>Undefined vs Null in JavaScript: Deciphering the Void Magic</title>
      <dc:creator>Chandan Singh</dc:creator>
      <pubDate>Sun, 29 Oct 2023 21:05:38 +0000</pubDate>
      <link>https://forem.com/init_chandan/undefined-vs-null-in-javascript-deciphering-the-void-magic-4hj</link>
      <guid>https://forem.com/init_chandan/undefined-vs-null-in-javascript-deciphering-the-void-magic-4hj</guid>
      <description>&lt;p&gt;Greetings, fellow seekers of JavaScript wisdom! Our journey through enchanted lands has brought us face-to-face with myriad mystical concepts. Today, we delve into two enigmatic elements of the JavaScript universe: &lt;strong&gt;&lt;code&gt;undefined&lt;/code&gt;&lt;/strong&gt; and &lt;strong&gt;&lt;code&gt;null&lt;/code&gt;&lt;/strong&gt;. Join me in unraveling the mysteries behind these arcane aspects!&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Introduction&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;In the vast realms of JavaScript, &lt;strong&gt;&lt;code&gt;undefined&lt;/code&gt;&lt;/strong&gt; and &lt;strong&gt;&lt;code&gt;null&lt;/code&gt;&lt;/strong&gt; are like two ancient forms of void magic. They both represent absence, yet they do so in subtly different ways, serving as distinct runes in a sorcerer’s spellbook.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;The Enigma of Undefined&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;&lt;code&gt;undefined&lt;/code&gt;&lt;/strong&gt; is like a shadowy wisp, an unformed entity. It is the default value of variables that have been declared but have not yet been assigned a value. It represents the unintentional absence of any value.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="nx"&gt;jsxCopy&lt;/span&gt; &lt;span class="nx"&gt;code&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;shadowWisp&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="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;shadowWisp&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// outputs: undefined&lt;/span&gt;

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

&lt;/div&gt;



&lt;h2&gt;
  
  
  &lt;strong&gt;The Null Void&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Contrary to &lt;strong&gt;&lt;code&gt;undefined&lt;/code&gt;&lt;/strong&gt;, &lt;strong&gt;&lt;code&gt;null&lt;/code&gt;&lt;/strong&gt; is an intentional absence of any object value. It is like a sealed void, a consciously created space of emptiness that sorcerers use when they need to represent nothing with a purpose.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="nx"&gt;jsxCopy&lt;/span&gt; &lt;span class="nx"&gt;code&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;sealedVoid&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;null&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="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;sealedVoid&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// outputs: null&lt;/span&gt;

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

&lt;/div&gt;



&lt;h2&gt;
  
  
  &lt;strong&gt;Distinguishing the Shadows&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;While both &lt;strong&gt;&lt;code&gt;undefined&lt;/code&gt;&lt;/strong&gt; and &lt;strong&gt;&lt;code&gt;null&lt;/code&gt;&lt;/strong&gt; signify absence, the key to distinguishing them lies in understanding their intent. &lt;strong&gt;&lt;code&gt;undefined&lt;/code&gt;&lt;/strong&gt; signifies that the JavaScript engine does not know what this entity is, while &lt;strong&gt;&lt;code&gt;null&lt;/code&gt;&lt;/strong&gt; signifies an intentional absence, a deliberate assignment of "nothing".&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Typeof Enchantments&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;When enchanting spells with &lt;strong&gt;&lt;code&gt;typeof&lt;/code&gt;&lt;/strong&gt;, the wizard may find the outcomes puzzling. For &lt;strong&gt;&lt;code&gt;undefined&lt;/code&gt;&lt;/strong&gt;, it’s straightforward, but for &lt;strong&gt;&lt;code&gt;null&lt;/code&gt;&lt;/strong&gt;, the incantation reveals an object!&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="nx"&gt;jsxCopy&lt;/span&gt; &lt;span class="nx"&gt;code&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;typeof&lt;/span&gt; &lt;span class="kc"&gt;undefined&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// outputs: 'undefined'&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;typeof&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// outputs: 'object'&lt;/span&gt;

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

&lt;/div&gt;



&lt;h2&gt;
  
  
  &lt;strong&gt;Further Mysteries&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;For those wishing to deepen their understanding of these mysterious elements, the &lt;strong&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"&gt;MDN Documentation on Null&lt;/a&gt;&lt;/strong&gt; and &lt;strong&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined"&gt;MDN Documentation on Undefined&lt;/a&gt;&lt;/strong&gt; serve as ancient tomes of knowledge.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Sorcerer’s Assignments: Decipher the Void&lt;/strong&gt;
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Experiment with Shadows&lt;/strong&gt;: Declare a variable but do not assign it a value. What do you see when you console log this variable?&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Seal the Void&lt;/strong&gt;: Create a variable and assign it the value &lt;strong&gt;&lt;code&gt;null&lt;/code&gt;&lt;/strong&gt;. Reflect on scenarios where such a void assignment could be useful.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Typeof Puzzles&lt;/strong&gt;: Experiment with &lt;strong&gt;&lt;code&gt;typeof&lt;/code&gt;&lt;/strong&gt; on both &lt;strong&gt;&lt;code&gt;undefined&lt;/code&gt;&lt;/strong&gt; and &lt;strong&gt;&lt;code&gt;null&lt;/code&gt;&lt;/strong&gt;. Contemplate the revelations.&lt;/li&gt;
&lt;/ol&gt;

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

&lt;p&gt;&lt;strong&gt;&lt;code&gt;undefined&lt;/code&gt;&lt;/strong&gt; and &lt;strong&gt;&lt;code&gt;null&lt;/code&gt;&lt;/strong&gt;, two facets of absence in the JavaScript world, are like ancient forms of void magic. Deciphering their subtleties empowers the JavaScript sorcerer to wield the magic of absence with purpose and intent. Until our next magical journey, may your code be ever bug-free and your spells potent!&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>typescript</category>
      <category>webdev</category>
      <category>react</category>
    </item>
    <item>
      <title>Modules in JavaScript: The Magic Spell Libraries</title>
      <dc:creator>Chandan Singh</dc:creator>
      <pubDate>Wed, 25 Oct 2023 19:14:56 +0000</pubDate>
      <link>https://forem.com/init_chandan/modules-in-javascript-the-magic-spell-libraries-8g0</link>
      <guid>https://forem.com/init_chandan/modules-in-javascript-the-magic-spell-libraries-8g0</guid>
      <description>&lt;p&gt;Welcome, brave learners, to another chapter in our enchanted journey through the realms of JavaScript! Today, we unravel the scrolls that contain the ancient lore of Modules — the magic spell libraries that every sorcerer of code should master. 🧙‍♂️📜&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;🏰 Kingdom of Isolation: What Are Modules?&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;In the vast kingdom of JavaScript, Modules are like isolated castles, each housing its unique set of spells (functions), artifacts (variables), and magical creatures (objects). These isolated realms allow sorcerers to maintain order in their code, avoiding conflicts and ensuring that magic is wielded with precision and control.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="c1"&gt;// spell.js&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;castSpell&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="nx"&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;Casting a spell!&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  &lt;strong&gt;🌉 Bridges Between Realms: Import &amp;amp; Export&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;To share the magic housed within these isolated castles, bridges are built using the &lt;strong&gt;&lt;code&gt;import&lt;/code&gt;&lt;/strong&gt; and &lt;strong&gt;&lt;code&gt;export&lt;/code&gt;&lt;/strong&gt; incantations. These allow the transfer of spells and artifacts between different modules, enabling sorcerers to harness the power of multiple spell libraries.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="c1"&gt;// apprentice.js&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;castSpell&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./spell.js&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nx"&gt;castSpell&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// Output: Casting a spell!&lt;/span&gt;

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

&lt;/div&gt;



&lt;h2&gt;
  
  
  &lt;strong&gt;🧙‍♂️ The Grand Grimoire: Package Managers&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;In the JavaScript realm, there exists a Grand Grimoire known as npm (Node Package Manager), where sorcerers from far and wide contribute their modules. This vast library allows you to incorporate a plethora of spells and artifacts into your magical projects.&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 &amp;lt;packageName&amp;gt;

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

&lt;/div&gt;



&lt;h2&gt;
  
  
  &lt;strong&gt;🌟 Foraging for Artifacts: Exploring Modules&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Delving into different modules is like foraging through ancient forests, discovering hidden artifacts and powerful spells. Modules help in organizing and structifying the code, which makes the debugging process akin to deciphering ancient runes – challenging but rewarding.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;📚 Further Exploration&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;For those seeking to deepen their understanding of Modules in JavaScript, the &lt;strong&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules"&gt;MDN Documentation on Modules&lt;/a&gt;&lt;/strong&gt; is an invaluable treasure trove of knowledge.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;🌟 Sorcerer’s Assignments: Test Your Magic&lt;/strong&gt;
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Create Your Spell Library:&lt;/strong&gt; Craft a module with a variety of functions representing different spells. Import them into a main file and cast them!&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Explore the Grand Grimoire:&lt;/strong&gt; Install a package from npm and utilize it in your magical project.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Module Interaction:&lt;/strong&gt; Create two modules that export functions. Import them into a third module and make them interact.&lt;/li&gt;
&lt;/ol&gt;

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

&lt;p&gt;Modules are the building blocks that structure our magical JavaScript kingdom. They bring order to chaos, house ancient spells, and forge connections between isolated realms. As you master the art of Modules, remember – with great power comes great responsibility. Use your newfound knowledge wisely, young sorcerers, and may your code be ever magical!&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>tutorial</category>
      <category>webdev</category>
      <category>react</category>
    </item>
    <item>
      <title>Closures in JavaScript: The Wizard's Secret Chest</title>
      <dc:creator>Chandan Singh</dc:creator>
      <pubDate>Wed, 18 Oct 2023 19:32:51 +0000</pubDate>
      <link>https://forem.com/init_chandan/closures-in-javascript-the-wizards-secret-chest-501j</link>
      <guid>https://forem.com/init_chandan/closures-in-javascript-the-wizards-secret-chest-501j</guid>
      <description>&lt;p&gt;In the magical realm of JavaScript, where functions and objects dance together to create the enchanted web applications we use daily, there lies a secret that many novice sorcerers may find mystifying: the concept of closures. Picture this – a wizard has a secret chest, and within this chest, he keeps his most precious belongings, protecting them from the outside world. This chest, my dear reader, can be likened to closures in the world of JavaScript.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;The Enchantment Begins: What is a Closure?&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;A closure is not just a function; it represents the combination of a function bundled together with references to its surrounding state or lexical environment. Think of it like our wizard's magical pouch: even as the wizard journeys through various realms, the pouch retains enchanted items (variables) from places the wizard has visited before.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Crafting Your First Closure&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Let's embark on a magical journey to craft our first closure:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;wizardSpell&lt;/span&gt;&lt;span class="p"&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;secretPotion&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Elixir of Eternity&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;revealPotion&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="nx"&gt;secretPotion&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="nx"&gt;revealPotion&lt;/span&gt;&lt;span class="p"&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;unveilTheSecret&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;wizardSpell&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="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;unveilTheSecret&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt; &lt;span class="c1"&gt;// "Elixir of Eternity"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In the code above, &lt;strong&gt;&lt;code&gt;revealPotion&lt;/code&gt;&lt;/strong&gt; is a closure. Even after &lt;strong&gt;&lt;code&gt;wizardSpell&lt;/code&gt;&lt;/strong&gt; has executed and returned, &lt;strong&gt;&lt;code&gt;revealPotion&lt;/code&gt;&lt;/strong&gt; still has access to &lt;strong&gt;&lt;code&gt;secretPotion&lt;/code&gt;&lt;/strong&gt;. When we invoke &lt;strong&gt;&lt;code&gt;unveilTheSecret()&lt;/code&gt;&lt;/strong&gt;, it reveals the secret potion, showcasing the magic of closures.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Why Are Closures Enchanting?&lt;/strong&gt;
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Private Variables&lt;/strong&gt;: Closures allow us to emulate private variables, which aren't natively supported in JavaScript. The &lt;strong&gt;&lt;code&gt;secretPotion&lt;/code&gt;&lt;/strong&gt; in our example acts as a private variable.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Dynamic Function Generation&lt;/strong&gt;: They can be used to create functions on the fly during execution.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Maintaining State&lt;/strong&gt;: Often used in JavaScript libraries to maintain state without exposing the internals.&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Beware the Dark Arts: Pitfalls of Closures&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;While closures are a potent tool in our arsenal, they must be wielded with care:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Memory Overuse&lt;/strong&gt;: If not managed correctly, closures can lead to overconsumption of memory as they retain access to the outer function’s variables, which can prevent them from being garbage collected.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Overhead&lt;/strong&gt;: Overusing closures can sometimes lead to increased complexity in code.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Conclusion: The Power Within&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Like the wizard's chest guarding its secrets, closures in JavaScript protect and provide access to an outer function’s scope. As budding JavaScript sorcerers, understanding closures and their power can truly elevate your magical coding prowess.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Further Reading&lt;/strong&gt;: For those eager to dive deeper into the mystical world of closures, the &lt;strong&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures"&gt;MDN documentation on Closures&lt;/a&gt;&lt;/strong&gt; is an excellent tome to explore. 📖🔮&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Sorcerer’s Assignments: Test Your Magic&lt;/strong&gt; &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Secret Conversations:&lt;/strong&gt; Craft a function that takes a name as its argument and returns another function. When you invoke the inner function with a message, it should console log the name and the message together, like a whisper between two wizards.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;whisperTo&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;secretMessenger&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Merlin&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;whisperTo&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;The dragon awakens!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;  &lt;span class="c1"&gt;// Output: "Merlin hears: The dragon awakens!"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;The Enchanted Counter:&lt;/strong&gt; Create a function that keeps track of the number of times it's been called using closures. Every time you invoke the function, it should return the incremented count.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;magicCounter&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;enchantedCounter&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="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;magicCounter&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;  &lt;span class="c1"&gt;// Output: 1&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;magicCounter&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;  &lt;span class="c1"&gt;// Output: 2&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
      <category>javascript</category>
      <category>typescript</category>
      <category>webdev</category>
      <category>beginners</category>
    </item>
    <item>
      <title>JavaScript's Prototype Chain: The Ancestral Magic Lineage</title>
      <dc:creator>Chandan Singh</dc:creator>
      <pubDate>Sun, 15 Oct 2023 17:39:03 +0000</pubDate>
      <link>https://forem.com/init_chandan/javascripts-prototype-chain-the-ancestral-magic-lineage-3kpp</link>
      <guid>https://forem.com/init_chandan/javascripts-prototype-chain-the-ancestral-magic-lineage-3kpp</guid>
      <description>&lt;p&gt;In the magical realms, bloodlines carry power. Ancestral wizards and witches passed on their spells and abilities to their descendants, ensuring that the future generations were fortified with the knowledge and strength of their predecessors. Just like this legacy of magical heritage, JavaScript has its own lineage system - the Prototype Chain.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;1. An Ancient Spellbook: The Object Prototype&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;At the root of JavaScript's magical hierarchy lies the grandest of spellbooks: &lt;strong&gt;&lt;code&gt;Object.prototype&lt;/code&gt;&lt;/strong&gt;. Almost all objects in JavaScript inherit methods and properties from this ancient tome, similar to how young wizards inherit their primary magical traits from their ancestors.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;wizard&lt;/span&gt; &lt;span class="o"&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="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;wizard&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;hasOwnProperty&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;wand&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;  &lt;span class="c1"&gt;// false, but wizard can access this method due to the prototype chain!&lt;/span&gt;

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

&lt;/div&gt;



&lt;h3&gt;
  
  
  &lt;strong&gt;2. Enchantments and Conjurations: Creating Your Own Prototypes&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;A novice enchanter can draw from the knowledge of the ancients while adding their own unique spells.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;Wizard&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nx"&gt;Wizard&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;prototype&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;conjure&lt;/span&gt; &lt;span class="o"&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;spell&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="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt; conjures &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;spell&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;!`&lt;/span&gt;&lt;span class="p"&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;merlin&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;Wizard&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Merlin&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;merlin&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;conjure&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Alohomora&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;  &lt;span class="c1"&gt;// Outputs: Merlin conjures Alohomora!&lt;/span&gt;

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

&lt;/div&gt;



&lt;h3&gt;
  
  
  &lt;strong&gt;3. The Ties That Bind: Checking the Prototype&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Like tracing back a family tree in the world of magic, in JavaScript, you can inspect an object's prototype and discover its lineage.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nb"&gt;Object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getPrototypeOf&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;merlin&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="nx"&gt;Wizard&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;prototype&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// true&lt;/span&gt;

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

&lt;/div&gt;



&lt;h3&gt;
  
  
  &lt;strong&gt;4. Overriding Ancient Spells: Shadowing Properties&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Sometimes, an upcoming wizard might tweak an ancestral spell for more potency. This is analogous to property shadowing in JavaScript.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;
&lt;span class="nx"&gt;Wizard&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;prototype&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;wand&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Basic Oak Wand&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;harry&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;Wizard&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Harry&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;harry&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;wand&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Holly with Phoenix Feather&lt;/span&gt;&lt;span class="dl"&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="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;harry&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;wand&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;  &lt;span class="c1"&gt;// Outputs: Holly with Phoenix Feather&lt;/span&gt;

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

&lt;/div&gt;



&lt;h3&gt;
  
  
  &lt;strong&gt;5. The End of the Lineage: &lt;code&gt;null&lt;/code&gt; as the Ultimate Ancestor&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Behind every powerful spellbook is the ultimate ancestor, &lt;strong&gt;&lt;code&gt;null&lt;/code&gt;&lt;/strong&gt;. In JavaScript, it represents the end of the prototype chain.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nb"&gt;Object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getPrototypeOf&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nb"&gt;Object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;prototype&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt; &lt;span class="c1"&gt;// Outputs: null&lt;/span&gt;

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

&lt;/div&gt;



&lt;h3&gt;
  
  
  &lt;strong&gt;Conclusion: The Dance of Inheritance&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;In the realms of both magic and JavaScript, knowledge flows through lineage. The Prototype Chain in JavaScript ensures that objects can inherit and share properties and methods, enabling efficient and powerful code structures. Just like a wizard, who, with a rich ancestry of magic, stands tall in the face of challenges, a JavaScript object with a strong prototype chain is robust and versatile.&lt;/p&gt;

&lt;p&gt;For a deeper exploration of JavaScript's Prototype Chain and the magical lineage it unfolds, the &lt;strong&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain"&gt;MDN Documentation on Inheritance and the Prototype Chain&lt;/a&gt;&lt;/strong&gt; serves as an enchanting tome of wisdom. 📖🔮&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Sorcerer’s Assignments: Dive Deeper into the Ancestral Magic&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Create a new prototype chain of magical creatures, starting from a 'MagicalBeing' to 'Elf', and then 'DarkElf'. Add unique abilities to each prototype and test the inheritance.&lt;/li&gt;
&lt;li&gt;Find a method or property in the native JavaScript objects that you use often and trace back its prototype lineage.&lt;/li&gt;
&lt;li&gt;Try shadowing some native methods (like &lt;strong&gt;&lt;code&gt;toString&lt;/code&gt;&lt;/strong&gt;) on a custom object and observe the behaviour.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Harness the ancient powers of the Prototype Chain and elevate your spells (code) to legendary magnitudes! Happy coding and conjuring!🪄📜✨&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>typescript</category>
      <category>webdev</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Error Handling in JavaScript: The Magical Shields and Barriers</title>
      <dc:creator>Chandan Singh</dc:creator>
      <pubDate>Sun, 08 Oct 2023 21:02:23 +0000</pubDate>
      <link>https://forem.com/init_chandan/error-handling-in-js-the-magical-shields-and-barriers-ee8</link>
      <guid>https://forem.com/init_chandan/error-handling-in-js-the-magical-shields-and-barriers-ee8</guid>
      <description>&lt;p&gt;In the magical realm of JavaScript, spells are cast, enchantments are woven, and code runs to build wondrous applications. However, as every magician knows, not every spell goes as planned. In the world of code, errors are the misfired spells that can wreak havoc if not guarded against. But fear not, for JavaScript provides us with potent shields and barriers to handle these mischiefs.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;🛡️ The Basic Shield: &lt;code&gt;try...catch&lt;/code&gt;&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Imagine casting a spell that's new to you. There's uncertainty, right? The &lt;strong&gt;&lt;code&gt;try...catch&lt;/code&gt;&lt;/strong&gt; statement works as your basic shield, allowing you to "try" a spell (code) and if it misfires (throws an error), you "catch" it before any harm is done.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="nx"&gt;javascriptCopy&lt;/span&gt; &lt;span class="nx"&gt;code&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;let&lt;/span&gt; &lt;span class="nx"&gt;spell&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;castMagicSpell&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="nx"&gt;warn&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Oops! The spell went wrong:&lt;/span&gt;&lt;span class="dl"&gt;"&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="nx"&gt;message&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;Here, if &lt;strong&gt;&lt;code&gt;castMagicSpell()&lt;/code&gt;&lt;/strong&gt; causes an error, the code within &lt;strong&gt;&lt;code&gt;catch&lt;/code&gt;&lt;/strong&gt; will execute, informing the magician of the mishap.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;🌌 The Protective Barrier: &lt;code&gt;finally&lt;/code&gt;&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Regardless of whether a spell was successful or misfired, sometimes you want to ensure that a protective barrier is set up afterward. The &lt;strong&gt;&lt;code&gt;finally&lt;/code&gt;&lt;/strong&gt; block acts like this barrier. It always runs after &lt;strong&gt;&lt;code&gt;try...catch&lt;/code&gt;&lt;/strong&gt;, safeguarding any post-spell activities.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="nx"&gt;javascriptCopy&lt;/span&gt; &lt;span class="nx"&gt;code&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;let&lt;/span&gt; &lt;span class="nx"&gt;potion&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;brewPotion&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="nx"&gt;warn&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Potion brewing failed:&lt;/span&gt;&lt;span class="dl"&gt;"&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="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;finally&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;cleanCauldron&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;Whether the potion is brewed successfully or fails, &lt;strong&gt;&lt;code&gt;cleanCauldron()&lt;/code&gt;&lt;/strong&gt; ensures that your magical workspace is tidy.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;🪄 Custom Magical Barriers: &lt;code&gt;throw&lt;/code&gt;&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;At times, a magician may detect something amiss and proactively cause a disruption to prevent a larger catastrophe. In JavaScript, the &lt;strong&gt;&lt;code&gt;throw&lt;/code&gt;&lt;/strong&gt; statement allows us to raise (or "throw") our custom errors. This way, we can set conditions for potential problems we foresee.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="nx"&gt;javascriptCopy&lt;/span&gt; &lt;span class="nx"&gt;code&lt;/span&gt;
&lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;magicWand&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;throw&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nb"&gt;Error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Magic wand not found!&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  &lt;strong&gt;Enchantments for Asynchronous Magic: &lt;code&gt;async/await&lt;/code&gt;&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;In the modern realm of JavaScript, asynchronous spells (like fetching data from afar) are common. With &lt;strong&gt;&lt;code&gt;async/await&lt;/code&gt;&lt;/strong&gt;, error handling gets an upgrade!&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="nx"&gt;javascriptCopy&lt;/span&gt; &lt;span class="nx"&gt;code&lt;/span&gt;
&lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;fetchSpellBook&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;let&lt;/span&gt; &lt;span class="nx"&gt;book&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;fetchMagicLibrary&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="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;book&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="nx"&gt;warn&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Failed to fetch the spell book:&lt;/span&gt;&lt;span class="dl"&gt;"&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="nx"&gt;message&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;p&gt;&lt;strong&gt;Sorcerer’s Assignments: Test Your Magic&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Can you create a custom error class that triggers when a specific potion ingredient is missing? Share your solutions and let's see who crafts the most protective shield!&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Conclusion&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Just as no magician is perfect, no code runs without errors all the time. But with these magical shields and barriers of JavaScript at our disposal, we can ensure that our applications run smoothly, and our users experience the wonder, not the blunders. Embrace the art of error handling and fortify your magical creations!&lt;/p&gt;

&lt;p&gt;For a deeper dive into the intricacies of error handling in JavaScript, the &lt;strong&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling"&gt;MDN Documentation on Error Handling&lt;/a&gt;&lt;/strong&gt; serves as an excellent grimoire. 📖🔮&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Wield the power of error handling, and may your code always find its way!&lt;/em&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>typescript</category>
      <category>react</category>
      <category>webdev</category>
    </item>
    <item>
      <title>JavaScript Event Loop: The Wizard's Time-Turner</title>
      <dc:creator>Chandan Singh</dc:creator>
      <pubDate>Wed, 04 Oct 2023 18:30:27 +0000</pubDate>
      <link>https://forem.com/init_chandan/javascript-event-loop-the-wizards-time-turner-525k</link>
      <guid>https://forem.com/init_chandan/javascript-event-loop-the-wizards-time-turner-525k</guid>
      <description>&lt;p&gt;In the enchanted world of JavaScript, wizards and sorcerers cast spells (write code) that bring websites and applications to life. But did you ever wonder how these magical incantations run? How does our wise old sorcerer, JavaScript, manage to keep track of so many spells at once? Enter the mystique of the Event Loop - akin to a wizard's time-turner.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Introduction: A Sorcerer's Dilemma&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In our magical realm, wizards can only cast one spell at a time. Similarly, JavaScript is a single-threaded language, which means it can execute only one thing at a time. But in a world filled with asynchronous events like fetching potions (data), listening for dragon roars (click events), or waiting for cauldrons to boil (set timeouts), how does a sorcerer manage?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Magical Clockwork: Call Stack, Web APIs, and Message Queue&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Call Stack (The Spell Book)&lt;/strong&gt;: When a wizard begins a spell, it's placed in a spell book (or a call stack). It's a magical list where spells are read from top to bottom, one at a time.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Web APIs (The Magical Creatures)&lt;/strong&gt;: Some spells, like summoning rain or taming dragons (akin to setTimeouts or AJAX calls), take time. Wizards delegate these to magical creatures (Web APIs) who promise to return once the task is done.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Message Queue (The Owl Post)&lt;/strong&gt;: Once the magical creatures finish their tasks, they send an owl (callback) with a message to notify the wizard. These messages line up, awaiting the wizard's attention.&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;&lt;strong&gt;The Time-Turner in Action: The Event Loop&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Picture this: A diligent elf named EvLoop constantly oversees the wizard's spell book (Call Stack) and the owl post (Message Queue). If the spell book is empty, meaning no immediate spell is being cast, and there's a pending owl message, EvLoop promptly delivers the message to the top of the spell book.&lt;/p&gt;

&lt;p&gt;This cycle continues, ensuring the wizard is always kept busy, either casting spells or addressing the owls' messages, in a non-stop, rhythmic dance.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Why This Magic Matters&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Understanding the Event Loop is crucial for every sorcerer aspiring to master JavaScript. It ensures that even with a single wand (thread), a wizard can seem to be everywhere, doing multiple things, making the magic seem seamless.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Conclusion: The Dance of JavaScript&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Much like a dance, the rhythm between the Call Stack, Web APIs, Message Queue, and our diligent elf, EvLoop, creates the illusion of multitasking in the magical world of JavaScript. By harnessing the power of the Event Loop, wizards can conjure spells that create wondrous, responsive, and efficient enchantments (web applications).&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;For The Avid Reader&lt;/strong&gt;: Dive deeper into this dance by examining &lt;strong&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop"&gt;MDN's detailed tome on the Event Loop&lt;/a&gt;&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Sorcerer’s Assignments: Test Your Magic&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Create a series of spells (functions) that mix synchronous and asynchronous code. Observe their order of execution.&lt;/li&gt;
&lt;li&gt;Imagine a situation where your spell book (Call Stack) gets too full. How would this impact your magic? Research: "Stack overflow in JavaScript".&lt;/li&gt;
&lt;li&gt;Share a real-world scenario where understanding the Event Loop saved your spell from going awry.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Embark on this journey, wizards, and may the rhythm of the Event Loop always be with you! 🧙‍♂️🕰️🌀&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>typescript</category>
      <category>webdev</category>
      <category>react</category>
    </item>
    <item>
      <title>JavaScript Promises: The Scrolls of Asynchronous Magic(Part 2)</title>
      <dc:creator>Chandan Singh</dc:creator>
      <pubDate>Wed, 27 Sep 2023 20:32:38 +0000</pubDate>
      <link>https://forem.com/init_chandan/javascript-promises-the-scrolls-of-asynchronous-magicpart-2-93o</link>
      <guid>https://forem.com/init_chandan/javascript-promises-the-scrolls-of-asynchronous-magicpart-2-93o</guid>
      <description>&lt;p&gt;Hello again, my fellow apprentice wizards of the coding realm! 🧙‍♂️ Last time, we discussed the mystical Promises in JavaScript—a tool so powerful it can make or break your quest in the magical world of asynchronous code. Today, we shall delve deeper into the Book of Promises to unveil more advanced spells, clever techniques, and hidden chambers of wisdom. Get ready to expand your magical toolkit!&lt;/p&gt;

&lt;h3&gt;
  
  
  The Basic Summoning Spell Revisited
&lt;/h3&gt;

&lt;p&gt;Remember our basic summoning spell (Promise) from last time?&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;basicSpell&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nb"&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="c1"&gt;// casting spell&lt;/span&gt;
  &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;)&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="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Spell successful!&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="nx"&gt;reject&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Spell failed!&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  The Art of Chaining Promises
&lt;/h3&gt;

&lt;p&gt;One of the first advanced techniques you’ll learn is "chaining." Picture a series of spells that feed into each other like a chain of mystical energy.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;
&lt;span class="nx"&gt;firstSpell&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;then&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;result1&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;secondSpell&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;result1&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;then&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;result2&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;thirdSpell&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;result2&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="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="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`The spell chain broke: &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="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;

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

&lt;/div&gt;



&lt;h3&gt;
  
  
  Promise.all: The Grand Summoning
&lt;/h3&gt;

&lt;p&gt;Imagine being able to cast multiple spells at once and wait for all of them to complete! The &lt;strong&gt;&lt;code&gt;Promise.all&lt;/code&gt;&lt;/strong&gt; incantation allows you to do just that.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;
&lt;span class="nb"&gt;Promise&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;all&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="nx"&gt;spellOne&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt; &lt;span class="nx"&gt;spellTwo&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt; &lt;span class="nx"&gt;spellThree&lt;/span&gt;&lt;span class="p"&gt;()])&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;then&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;results&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="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`All spells were successful! &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;results&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&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="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="o"&gt;=&amp;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="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`One of the spells failed: &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="s2"&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;h3&gt;
  
  
  Promise.race: The Duel of Spells
&lt;/h3&gt;

&lt;p&gt;In some cases, you want to know which spell finishes first. Use &lt;strong&gt;&lt;code&gt;Promise.race&lt;/code&gt;&lt;/strong&gt; for this.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;
&lt;span class="nb"&gt;Promise&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;race&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="nx"&gt;slowSpell&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt; &lt;span class="nx"&gt;fastSpell&lt;/span&gt;&lt;span class="p"&gt;()])&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;then&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;winner&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="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`The faster spell is: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;winner&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&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;h3&gt;
  
  
  Handling Multiple Cases with Promise.allSettled
&lt;/h3&gt;

&lt;p&gt;Sometimes, you'd want to know the outcome of all spells, whether they succeed or fail. &lt;strong&gt;&lt;code&gt;Promise.allSettled&lt;/code&gt;&lt;/strong&gt; comes to your rescue here.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;
&lt;span class="nb"&gt;Promise&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;allSettled&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="nx"&gt;riskySpell&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt; &lt;span class="nx"&gt;safeSpell&lt;/span&gt;&lt;span class="p"&gt;()])&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;then&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;results&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;results&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;forEach&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="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="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`Outcome: &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="nx"&gt;status&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;)));&lt;/span&gt;

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

&lt;/div&gt;



&lt;h3&gt;
  
  
  Further Reading for Aspiring Magicians
&lt;/h3&gt;

&lt;p&gt;Hungry for more? Check out the &lt;strong&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise"&gt;MDN Documentation on Promises&lt;/a&gt;&lt;/strong&gt; to further expand your spellbook.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Sorcerer’s Assignments: Test Your Magic 🌟&lt;/strong&gt;
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Chain of Fates&lt;/strong&gt;: Create a chain of 3 promises and handle their outcome.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Spellbinders&lt;/strong&gt;: Use &lt;strong&gt;&lt;code&gt;Promise.all&lt;/code&gt;&lt;/strong&gt; to execute multiple promises and display their results.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Grandmaster’s Duel&lt;/strong&gt;: Employ &lt;strong&gt;&lt;code&gt;Promise.race&lt;/code&gt;&lt;/strong&gt; to determine the faster of two promises.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Oracle's Sight&lt;/strong&gt;: Use &lt;strong&gt;&lt;code&gt;Promise.allSettled&lt;/code&gt;&lt;/strong&gt; to assess the results of multiple promises, combining this lesson with the last blog's object manipulations.&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Conclusion&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;And thus, we close another chapter in our Book of Promises. As you experiment with these versatile spells, remember that the essence of mastering Promises lies in understanding their flexibility and potential to make your coding life magical!&lt;/p&gt;

&lt;p&gt;Happy coding, wizards! 🌟&lt;/p&gt;

</description>
    </item>
    <item>
      <title>JavaScript Promises: The Scrolls of Asynchronous Magic</title>
      <dc:creator>Chandan Singh</dc:creator>
      <pubDate>Sun, 24 Sep 2023 19:45:05 +0000</pubDate>
      <link>https://forem.com/init_chandan/javascript-promises-the-scrolls-of-asynchronous-magic-516o</link>
      <guid>https://forem.com/init_chandan/javascript-promises-the-scrolls-of-asynchronous-magic-516o</guid>
      <description>&lt;p&gt;Welcome back, young sorcerers! So far, we've explored the realms of variables, control structures, functions, objects, and arrays. Today, we venture into an area that even seasoned wizards often find daunting—Promises in JavaScript!&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Introduction&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;In the realm of programming, just like in any quest, sometimes you must wait for the right moment to strike. Promises offer a way to manage these waiting periods. Think of Promises as magic scrolls that contain the outcome of a future event.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Origin of Promises&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Promises have a storied past, emerging from the chaos that was "callback hell." Before Promises, mages and coders alike would nest magical spells (callbacks) within each other until their complexity spiraled out of control—aptly named "Pyramid of Doom." Promises came as a cleaner, more organized way to manage asynchronous tasks.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Crafting a Promise&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;In the arcane language of JavaScript, crafting a Promise looks like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="nx"&gt;javascriptCopy&lt;/span&gt; &lt;span class="nx"&gt;code&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;magicalEvent&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nb"&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="c1"&gt;// Your magic code here&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

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

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;resolve&lt;/code&gt;&lt;/strong&gt;: What happens when the spell succeeds.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;reject&lt;/code&gt;&lt;/strong&gt;: What happens if the spell fails.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Basic Examples&lt;/strong&gt;
&lt;/h2&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Resolving a Promise&lt;/strong&gt;
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="nx"&gt;javascriptCopy&lt;/span&gt; &lt;span class="nx"&gt;code&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;findTreasure&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nb"&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="c1"&gt;// After 3 seconds, we find a treasure&lt;/span&gt;
  &lt;span class="nx"&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="nx"&gt;resolve&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Treasure found!&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;3000&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="nx"&gt;findTreasure&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt; &lt;span class="o"&gt;=&amp;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="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// outputs: 'Treasure found!'&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

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

&lt;/div&gt;



&lt;h3&gt;
  
  
  &lt;strong&gt;Rejecting a Promise&lt;/strong&gt;
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="nx"&gt;javascriptCopy&lt;/span&gt; &lt;span class="nx"&gt;code&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;findTreasure&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nb"&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="c1"&gt;// After 3 seconds, the quest fails&lt;/span&gt;
  &lt;span class="nx"&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="nx"&gt;reject&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Quest failed!&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;3000&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="nx"&gt;findTreasure&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;reason&lt;/span&gt; &lt;span class="o"&gt;=&amp;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="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;reason&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// outputs: 'Quest failed!'&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

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

&lt;/div&gt;



&lt;h2&gt;
  
  
  &lt;strong&gt;Further Reading&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;For those brave souls eager to venture deeper into the magical world of Promises, the &lt;strong&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise"&gt;MDN Documentation on Promises&lt;/a&gt;&lt;/strong&gt; offers more advanced incantations and spells.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Sorcerer’s Assignments: Test Your Magic&lt;/strong&gt;
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Create a Promise that simulates fetching data from a magical oracle. Make it resolve successfully.&lt;/li&gt;
&lt;li&gt;Create another Promise but this time make it fail. Capture the failure using &lt;strong&gt;&lt;code&gt;.catch()&lt;/code&gt;&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;Combine your knowledge of functions and Promises to create an async spell (function) that utilizes Promises.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Remember, your previous journey with objects still holds value. Try creating a Promise around an object operation and share your incantations (code) in the comments below!&lt;/p&gt;

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

&lt;p&gt;Promises may seem complex at first, but they are invaluable scrolls in your JavaScript spellbook. Mastery over Promises can make your journey in both magical realms and real-world projects much smoother. So practice these spells and until next time, may your code run error-free!&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>react</category>
      <category>typescript</category>
    </item>
    <item>
      <title>The Whispering Trees: How Callbacks Work in JavaScript Forest</title>
      <dc:creator>Chandan Singh</dc:creator>
      <pubDate>Wed, 20 Sep 2023 14:20:07 +0000</pubDate>
      <link>https://forem.com/init_chandan/the-whispering-trees-how-callbacks-work-in-javascript-forest-277l</link>
      <guid>https://forem.com/init_chandan/the-whispering-trees-how-callbacks-work-in-javascript-forest-277l</guid>
      <description>&lt;p&gt;In the enchanted world of JavaScript Forest, trees have a unique ability: they can whisper messages to each other. These whispers form the basis for what we in the human realm call "callbacks." Let's delve into how these callbacks weave their magic.&lt;/p&gt;

&lt;h2&gt;
  
  
  🌳 &lt;strong&gt;The Whisper of Nature: What Are Callbacks?&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;In simple terms, a callback is a function that is to be executed after another function has finished running. It’s like telling a tree, “Hey, let me know when you've grown a new branch, and then I’ll build a treehouse.”&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;growBranch&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="c1"&gt;// ...growing&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  🌿 &lt;strong&gt;Sending the Whispers: Passing Callbacks&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Any tree can send a whisper to another, which will only be heard once a certain event occurs. When you pass a function as an argument, you're essentially whispering instructions that will be enacted later on.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;whisper&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;message&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="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;message&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="nx"&gt;whisper&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;A storm is coming!&lt;/span&gt;&lt;span class="dl"&gt;"&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="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&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;Tell all the animals to seek shelter.&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  🌲 &lt;strong&gt;Gathering of the Elders: Callbacks in Built-in Functions&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;JavaScript Forest has wise old trees that already know many whispers (built-in functions). These elders make life easier for the young saplings.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;leaves&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;

&lt;span class="nx"&gt;leaves&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;forEach&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;leaf&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="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`A leaf has fallen: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;leaf&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&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;h2&gt;
  
  
  🌱 &lt;strong&gt;Beware the Confusing Vines: Callback Hell&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Callbacks can become confusing when trees start whispering to multiple others, waiting for each to respond before taking action. This complexity is known as "Callback Hell" in the coding realm.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="nx"&gt;firstTask&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="nx"&gt;secondTask&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="nx"&gt;thirdTask&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;// Callback Hell!&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;h2&gt;
  
  
  🌕 &lt;strong&gt;Lunar Rituals: Asynchronous Callbacks&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;In the realm of JavaScript, whispers can be heard even under the moonlight. This phenomenon is known as "Asynchronous Callbacks."&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="nx"&gt;setTimeout&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="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&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;The full moon rises.&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;3000&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

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

&lt;/div&gt;



&lt;h2&gt;
  
  
  📚 &lt;strong&gt;Further Exploration&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;For those who wish to expand their understanding of Callbacks, you might want to pay a visit to the &lt;a href="https://developer.mozilla.org/en-US/docs/Glossary/Callback_function"&gt;MDN Callback Function Documentation&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  🌟 &lt;strong&gt;Whisperer’s Quests: Test Your Skills&lt;/strong&gt;
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Create a callback function that will alert you when a tree has grown a new branch.&lt;/li&gt;
&lt;li&gt;Use callbacks to create a sequence of whispers among trees. Make sure each whisper happens only after the previous whisper was heard.&lt;/li&gt;
&lt;li&gt;Incorporate a callback into an array method, like &lt;code&gt;map&lt;/code&gt; or &lt;code&gt;filter&lt;/code&gt;.&lt;/li&gt;
&lt;/ol&gt;

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

&lt;p&gt;Callbacks are like whispers among trees — essential for communication, vital for responsiveness. They come with their own set of challenges, but mastering them is a rite of passage for any sorcerer of code.&lt;/p&gt;




&lt;p&gt;May this installment guide you through the enchanted forest of JavaScript Callbacks, unlocking new spells and potent rituals in your journey.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>typescript</category>
      <category>react</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
