<?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: Afzal shaikh</title>
    <description>The latest articles on Forem by Afzal shaikh (@aflying_penguin).</description>
    <link>https://forem.com/aflying_penguin</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%2F422872%2Fda38fb60-2674-4264-b740-e322bb8f8014.jpg</url>
      <title>Forem: Afzal shaikh</title>
      <link>https://forem.com/aflying_penguin</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/aflying_penguin"/>
    <language>en</language>
    <item>
      <title>All about Var, Let &amp; Const</title>
      <dc:creator>Afzal shaikh</dc:creator>
      <pubDate>Mon, 17 Aug 2020 10:57:58 +0000</pubDate>
      <link>https://forem.com/aflying_penguin/all-about-var-let-const-16gc</link>
      <guid>https://forem.com/aflying_penguin/all-about-var-let-const-16gc</guid>
      <description>&lt;h1&gt;
  
  
  Var,Let &amp;amp; Const
&lt;/h1&gt;

&lt;h2&gt;
  
  
  lets talk about &lt;strong&gt;Var&lt;/strong&gt; first
&lt;/h2&gt;

&lt;p&gt;we use it to declare a variable like this&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;    &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;but do you know you can decalre it again ??&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;    &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;300&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nx"&gt;consol&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;x&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="c1"&gt;//will successfully print 300 in your console&lt;/span&gt;

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



&lt;p&gt;yes, the var variables are redefinable &lt;/p&gt;

&lt;p&gt;which means in a long code you can define a variable twice by mistake  and then spend a lot of time trying to figure out what went wrong &lt;/p&gt;

&lt;p&gt;scoping -&lt;br&gt;
 var as we know is function scoped , which means its only availible in the function that it is created&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;    &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;(){&lt;/span&gt;
        &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;penguin&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;&lt;span class="c1"&gt;//only available in this function&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;name&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;&lt;span class="c1"&gt;//will work&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="c1"&gt;//will work&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;name&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;&lt;span class="c1"&gt;//will scream at you in red color&lt;/span&gt;

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



&lt;p&gt;so what happens when it is declared outside a function ?&lt;br&gt;
 it becomes globally scoped&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;    &lt;span class="k"&gt;if&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;marks&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;40&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
        &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;grade&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;pass&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;//variable decalred not within a function &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;your grade is ${grade}&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;if you write this code , and then in your console type out &lt;code&gt;console.log(grade)&lt;/code&gt; then it will still print the grade which means &lt;strong&gt;the variable &lt;code&gt;grade&lt;/code&gt; is being stored even after the execution&lt;/strong&gt; of that line which is not required,  which means the var grade has leaked from it's block and can create problems later on &lt;/p&gt;

&lt;p&gt;mainly these aree the points where  &lt;em&gt;Var&lt;/em&gt; differs with &lt;em&gt;let&lt;/em&gt; and &lt;em&gt;const&lt;/em&gt;&lt;br&gt;
 you can learn more about &lt;em&gt;var&lt;/em&gt; about &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var"&gt;here&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Now let's talk about 'Let' and 'Const'
&lt;/h2&gt;

&lt;p&gt;first of all let and const cannot be redefined like var &lt;/p&gt;

&lt;p&gt;no way to use the same variable name again&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;    &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;100&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;x&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;300&lt;/span&gt; &lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;//will not work and will scream at you in red &lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;but as let and const are block scoped meaning they're available in the block they're defined in&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;marks&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;78&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;isPass&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;&lt;span class="c1"&gt;//globally scoped &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;marks&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;50&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;&lt;span class="c1"&gt;//start of the block&lt;/span&gt;

    &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;isPass&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;//block scoped&lt;/span&gt;

&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="c1"&gt;//end of the block&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;isPass&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="c1"&gt;//will print 'false'&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;here we've used the same name &lt;code&gt;isPass&lt;/code&gt; to define a variable two times but both of them refer to two different vairable values , which means they're not the same variable because of their scoping , while the first `isPass' is defined globally , what we have to do is to update it instead of redefining it for the desired outcome &lt;/p&gt;

&lt;p&gt;&lt;code&gt;&lt;/code&gt;`js&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;let isPass = true; // will not work&lt;/li&gt;
&lt;li&gt;isPass = true; //will work &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;`&lt;code&gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;while a let defined variable can be changed like this a &lt;code&gt;const&lt;/code&gt; defined cannot be changed however, you can change attributes in a const defined object , for e.g&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&lt;/code&gt;`js&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const student= {
    name = 'penguin'
    marks = 78
}

//we cannot reassign the whole variable like

student = { name = 'not penguin' } // this will not work

//but we can change the properties 

student.marks = 97; //this will work
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;

&lt;p&gt;`&lt;code&gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;so, i think this information is enough to understand differences between Var , Let &amp;amp; Const &lt;br&gt;
Hopefully you've gained something from this&lt;br&gt;
As this is my first post i hope you liked it, Thank you&lt;br&gt;
i intend to post more about whatever i have learned you can follow me for more such posts on twitter &lt;a href="https://twitter.com/aFlying_Penguin"&gt;@aFlying_Penguin&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>100daysofcode</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
