a blog for those who code

Tuesday 21 February 2017

What You Should Know About Javascript Scope

In this post we will be discussing about JavaScript Scope. JavaScript has a feature called Scope and implementing it in your application will make your code much cleaner and easy to understand. Scope in your application determines the visibility and accessibility of variables/functions.

What is Scope in JavaScript ?

As already discussed Scope means accessibility or visibility of variables and functions in your code. Scope limits the visibility of variables and not allowing everything available everywhere in your code thus provides some level of security to your code. In JavaScript there are mainly two types of scopes and they are :

  • Global Scope 
  • Local Scope

What is Global Scope ?

When you start writing JavaScript in a file, you are already in a Global Scope i.e. the variables defined in a global scope will be available every where in your application.

// Global Variable
var globalVariable = "CodeingDefined.com";

What is Local Scope ?

Any variables or functions defined inside a function are in a local scope to that function i.e. they are visible and accessible only inside that function.

var func = function () {
  // Local Scope

Note : Local scoped items are not visible in the global scope, that means variables or functions defined inside a function is not visible or accessible outside that function. There are ways to expose it outside but in normal circumstances global scope variable is accessible from anywhere in the application whereas local scope variable is only accessible inside the function or where the scope ends.

What is Block Scope ?

Variables which are declared with var do not have block scope i.e. variables declared inside a block can be accessed or visible outside it. To have a block scope, we have to declare variable with let and const. These keywords support the decalaration of local scope inside block statements.

let variable = "CodeingDefined.com";
  let variable = "Changed inside block";
  let newVariable = "New Variable";
}// Variable scope ends here
console.log(variable); // prints "CodeingDefined.com"
console.log(newVariable); // ReferenceError: newVariable not defined

What do you mean by Lexical Scope ?

Lexical Scope (or Static Scope) means that all the inner functions of a function will have access to the variables and other resources of their parent scope. Lexical scope does not work backwards that means variable defined inside an inner function is not accessible by the parent.

Can you make Scope Private ?

Yes we can make a function private in JavaScript by encapsulating the function within a function. A private scope can be created by wrapping the function inside a function as shown below. Where we have paraenthesis at the end which tells the interpreter to execute the function as soon as it reads without invocation.

(function() {
 var func1 = function() {
  //my function
func1(); // ReferenceError: func1 is not defined

I hope you got some knowledge about scopes in JavaScript. This is important topic to know if you want to dive deep into JavaScript.

Please Like and Share CodingDefined.com blog, if you find it interesting and helpful.

No comments:

Post a Comment