<?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: Shubham</title>
    <description>The latest articles on DEV Community by Shubham (@coderoo7).</description>
    <link>https://dev.to/coderoo7</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%2F165258%2F2436f67f-a81e-4b6d-b3cf-9545b4f735b6.png</url>
      <title>DEV Community: Shubham</title>
      <link>https://dev.to/coderoo7</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/coderoo7"/>
    <language>en</language>
    <item>
      <title>How you enforce team members to use same node version</title>
      <dc:creator>Shubham</dc:creator>
      <pubDate>Fri, 08 Jan 2021 06:03:25 +0000</pubDate>
      <link>https://dev.to/coderoo7/how-you-enforce-team-members-to-use-same-node-version-1ib3</link>
      <guid>https://dev.to/coderoo7/how-you-enforce-team-members-to-use-same-node-version-1ib3</guid>
      <description>&lt;p&gt;Basically I use nvm to maintain different node version on my system. I want to know how can I warn or prevent user to install libraries in project with different node version because it may lead to bugs in production environment.&lt;/p&gt;

</description>
      <category>help</category>
      <category>node</category>
      <category>developers</category>
      <category>backend</category>
    </item>
    <item>
      <title>Single Page CRM App</title>
      <dc:creator>Shubham</dc:creator>
      <pubDate>Wed, 02 Sep 2020 15:48:18 +0000</pubDate>
      <link>https://dev.to/coderoo7/single-page-crm-app-api</link>
      <guid>https://dev.to/coderoo7/single-page-crm-app-api</guid>
      <description>&lt;p&gt;Hi I need guidance to complete this task, I had no experience in making CRM web app. If anyone can guide me how to build this crm web app or any resource which I can consider than it would be great help.&lt;/p&gt;

&lt;h2&gt;
  
  
  Task
&lt;/h2&gt;

&lt;p&gt;A user potential customer will fill a query form (You have to make it in frontend)&lt;br&gt;
• Query will be stored in the backend. Query is also named as a lead&lt;br&gt;
• Sales team will need an internal dashboard (built with react and&lt;br&gt;
Django) to handle those leads properly.&lt;br&gt;
• Each member of sales team will have their own account&lt;br&gt;
• Each query goes to each member in round robin fashion&lt;br&gt;
• Each member can transfer query or lead to another team also&lt;br&gt;
• Each lead/query will move through different phases:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Yet to contact&lt;/li&gt;
&lt;li&gt;In progress&lt;/li&gt;
&lt;li&gt;No response from customer&lt;/li&gt;
&lt;li&gt;Success&lt;/li&gt;
&lt;li&gt;Failure&lt;/li&gt;
&lt;li&gt;Not interested right now but will be in future&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;• Team member can filter leads by the fields in query form and the phase labels described above&lt;br&gt;
• A sales team member's performance is measured in different phases&lt;br&gt;
handled by that team member.&lt;br&gt;
E.g. success rate, time to make first contact (Turnaround time to&lt;br&gt;
contact), failure rates, in progress count&lt;/p&gt;

</description>
      <category>help</category>
      <category>crm</category>
      <category>webdev</category>
      <category>discuss</category>
    </item>
    <item>
      <title>How to transfer file b/w your computer and android phone using wifi(without internet)</title>
      <dc:creator>Shubham</dc:creator>
      <pubDate>Thu, 27 Jun 2019 18:27:31 +0000</pubDate>
      <link>https://dev.to/coderoo7/how-to-transfer-file-b-w-your-computer-and-android-phone-using-wifi-without-internet-416b</link>
      <guid>https://dev.to/coderoo7/how-to-transfer-file-b-w-your-computer-and-android-phone-using-wifi-without-internet-416b</guid>
      <description>&lt;p&gt;If you use old method to transfer file from your smartphone to your pc or vice-versa using data-cable then friends you need to stop now. Today we all gonna learn a universal method which work on all OS weather its Linux, Windows or Mac OS.&lt;/p&gt;

