Explanation of Variable scopes in JavaScript

Explanation of Variable scopes in JavaScript

Hello everyone, in this article we are going to talk about scopes of variables in JavaScript and with code examples for better understanding.

Let's begin.

JavaScript is one of most famous programming languages with especially its flexibility. In java script sometimes it might be a challenge the understanding variable scopes and using variables in the code. This is the reason we should learn the variable scope in Javascript for writing bug free code.

What is Variable Scope?
Variable scope specify the where a variable can be accessible. We can declare variables that can be accessible from all around the application or only from related class or function. In JavaScript there are two main types of Variable Scopes:
  • Global Scope: Variables defined outside of a function or a code block. It will be defined globally and accessible from all around the application.
  • Local Scope: Variables are defined in a function or a code block, So only in that block they can be accessible not globally.

Global Scope

Variables are defining outside of any function or any block, So they are reachable globally at the application.

Below you can see an example for Global scoped variable decleration

var globalVariable = 'This is a global variable';

function print() {
    console.log(globalVariable); // Accessible from function
}

print();
console.log(globalVariable); // Accessible outside the function also and any other locations

Local Scope

Variables are defining within the function and it is accesible only within this function

Below you can see example of Local variable

function greet() {
    var localVariable = 'Local variable definition';
    console.log(localVariable); // Accessible within the function
}

greet();
console.log(localVariable); // Error: localVariable is not defined

Hoisting

Hoisting is one important feature about variable scope in JavaScrip. JavaScript hoists variable declarations to the top of their containing scope. This means that even if you declare a variable inside a block or a function, it is as if it were declared at the beginning of that block or function.

Below you can see the example of hoisting:

function hoistingExample() {
  console.log(x); // Outputs 'undefined'
  var x = 10;
  console.log(x); // Outputs '10'
}

hoistingExample();

In this example, x is hoisted to the top of the hoistingExample function, but it is initialized with undefined. It's essential to be aware of hoisting to avoid unexpected behavior in your code.


Conclusion

Knowledge on variable scope is very important to write clean and maintainable code in JavaScript. By learning the concepts of variable scopes and additionally hoisting, you can avoid common pitfalls and write more efficient JavaScript code.

That is all

Burak Hamdi TUFAN


Tags


Share this Post

Send with Whatsapp

Post a Comment

Success! Your comment sent to post. It will be showed after confirmation.
Error! There was an error sending your comment. Check your inputs!

Comments

  • There is no comment. Be the owner of first comment...