<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Shadab Ansari</title>
    <description>The latest articles on DEV Community by Shadab Ansari (@contactshadab).</description>
    <link>https://dev.to/contactshadab</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%2F200530%2F0e3f9777-49a4-46b3-a0b2-75a06fc4ef50.jpeg</url>
      <title>DEV Community: Shadab Ansari</title>
      <link>https://dev.to/contactshadab</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/contactshadab"/>
    <language>en</language>
    <item>
      <title>How to disable insecure password warning in Firefox for Selenium?</title>
      <dc:creator>Shadab Ansari</dc:creator>
      <pubDate>Mon, 07 Oct 2019 14:04:43 +0000</pubDate>
      <link>https://dev.to/cosmoshadab/how-to-disable-insecure-password-warning-in-firefox-for-selenium-562i</link>
      <guid>https://dev.to/cosmoshadab/how-to-disable-insecure-password-warning-in-firefox-for-selenium-562i</guid>
      <description>&lt;p&gt;If you use Selenium and Firefox version 52 or higher for running the automated tests and your development site does not use SSL, you will get the following warning when entering passwords on your login page &lt;code&gt;This connection is not secure. Logins entered here could be compromised&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Firefox will also open the URL &lt;a href="https://support.mozilla.org/en-US/kb/insecure-password-warning-firefox?as=u&amp;amp;utm_source=inproduct"&gt;https://support.mozilla.org/en-US/kb/insecure-password-warning-firefox?as=u&amp;amp;utm_source=inproduct&lt;/a&gt; in a new tab which takes the focus away from the page you are testing. It causes currently running Selenium tests to be failed.&lt;/p&gt;

&lt;p&gt;The good news is&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;you can stop this warning and opening of the new tab by changing the Firefox preference  &lt;strong&gt;&lt;code&gt;security.insecure_field_warning.contextual.enabled&lt;/code&gt;&lt;/strong&gt;  to  &lt;strong&gt;&lt;code&gt;false&lt;/code&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  Java Code:
&lt;/h3&gt;



&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// Create a Firefox profile
FirefoxProfile profile = new FirefoxProfile();
//Set the preference to disable insecure password warning
profile.setPreference("security.insecure_field_warning.contextual.enabled", false);
//Pass the profile to the FirefoxDriver
WebDriver driver = new FirefoxDriver(profile);

// Start of test code
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h3&gt;
  
  
  Python Code:
&lt;/h3&gt;



&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;from selenium import webdriver
// Create a Firefox profile
profile = webdriver.FirefoxProfile()
//Set the preference to disable insecure password warning
profile..set_preference("security.insecure_field_warning.contextual.enabled", false);
//Pass the profile to the FirefoxDriver
driver = webdriver.Firefox(firefox_profile=profile);

// Start of test code
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



</description>
      <category>selenium</category>
      <category>seleniumfirefox</category>
    </item>
    <item>
      <title>Understanding var, let and const in JavaScript</title>
      <dc:creator>Shadab Ansari</dc:creator>
      <pubDate>Fri, 12 Jul 2019 22:59:45 +0000</pubDate>
      <link>https://dev.to/contactshadab/understanding-var-let-and-const-in-javascript-54fc</link>
      <guid>https://dev.to/contactshadab/understanding-var-let-and-const-in-javascript-54fc</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;You can check my other articles about Frontend development, Selenium and Test Automation at &lt;a href="//CosmoCode.io"&gt;CosmoCode.io&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;In this tutorial, we’ll explore the three different ways to declare a variable in JavaScript – &lt;code&gt;var&lt;/code&gt;, &lt;code&gt;let&lt;/code&gt;  and &lt;code&gt;const&lt;/code&gt; keywords. The keyword &lt;code&gt;var&lt;/code&gt; is available since the beginning of JavaScript. Keywords &lt;code&gt;let&lt;/code&gt; and &lt;code&gt;const&lt;/code&gt; were added in ES6. We’ll also understand why &lt;code&gt;var&lt;/code&gt; is problematic and we should use &lt;code&gt;let&lt;/code&gt; or &lt;code&gt;const&lt;/code&gt; instead.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;code&gt;var&lt;/code&gt; keyword
&lt;/h2&gt;