&lt;h2&gt;
  
  
  Overview
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;In any case if we want to transfer file b/w two device or more on a same network then we have to create a server on any one device from which you want to copy/download the data.&lt;/li&gt;
&lt;li&gt;Now to enable data transfer b/w android and pc connected to same network, you have to create server on your android phone.&lt;/li&gt;
&lt;li&gt;To create server many apps are available like

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://play.google.com/store/apps/details%20id=com.amaze.filemanager&amp;amp;hl=en_IN" rel="noopener noreferrer"&gt;Amaze file manager&lt;/a&gt; - Open Source File Manager&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://forum.xda-developers.com/showthread.php?t=1523691" rel="noopener noreferrer"&gt;Mixplorer&lt;/a&gt; - Best File manager I have ever used&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;To transfer file you can choose protocols like http,ftp or ssh. Most commonly used protocol is ftp(File Transfer Protocol) to transfer large file which we will use in this tutorial.&lt;/li&gt;
&lt;li&gt;Once the server is setup on android you can access its storage on your device using its ftp address(&lt;a href="ftp://192.168.43.1:2222"&gt;ftp://192.168.43.1:2222&lt;/a&gt;) provided by your ftp client(app) you installed in first step.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;em&gt;Note - To transfer data, android phone and your device should be on same network weather they are connected using router or your mobile hotspot.&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  TLDR; Lets do it
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;First install ftp client app &lt;a href="https://play.google.c%0Aom/store/apps/details%20id=com.amaze.filemanager&amp;amp;hl=en_IN" rel="noopener noreferrer"&gt;Amaze file manager&lt;/a&gt; on your andoid phone

&lt;ul&gt;
&lt;li&gt;For iphone you can search for ftp client on google and install anyone you want.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Open your mobile hotspot and connect your laptop or pc to it. &lt;/li&gt;
&lt;li&gt;Next open your ftp client app which you have install in first step and tap to create ftp server. 

&lt;ul&gt;
&lt;li&gt;On Amaze file manager it looks like this
&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fz2hsg2ytw4lequqa40yg.png" alt="init"&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Note the ftp address provided on your app.&lt;/li&gt;
&lt;li&gt;Open your file Manger in your linux OS or &lt;strong&gt;my computer&lt;/strong&gt; in windows OS,go to network tab and create new network as follows:

&lt;ul&gt;
&lt;li&gt;Connection type: ftp
&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foikcxvinfb6nfjybw38g.png" alt="ftp"&gt;
&lt;/li&gt;
&lt;li&gt;Name: Any name you want&lt;/li&gt;
&lt;li&gt;User : If not set leave it blank&lt;/li&gt;
&lt;li&gt;Server address: Your ftp address of phone(&lt;a href="ftp://192.168.43.1"&gt;ftp://192.168.43.1&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;Port: 2211(whatever is provided by your ftp app)&lt;/li&gt;
&lt;li&gt;Password: If not set leave it blank&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;For reference see below screenshots:&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F913dycuwgdjbzn6ezsak.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F913dycuwgdjbzn6ezsak.png" alt="addresspng"&gt;&lt;/a&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F24404523%2F60288434-c7708c80-9931-11e9-90b1-b2256bbf2a36.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F24404523%2F60288434-c7708c80-9931-11e9-90b1-b2256bbf2a36.png" alt="address"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In this way we can access our phone storage on our laptop and share data between them without using any data cable or without installing any third party application on our pc. &lt;/p&gt;

</description>
      <category>linux</category>
      <category>android</category>
      <category>discuss</category>
      <category>twitter</category>
    </item>
    <item>
      <title>What is Google Cloud Platform?</title>
      <dc:creator>Shubham</dc:creator>
      <pubDate>Fri, 07 Jun 2019 21:54:33 +0000</pubDate>
      <link>https://dev.to/coderoo7/what-is-google-cloud-platform-47k7</link>
      <guid>https://dev.to/coderoo7/what-is-google-cloud-platform-47k7</guid>
      <description>&lt;p&gt;&lt;em&gt;Well today my Uncle asked me about what is Google Cloud Platform as he is helping his grand-daughter to complete her holiday homework.This article is dedicated to him.&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  First we need to understand what is Cloud?
&lt;/h3&gt;

&lt;p&gt;In technical term &lt;strong&gt;Cloud&lt;/strong&gt; is the collection of computers over the internet whose services can be used by user(people) remotely without physically need to be their.&lt;/p&gt;

&lt;p&gt;The services that &lt;strong&gt;Cloud&lt;/strong&gt; offers are storing and retrieving user data on-demand, maintenance of user data, data security etc.&lt;/p&gt;

&lt;h3&gt;
  
  
  Secondly what is cloud computing?
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fd1jnx9ba8s6j9r.cloudfront.net%2Fblog%2Fwp-content%2Fuploads%2F2018%2F02%2FCloud-Computing.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fd1jnx9ba8s6j9r.cloudfront.net%2Fblog%2Fwp-content%2Fuploads%2F2018%2F02%2FCloud-Computing.png"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;According to Wikipedia Cloud computing is the on-demand availability of computer system resources, especially data storage and computing power, without direct active management by the user(people)&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;In laymen term if you want to go to some place and you don't have a vehicle then what you do? Instead of buying new vehicle you prefer to take taxi from UBER or other public transport.Now try to understand the concept i.e &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Now their is not only single taxi in this world, their are large number of public transports whose facility user(people) can avail, so we can say &lt;strong&gt;group of taxi is our CLOUD&lt;/strong&gt; which provide public transport facility.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Secondly their are big giants like UBER at international level and OLA in India that provide taxi facility. From this context we can say that that these are the cloud platforms to which user interact similar to &lt;strong&gt;Google Cloud platform&lt;/strong&gt;, &lt;strong&gt;Amazon Cloud&lt;/strong&gt;, &lt;strong&gt;Microsoft Azure&lt;/strong&gt; etc.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Third key point is that to avail taxi facility users(people) don't have to go out of their home to taxi booking department,&lt;strong&gt;user can remotely order taxi using internet&lt;/strong&gt; instead of going to some third party person to book taxi. Thus&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;User avail taxi facility on demand.&lt;/li&gt;
&lt;li&gt;User no need to worry about how UBER or OLA provide taxi service.&lt;/li&gt;
&lt;li&gt;User has the facility to choose type of service to avail like a.c car or non-a.c car or two wheeler vehicle, similarly in cloud computing user can adjust amount of storage needed, computation power needed.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Google Cloud Platform
&lt;/h3&gt;

&lt;p&gt;It is the suite of various cloud computing services offered by Google. Means Google has its own dedicated powerful servers(computer) and hardware that provide cloud computing services.&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.edureka.co%2Fblog%2Fwp-content%2Fuploads%2F2018%2F02%2FGCP_benifits.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.edureka.co%2Fblog%2Fwp-content%2Fuploads%2F2018%2F02%2FGCP_benifits.png"&gt;&lt;/a&gt;   &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Services provided by Google Cloud Platform&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Compute&lt;/li&gt;
&lt;li&gt;Storage and Database&lt;/li&gt;
&lt;li&gt;Networking&lt;/li&gt;
&lt;li&gt;Big Data&lt;/li&gt;
&lt;li&gt;Machine Learning &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Application that uses Google Cloud Platform&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Google-Drive&lt;/li&gt;
&lt;li&gt;Gmail&lt;/li&gt;
&lt;li&gt;YouTube&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;em&gt;In short Someone else owns a computer.&lt;br&gt;You put stuff on it over the network.When you want to access it, you connect to the network and access someone else's computer.This is all all about cloud computing&lt;/em&gt;&lt;/p&gt;

</description>
      <category>cloud</category>
      <category>webdev</category>
      <category>learning</category>
      <category>devops</category>
    </item>
    <item>
      <title>What is inode in Linux?</title>
      <dc:creator>Shubham</dc:creator>
      <pubDate>Mon, 20 May 2019 14:39:55 +0000</pubDate>
      <link>https://dev.to/coderoo7/what-is-inode-in-linux-4931</link>
      <guid>https://dev.to/coderoo7/what-is-inode-in-linux-4931</guid>
      <description>&lt;p&gt;Well I'm trying to grasp concept of what inode is?And after reading this &lt;a href="https://mobile.linuxtoday.com/blog/what-is-an-inode.html"&gt;article&lt;/a&gt; what I understand is that inode is kind of array, where as inode-number of file is the index 'i' of that array.&lt;br&gt;
And as we know array have static size that's why older file system like ext3 have fixed number of inode..means you can only create limited number of files in ext3.&lt;/p&gt;

&lt;p&gt;Can I limit the number of files to be create in Linux modern file system like ext4...?&lt;/p&gt;

</description>
      <category>discuss</category>
      <category>linux</category>
    </item>
    <item>
      <title>How JavaScript engine execute this code? </title>
      <dc:creator>Shubham</dc:creator>
      <pubDate>Sat, 11 May 2019 12:49:20 +0000</pubDate>
      <link>https://dev.to/coderoo7/how-javascript-engine-execute-this-code-92f</link>
      <guid>https://dev.to/coderoo7/how-javascript-engine-execute-this-code-92f</guid>
      <description>&lt;p&gt;I'm trying to write a post on execution context in JavaScript.But I'm not able to understand creation phase of execution stack when code is compile, how code is organized in compile code.For example&lt;br&gt;
&lt;/p&gt;

&lt;div class="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="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;//log 'undefined' why?&lt;/span&gt;
   &lt;span class="nx"&gt;logName&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;logName&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;name&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;//log 'undefined'&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;a&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;10&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;CoderOO7&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;br&gt;
js&lt;/p&gt;

&lt;p&gt;According to me JavaScript Engine work as follow:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;First Create global execution context&lt;/li&gt;
&lt;li&gt;Define Global Scope , by searching for variable and function declaration. This 
is where hosting concept come in&lt;/li&gt;
&lt;li&gt;Set the variable a = undefined, name = undefined and this = window object.&lt;/li&gt;
&lt;li&gt;Put search variable and function in memory for reference.&lt;/li&gt;
&lt;li&gt;When function logName() invoke , create its execution context and then set its local scope and value of &lt;strong&gt;this&lt;/strong&gt;.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;the whole picture can be depict as:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nb"&gt;global&lt;/span&gt; &lt;span class="nx"&gt;execution&lt;/span&gt; &lt;span class="nx"&gt;context&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;undefined&lt;/span&gt;
    &lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;undefined&lt;/span&gt;
    &lt;span class="nx"&gt;logName&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;refrence&lt;/span&gt; &lt;span class="nx"&gt;to&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="k"&gt;in&lt;/span&gt; &lt;span class="nx"&gt;memory&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nx"&gt;ScopeChain&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="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nb"&gt;window&lt;/span&gt; &lt;span class="nx"&gt;object&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;

    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;execution&lt;/span&gt; &lt;span class="nx"&gt;context&lt;/span&gt; &lt;span class="k"&gt;of&lt;/span&gt; &lt;span class="nx"&gt;logName&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nx"&gt;ScopeChain&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="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nb"&gt;window&lt;/span&gt; &lt;span class="nx"&gt;object&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;

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



&lt;p&gt;Now when compilation phase is done then than JavaScript engine execute code and assign the values to variable.&lt;/p&gt;

&lt;p&gt;now the picture look 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="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nb"&gt;global&lt;/span&gt; &lt;span class="nx"&gt;execution&lt;/span&gt; &lt;span class="nx"&gt;context&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;
    &lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;CoderOO7&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
    &lt;span class="nx"&gt;logName&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;refrence&lt;/span&gt; &lt;span class="nx"&gt;to&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="k"&gt;in&lt;/span&gt; &lt;span class="nx"&gt;memory&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nx"&gt;ScopeChain&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="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nb"&gt;window&lt;/span&gt; &lt;span class="nx"&gt;object&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;

    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;execution&lt;/span&gt; &lt;span class="nx"&gt;context&lt;/span&gt; &lt;span class="k"&gt;of&lt;/span&gt; &lt;span class="nx"&gt;logName&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nx"&gt;ScopeChain&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="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nb"&gt;window&lt;/span&gt; &lt;span class="nx"&gt;object&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;

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



&lt;p&gt;Somebody help to clear my confussion because I know what I'm thinking is totally wrong.&lt;/p&gt;

</description>
      <category>help</category>
      <category>discuss</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Scoping in Javascript</title>
      <dc:creator>Shubham</dc:creator>
      <pubDate>Thu, 09 May 2019 05:00:03 +0000</pubDate>
      <link>https://dev.to/coderoo7/scoping-in-javascript-6ke</link>
      <guid>https://dev.to/coderoo7/scoping-in-javascript-6ke</guid>
      <description>&lt;p&gt;Hi I'm writting this first post to enhanced my knowledge in Javascript. If I'm wrong somewhere than please help me to correct my mistake...&lt;br&gt;
Scoping is necessary to understand to know how javascript work under the hood.&lt;/p&gt;
&lt;h3&gt;
  
  
  Scoping
&lt;/h3&gt;

&lt;p&gt;It determine the area or region upto which your varibale, function and objects can be accessed in your code or scope determine the visibility of variable in code.&lt;/p&gt;
&lt;h3&gt;
  
  
  Need of Scoping
&lt;/h3&gt;

&lt;p&gt;Scoping make your code secure in terms that user has access to data what is necessary at that time.Also it help to reduce bugs in program and also solve variable name resolution problem when we have two variable with same name but in different scope.&lt;/p&gt;
&lt;h3&gt;
  
  
  Types of Scope
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;GLOBAL SCOPE&lt;/strong&gt; &lt;br&gt;
Global means accessible to everywhere in program. And code that is written outside the function is come under global scope means variable define outside the function can be access anywhere in program, the variable is visible in whole program.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;//GLOBAL SCOPE&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;10&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;x&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// log '10'&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;(){&lt;/span&gt;
    &lt;span class="c1"&gt;//LOCAL SCOPE&lt;/span&gt;
   &lt;span class="k"&gt;return&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;// 'x' is accessible here also and everywhere else in code&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;a&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Note: Global scope is only single that is created by default by javascript engine,  we can't have multiple global scope in javascript.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;LOCAL SCOPE&lt;/strong&gt;&lt;br&gt;
The variable or code inside the function is in local scope.Also known as function scope because the scope is local to that function and local scope only created when functions are called and each function call create new local scope for that function this give us advantage to define variable with same name in different function.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;//GLOBAL SCOPE&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;10&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;x&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// log '10'&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;(){&lt;/span&gt;
   &lt;span class="c1"&gt;//LOCAL SCOPE&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;23&lt;/span&gt; &lt;span class="p"&gt;;&lt;/span&gt;   &lt;span class="c1"&gt;// new local varaible 'x' with same name&lt;/span&gt;
   &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;y&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;40&lt;/span&gt; &lt;span class="p"&gt;;&lt;/span&gt;   &lt;span class="c1"&gt;// new local variable 'y' &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;x&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;  &lt;span class="c1"&gt;// log '23' &lt;/span&gt;

&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// function a() scope is created when it's call.&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;x&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;//log '10'&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;y&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Reference Error Unexpected identifier;&lt;/span&gt;

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



&lt;p&gt;Remember we can't access variable define in function in outerScope because function scope is created when it is call and get destroyed as soon as function return.&lt;/p&gt;

&lt;p&gt;What if I do 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;10&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;x&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// log '10'&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;(){&lt;/span&gt;
   &lt;span class="c1"&gt;//LOCAL SCOPE&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;23&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;      &lt;span class="c1"&gt;// Now we are changing the value of global variable 'x' &lt;/span&gt;
   &lt;span class="nx"&gt;y&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;40&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;      &lt;span class="c1"&gt;// new global variable 'y'&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;x&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;  &lt;span class="c1"&gt;// log '23' &lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nx"&gt;a&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;x&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;//log '23'&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;y&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;//log '43'&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Whenever we assign the value to variable or create the new variable without using 'var' keyword then we are changing the value of global variable or creating a new global variable.&lt;/p&gt;

&lt;h3&gt;
  
  
  BLOCK SCOPE
&lt;/h3&gt;

&lt;p&gt;In Javascript anything between the curly braces is termed as block.Below are the block-scope statements that contain zero or more statements inside block. &lt;br&gt;
Ex:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// new block scope&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="c1"&gt;// new block scope&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;while&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="c1"&gt;//  new block scope &lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;for&lt;/span&gt;&lt;span class="p"&gt;(;;){&lt;/span&gt;
    &lt;span class="c1"&gt;// new block scope&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="c1"&gt;//new block scope&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

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



&lt;p&gt;In case of &lt;strong&gt;var&lt;/strong&gt; curly braces not define any bock-scope means variable declare using var keyword inside block are global.&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;num&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="c1"&gt;//#1 block scope&lt;/span&gt;
    &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="c1"&gt;//2 block scope &lt;/span&gt;
        &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;num&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; 
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nx"&gt;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;num&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;//log '2' b/c var num=1 and  var num=2 are in same scope.&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;num&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;3&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;num&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;//log '3'&lt;/span&gt;

&lt;span class="k"&gt;for&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;num&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;num&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="mi"&gt;5&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;num&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;//log '4'&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;But function scope variable are local to function means variable created inside function are bound to it, they can't be access outside the function scope.How? I have already explained above in local scope section.&lt;/p&gt;

&lt;p&gt;Regardless of &lt;strong&gt;var&lt;/strong&gt; in ES6 &lt;strong&gt;let&lt;/strong&gt; and  &lt;strong&gt;const&lt;/strong&gt; allow to create local scope variable in block scope.Means now variables are bound to scope in which they are define they can't be access outside that scope.&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;const&lt;/span&gt; &lt;span class="nx"&gt;num&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="c1"&gt;//#1 block scope&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;num&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="nx"&gt;log&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;1&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="nx"&gt;c&lt;/span&gt; &lt;span class="nx"&gt;num&lt;/span&gt; &lt;span class="nx"&gt;is&lt;/span&gt; &lt;span class="nb"&gt;global&lt;/span&gt;

    &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="c1"&gt;//#2 block scope &lt;/span&gt;
        &lt;span class="kd"&gt;let&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;Shubham&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="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;// ReferenceError: name is not defined&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Remember unlike &lt;strong&gt;var&lt;/strong&gt; &lt;strong&gt;let&lt;/strong&gt; can't be re-declare but can be reassigned while &lt;strong&gt;const&lt;/strong&gt; can only be declare once and can't be reassigned.&lt;/p&gt;

&lt;p&gt;This is all basic about scoping in Javascript. But you should know javascript is lexical scoped language. Then here another term came lexical Scope.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;LEXICAL SCOPE&lt;/strong&gt;&lt;br&gt;
Lexical scope define how variables name are resolved in case of nested blocks or nested functions or lexical scope means in group of nested block-scope(nested function) inner block has access to variable and other resources of its parent block.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;    &lt;span class="c1"&gt;//Global Scope&lt;/span&gt;
    &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="c1"&gt;//#1 local scope&lt;/span&gt;

        &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

        &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="c1"&gt;//#2 local scope&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;i&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;//log '2' not '1'?&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;Now reading all this we all know that 'i' will be 2 but why have you wonder? This is because in case of lexical scoping the inner block will search for variable in its block scope first, then in outer block-scope until it reached to global scope.&lt;br&gt;
Because of this hierarchy of searching variables from inner-block to outer-block a chain of scope is created known as &lt;strong&gt;scope chain&lt;/strong&gt;  and we get i as '2'.&lt;/p&gt;

&lt;p&gt;In case of functions&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;//Global Scope&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;10&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;foo2&lt;/span&gt;&lt;span class="p"&gt;(){&lt;/span&gt;
&lt;span class="c1"&gt;//Local Scope&lt;/span&gt;
    &lt;span class="k"&gt;return&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;// return '10' not '20'&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;foo1&lt;/span&gt;&lt;span class="p"&gt;(){&lt;/span&gt;
&lt;span class="c1"&gt;//Local Scope&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;20&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;foo2&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;foo1&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt; &lt;span class="c1"&gt;//log '10'&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Question is which 'x' value foo2() will return where it is called or where it is define. You know the answere you just have to follow scoping rule of lexical scoping.&lt;/p&gt;

&lt;p&gt;By looking at code foo2() is called by foo1() then javascript engine look at defination of foo2() where it return 'x'.First js engine search for foo2() value in fun2() scope then in outer scope which is global scope where x is 10. That's why output is 10.&lt;/p&gt;

&lt;p&gt;Remember in lexical scope scoping hierarchy is from top to bottom means the top most outer-block variable are available for inner-block but vice-versa in not true.&lt;/p&gt;

&lt;p&gt;This is all about scoping.I hope I'm able to explain it well and may be I'm wrong somewhere then please tell me my mistake so I can learn from them. Thank you.... &lt;/p&gt;

</description>
      <category>javascript</category>
      <category>discuss</category>
    </item>
  </channel>
</rss>
