{"componentChunkName":"component---src-templates-blog-post-js","path":"/JavaScript/javascript-concept-4---scope-and-closure/","webpackCompilationHash":"f92dbf25810602c1889e","result":{"data":{"site":{"siteMetadata":{"title":"Web Devlog","author":"RossenaHuh","siteUrl":"https://github.com/rossenahuh","comment":{"disqusShortName":"RossenaHuh","utterances":"rossenahuh/my-dev-blog.git"},"sponsor":{"buyMeACoffeeId":"rossena"}}},"markdownRemark":{"id":"938a03b2-3dbd-5137-b3a2-abe3643d4a28","excerpt":"1. What is Scope?A scope in JavaScript defines what variables are accessible. There are two kinds of scope - global scope and local scopeGlobal scope (Not advised)When a varible is declared outside all functions or curly brackets.\nThere’s a chance of naming collisions if two or…","html":"

1. What is Scope?

\n

A scope in JavaScript defines what variables are accessible. There are two kinds of scope - global scope and local scope

\n
\n

Global scope (Not advised)

\n

When a varible is declared outside all functions or curly brackets.\nThere’s a chance of naming collisions if two or more variables are declared with the same name using let or const.

\n
// Declaring variables with the same name using let(const) in global scope\n\nlet greeting = 'hi'\nlet greeting = 'hello' // Error : Already been declared
\n

Though it’s possible to do so when you declare variables with var, it is still not advised because this will make the code hard to debug.

\n
// Don't do this\n// It will mess up the code, hard to debug\n\nvar greeting = 'hi'\nvar greeting = 'hello' // doesn't throw error\n\nconsole.log(greeting) // 'hello'
\n
\n

Local Scope

\n

When variables are accessible only in a specific part of the code\nThere are two kinds of local scope: function scope and block scope.

\n

2. What does it mean that JavaScript uses lexical scoping?

\n

Inner variable is not accessible from outside but anything that is defined outside is automatically available inside the function. This behavior is called lexical scoping.

\n

3. Explain some examples of closure

\n
// The simplest example\n\nlet passed = 3\n\nlet addTo = function() {\n  let inner = 2\n  console.log(inner)\n  return passed + inner // using a variable outside function}\n\nconsole.log(addTo()) // 5
\n

Any functions where you are using variables outside function are closures.

\n

In order to execute addTo function it will look through the varibles it needs. Since passed is not defined inside the function, it will look at the scope outside function. It would keep going up until it founds the variable.

\n

Let’s look at the another example.

\n
let addTo = function(passed) {\n  let add = function(inner) {\n    return passed + inner\n  }\n\n  return add\n}\n\nlet addToThree = addTo(3) // preserves value insideconsole.log(addToThree(4)) // 7
\n

addTo(3) function preserves 3 value inside the function as closure. This means I can create unlimited number of functions using closure. It keeps the varible it needs to execute.

\n
\n
\n

Conclusion : Closure is a function with preserved data

\n
\n
\n
\n

References

\n

https://www.youtube.com/watch?v=71AtaJpJHw0\nhttps://css-tricks.com/javascript-scope-closures/\nhttps://2ality.com/2015/02/es6-scoping.html

\n
\n
","frontmatter":{"title":"JavaScript Concept 4 - Scope and Closure","date":"July 04, 2019"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/JavaScript/javascript-concept-4---scope-and-closure/","previous":{"fields":{"slug":"/JavaScript/javascript-concept-3---var-let-const/"},"frontmatter":{"title":"JavaScript Concept 3 - var let const","category":"JavaScript"}},"next":{"fields":{"slug":"/JavaScript/javascript-concept-5---statement(definition)-and-expression/"},"frontmatter":{"title":"JavaScript Concept 5 - Statement(Definition) and Expression","category":"JavaScript"}}}}}