&lt;p&gt;Till ES5 &lt;code&gt;var&lt;/code&gt; was the only way to declare variables in JavaScript:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;//Declaring variable&lt;/span&gt;
&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;car&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="c1"&gt;//Initializing variable&lt;/span&gt;
&lt;span class="nx"&gt;car&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Tesla&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Most of the time we do the declaration and initialization at once:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;car&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Tesla&lt;/span&gt;&lt;span class="dl"&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;Hey, I know these simple things. They are common across all programming languages.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;No, they are not so simple. In JavaScript scoping works differently and it causes great confusion and frustrations to beginners.. There is also the concept of &lt;em&gt;hoisting&lt;/em&gt; and &lt;em&gt;shadowing&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;If you have no idea of “scopes”, “hoisting” or “shadowing”, don't panic and read further.&lt;/p&gt;

&lt;h3&gt;
  
  
  Scope of a variable in JavaScript
&lt;/h3&gt;

&lt;p&gt;The term &lt;em&gt;scope&lt;/em&gt; in the programming world refers to the &lt;em&gt;visibility&lt;/em&gt; of a variable or other entities. Variables are not visible outside the scope in which they are declared. In JavaScript (till ES5), the scope of a variable is either a &lt;em&gt;global&lt;/em&gt; &lt;em&gt;scope&lt;/em&gt; or a &lt;em&gt;function&lt;/em&gt; &lt;em&gt;scope&lt;/em&gt;. Before the ES6, there was no concept of &lt;em&gt;block scope&lt;/em&gt;.&lt;/p&gt;

&lt;h4&gt;
  
  
  Global Scope
&lt;/h4&gt;

&lt;p&gt;Any variable declared outside of a function is of global-scope, which means they can be accessed by any part of the program.&lt;/p&gt;

