Local vs Global Scope and Let Vs Var In JavaScript
By: Jhimmy Official
Tags: Tech, JavaScript, Programming, Web Development, Web

In this Article, i will be explaining some interesting concepts in JavaScript. The differences between the Local and Global Scope and also the Let vs Var Keyword in JavaScript.

Local vs Global Scope

The Scope of a variable or constant determines where a variable or constant is accessible during runtime. There’s a general discussion about the differences between Local and Global scopes In JavaScript. I’ll highlight the major differences between the two concepts in this article.

Local Scope

Variables or Constants declared within a code block are said to be in a local scope. When we declare a variable or constants with the let or const keywords, their scope is limited to the code block or function in which they were defined. We can not access variables that are in a local scope outside of the code block or function in which they were defined. Let’s see an example:

In the example above, an error message will be logged on the console, because the scope of the constant is limited to the code block where it was defined(the start() function). We can’t access the const message outside of the start() function.

Global Scope

When a variable or constant is defined outside of a function,which isn’t limited to any code block, it is said to have a global scope. Constants or Variables which have a global scope can be accessible anywhere globally outside our function in our JavaScript code.

NOTE: Variables or constants declared in our function takes precedence over global variables or constants. It’s best to generally avoid using global variables or constants because they are accessible everywhere globally in our JavaScript code and each function can accidentally change their values and will result to all kinds of bugs and issues in the code.

The Let vs Var Keyword in JavaScript

Before the Introduction of ES6(ES2015), var was the only way to declare variables and constants. With the introduction of ES6, two new keywords let and const were introduced to define variables and constants. Let’s talk about the two different ways in declaring variables in JavaScript: Let and Var.

The let keyword

let allows us to declare variables that are limited to the scope of a block statement, or expression on which it is used. When we declare a variable with the let keyword, that variable is limited to the code block in which it was defined. The let keyword creates a Block-scoped variable.

The Var Keyword

When we declare a variable with the var keyword, the scope isn’t limited to the code block in which it was defined. It is limited to the function in which it was defined. The var keyword creates a Function-scoped variable.

NOTE: if we try to call a variable outside of the code block in which it was defined using the let keyword, a Reference error message will be logged on the console but with the var keyword that variable is not limited to the code block so no error message will be logged on the console.

Highlighting The Major differences between the Let and Var Keywords

Scope: The let keyword creates a Block-scoped variable unlike the var keyword which creates a Function-scoped variable. Re-declaration: The let keyword does not allow the need to redeclare a variable,an error message will be logged on the console if the same variable is redeclared somewhere else in our code. The var keyword allows the flexibility for this to happen without any issue. When we use the var keyword outside of a function, it creates a global variable and attaches that global variable to window object in the browser.

In Browsers, we have a window object which is a complex object with lots of properties and methods. In contrast, when we use a let keyword to declare a global variable, that global variable is not attached to the window object.

If this was helpful in anyway, feel free to comment and like this article so that others can find it easily.

Thank You For Reading this Article, you can keep up with my progress by following me on my social media account.

Twitter: twitter.com/jhimmyofficial