JavaScript Scope guide with code example

 


JavaScript Scope:

JavaScript has two types of scope: global scope and local scope. The scope defines the visibility of variables and functions in your code. Understanding scope is crucial for writing clean and organized code.

Global Scope:

In JavaScript, variables declared outside of a function have global scope. This means they can be accessed from anywhere in the code, including within functions.

javascript
let x = 10; // global variable function foo() { console.log(x); // access global variable } foo(); // output: 10

In this example, x is a global variable and can be accessed from within the foo() function.

Local Scope:

Variables declared inside a function have local scope. This means they can only be accessed from within the function.

javascript
function bar() { let y = 20; // local variable console.log(y); // access local variable } bar(); // output: 20 console.log(y); // ReferenceError: y is not defined

In this example, y is a local variable and can only be accessed from within the bar() function.

Block Scope:

Starting with ECMAScript 6 (ES6), JavaScript introduced block scope. Block scope is a new way of declaring variables with the let and const keywords, which limit the visibility of the variable to the current block.

javascript
if (true) { let z = 30; // block-scoped variable console.log(z); // access block-scoped variable } console.log(z); // ReferenceError: z is not defined

In this example, z is a block-scoped variable and can only be accessed from within the if block.

Function Scope:

Before ES6, JavaScript had only two types of scope: global scope and function scope. Function scope is when variables are declared inside a function and can only be accessed from within the function.

javascript
function baz() { let a = 40; // function-scoped variable console.log(a); // access function-scoped variable } baz(); // output: 40 console.log(a); // ReferenceError: a is not defined

In this example, a is a function-scoped variable and can only be accessed from within the baz() function.

Nested Scope:

JavaScript allows for nested scope, where one scope can contain another scope.

javascript
let b = 50; // global variable function outer() { let c = 60; // local variable in outer scope function inner() { let d = 70; // local variable in inner scope console.log(b, c, d); // access variables in outer and inner scope } inner(); } outer(); // output: 50 60 70

In this example, b is a global variable, c is a local variable in the outer() function, and d is a local variable in the inner() function. The inner() function can access all three variables because it is nested within the outer() function.

Lexical Scope:

JavaScript uses lexical scoping, which means that the visibility of variables is determined by their location in the code. Variables defined in an outer scope are visible in the inner scope, but the opposite is not true.

javascript
let e = 80; // global variable function outerFunc() { let e = 90; // local variable in outerFunc scope function innerFunc() { console.log(e); // access local variable in outerFunc scope } innerFunc(); } outerFunc(); // output: 90
Post a Comment (0)
Previous Post Next Post