&lt;p&gt;Let us see things in action:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;msg&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello World&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="nf"&gt;greet&lt;/span&gt;&lt;span class="p"&gt;(){&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;msg&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nf"&gt;greet&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;Hello World
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this example variable &lt;code&gt;msg&lt;/code&gt; is defined outside of any function. So it has a global scope. We know that if any variable has a global scope, any part of the program can access it. Hence it is visible inside the function &lt;code&gt;greet()&lt;/code&gt;.&lt;/p&gt;

&lt;h4&gt;
  
  
  Local Scope (Function Scope)
&lt;/h4&gt;

&lt;p&gt;If a variable is declared &lt;em&gt;inside&lt;/em&gt; a function, it is NOT visible &lt;em&gt;outside&lt;/em&gt; that function. Even if the variable is declared (using &lt;code&gt;var&lt;/code&gt;) &lt;em&gt;inside a code block&lt;/em&gt; (e.g,&lt;code&gt;for&lt;/code&gt;, &lt;code&gt;while&lt;/code&gt;, &lt;code&gt;if&lt;/code&gt;), the variable is visible throughout the whole function, &lt;em&gt;outside that code-block&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;Let us take an example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;greet&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="kc"&gt;true&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;msg&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello World&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="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;msg&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nf"&gt;greet&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;msg&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;Hello World
Uncaught ReferenceError: msg is not defined
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;As we can see the scope of the variable &lt;code&gt;msg&lt;/code&gt; is &lt;em&gt;function&lt;/em&gt; &lt;em&gt;scope&lt;/em&gt;. Although the variable is declared &lt;em&gt;inside&lt;/em&gt; the &lt;code&gt;if&lt;/code&gt; block, it is available &lt;em&gt;outside&lt;/em&gt; the local-block within the function. But it is not available &lt;em&gt;outside the function&lt;/em&gt; as we can see the output &lt;code&gt;Uncaught ReferenceError: msg is not defined&lt;/code&gt; for trying to access it outside the function.&lt;/p&gt;

&lt;p&gt;It happens due to hoisting.&lt;/p&gt;

&lt;h3&gt;
  
  
  Hoisting
&lt;/h3&gt;

&lt;p&gt;Where do you hoist a flag?&lt;/p&gt;

&lt;p&gt;On top of the castle.&lt;/p&gt;

&lt;p&gt;Let us take an example to understand *hoisting* in JavaScript:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;msg&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;msg&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello World&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;undefined
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Wait…! I think we should get the following error because the variable msg was not declared when we tried to access it&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;Uncaught ReferenceError: msg is not defined
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Well, in JavaScript, it does not matter where variables are declared within a particular scope. All variable declarations are moved to the top of their scope.&lt;/p&gt;

&lt;p&gt;The above program was translated by the JS interpreter as:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;msg&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;msg&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;msg&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello World&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;As we can see the variable declaration was hoisted at the top of the scope, global-scope in this case. But the variable assignment was NOT hoisted. The JavaScript interpreter assigned it the default value &lt;code&gt;undefined&lt;/code&gt;. Hence we got the output &lt;code&gt;undefined&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;The same concept would apply with function scope (local scope). All variable declarations inside a function will be hoisted at the top of the function, no matter where they are declared in the function.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;greet&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="kc"&gt;true&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;msg&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello World&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="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;msg&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nf"&gt;greet&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;msg&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The above program was translated by JavaScript interpreter as if var &lt;code&gt;msg&lt;/code&gt; was hoisted at the top of the function although it is declared inside the &lt;code&gt;if&lt;/code&gt; block.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;greet&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;msg&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="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
    &lt;span class="nx"&gt;msg&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello World&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="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;msg&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nf"&gt;greet&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;msg&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Hence we get the output – &lt;code&gt;Hello World&lt;/code&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Shadowing
&lt;/h3&gt;

&lt;p&gt;If we declare a local variable and a global variable with the same name, the local variable will take precedence when it is referred inside a function. It is called &lt;em&gt;shadowing&lt;/em&gt;, the inner variable shadows the outer variable. The Javascript interpreter searches for the variable at the innermost scope and continues until the first match is found.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;msg&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello &lt;/span&gt;&lt;span class="dl"&gt;'&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="s1"&gt;John&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="nf"&gt;greet&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;msg&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Julia&lt;/span&gt;&lt;span class="dl"&gt;'&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="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;msg&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="c1"&gt;//Hello Julia&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nf"&gt;greet&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The moment the &lt;code&gt;if&lt;/code&gt; block is executed by the JavaScript interpreter, it looks for the variable &lt;code&gt;msg&lt;/code&gt; in the local scope. As it is found there, it uses the local scope variable, even if the same variable is declared in the outer scope as well. Variable &lt;code&gt;name&lt;/code&gt; it is not found in the inner scope so the JS interpreter tries to find it in the outer scope and it is found.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Scoping and Hoisting works the same for functions as it works with variables.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  Issues with &lt;code&gt;var&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;No, that we have understood different concepts related to &lt;code&gt;var&lt;/code&gt; , let us discuss the issues with var and why you should avoid using it.&lt;/p&gt;

&lt;p&gt;Let us take an example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;greetings&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello John&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="nf"&gt;greet&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;greetings&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// undefined&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="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;greetings&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello Julia&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="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;greetings&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;//Hello Julia&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;greetings&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;//Hello Julia&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nf"&gt;greet&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 are coming from another programming language background like Java, Python, C# etc, you must be thinking “what the heck”. Don’t you think as greetings is a global variable the first output should be &lt;code&gt;Hello John&lt;/code&gt; ? And the third output should be &lt;code&gt;Hello John&lt;/code&gt; because although inside the &lt;code&gt;if&lt;/code&gt; block we have declared the same variable &lt;code&gt;greetings&lt;/code&gt; it should not be visible outside the &lt;code&gt;if&lt;/code&gt; block?&lt;/p&gt;

&lt;p&gt;Incorrect!&lt;/p&gt;

&lt;p&gt;We just learned about &lt;strong&gt;scoping&lt;/strong&gt; , &lt;strong&gt;hoisting&lt;/strong&gt; and &lt;strong&gt;shadowing&lt;/strong&gt; in JavaScript. We know there is no concept of &lt;strong&gt;block scope&lt;/strong&gt; in JavaScript(till ES5). Let us apply these learnings for the above example.&lt;/p&gt;

&lt;p&gt;When the JavaScript interpreter encounters the variable declaration for &lt;code&gt;greetings&lt;/code&gt; inside the local &lt;code&gt;if&lt;/code&gt; block, it &lt;em&gt;hoisted&lt;/em&gt; the variable declaration at the top of the function. But only the declaration is hoisted, not initialization. The variable has the default value &lt;code&gt;undefined&lt;/code&gt; that the JavaScript interpreter assigns while declaration. When &lt;code&gt;greetings&lt;/code&gt; is referred inside the first print statement, due to *shadowing* the JavaScript interpreter used the inner declaration of the &lt;code&gt;greetings&lt;/code&gt; variable, not the global one. But since the inner declaration of &lt;code&gt;greetings&lt;/code&gt; was not initialized yet, it printed its default value &lt;code&gt;undefined&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Again, the same concept of &lt;em&gt;hoisting&lt;/em&gt; and &lt;em&gt;shadowing&lt;/em&gt; got applied in the third output. The interpreter took the function-scoped declaration of &lt;code&gt;greetings&lt;/code&gt;. The only difference is this time &lt;code&gt;greetings&lt;/code&gt; was already intialized inside the &lt;code&gt;if&lt;/code&gt; block.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;As we can see variables declared with &lt;code&gt;var&lt;/code&gt; are confusing and prone to introduce bugs in the program, if not written with at most care. And that is the reason you should never use &lt;code&gt;var&lt;/code&gt; to declare variables in your program. Always use &lt;code&gt;let&lt;/code&gt; or &lt;code&gt;const&lt;/code&gt; to declare variables.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  &lt;code&gt;let&lt;/code&gt; keyword in ES6
&lt;/h2&gt;

&lt;p&gt;The ES6 specification addressed these issues with JavaScript and introduced **block scoping** with a new keyword &lt;code&gt;let&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Let us take the same example as the previous one with a change – replacing &lt;code&gt;var&lt;/code&gt; with &lt;code&gt;let&lt;/code&gt; keyword :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;greetings&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello John&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="nf"&gt;greet&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;greetings&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;//Hello John&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="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;greetings&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello Julia&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="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;greetings&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;//Hello Julia&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;greetings&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;//Hello John&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nf"&gt;greet&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;As we see the output is more predictable with the &lt;code&gt;let&lt;/code&gt; keyword. The first time the &lt;code&gt;greetings&lt;/code&gt; is referred in the print statement, it took the global value because it was not yet declared locally. The JavaScript interpreter declared the second instance of &lt;code&gt;greeting&lt;/code&gt; in the local scope inside the &lt;code&gt;if&lt;/code&gt; block. It retains the local value &lt;code&gt;Hello Julia&lt;/code&gt; inside the &lt;code&gt;if&lt;/code&gt; block. But outside the &lt;code&gt;if&lt;/code&gt; block in where the variable was declared, the same &lt;code&gt;greetings&lt;/code&gt; variable is not visible to the interpreter. Hence it took the global declaration in the third print statement.&lt;/p&gt;

&lt;p&gt;As we see the &lt;code&gt;let&lt;/code&gt; keyword is behaving similar to most of the other programming languages and is having *block scope*. That is the reason we should “mostly” use &lt;code&gt;let&lt;/code&gt; keyword to declare variables in JavaScript and never the &lt;code&gt;var&lt;/code&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;code&gt;const&lt;/code&gt; keyword in ES6
&lt;/h2&gt;

&lt;p&gt;I hope you have noticed the earlier statement – we should “ &lt;strong&gt;mostly&lt;/strong&gt; ” use &lt;code&gt;let&lt;/code&gt; keyword. We have used mostly because when we have variables that are never going to change their value, we should declare them with &lt;code&gt;const&lt;/code&gt; keyword. It is a good safety feature because if any part of the program try to change the value of the variable, the JavaScript interpreter will raise an Exception.&lt;/p&gt;

&lt;p&gt;Let us see things in action:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;greet&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;greetings&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello World&lt;/span&gt;&lt;span class="dl"&gt;'&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="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;greetings&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello Julia&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="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;greetings&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nf"&gt;greet&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If we run this code, the JavaScript interpreter will raise an Exception where we try to change the value of &lt;code&gt;const&lt;/code&gt; variable &lt;code&gt;greetings&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;Uncaught TypeError: Assignment to constant variable.
    at greet &lt;span class="o"&gt;(&lt;/span&gt;&amp;lt;anonymous&amp;gt;:4:15&lt;span class="o"&gt;)&lt;/span&gt;
    at &amp;lt;anonymous&amp;gt;:9:1
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;There is no other difference between &lt;code&gt;let&lt;/code&gt; and &lt;code&gt;const&lt;/code&gt;&lt;/p&gt;

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

&lt;p&gt;We hope this tutorial gave you a good understanding of all the three ways to declare variables in JavaScript. We discussed as &lt;code&gt;var&lt;/code&gt; does not have block scope, it is bug prone and we should never use it. We should use ES6’s &lt;code&gt;let&lt;/code&gt; or &lt;code&gt;const&lt;/code&gt; instead. We also learned that we should use &lt;code&gt;const&lt;/code&gt; when we want to restrict a variable so that it never changes its value and remain a constant.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>es6</category>
      <category>es5</category>
    </item>
  </channel>
</rss>
