?? Mastering JavaScript Scopes: From Basics to Advanced Patterns! ??

https://basescripts.com/mastering-javascript-scopes-from-basics-to-advanced-patterns

Exercise 1: Understanding Global Scope

Problem: Declare a global variable myGlobal and set its value to 10. Then, create a function printGlobal that prints the value of myGlobal to the console.

Explanation: Introduces the concept of global scope, where variables are accessible anywhere in the script.

Code:

let myGlobal = 10;

function printGlobal() {

?console.log(myGlobal);

}

printGlobal(); // Outputs: 10

Exercise 2: Function Scope

Problem: Create a function testScope that declares a variable insideFunction with the value "inside" and logs it to the console, then try to log the same variable outside the function.

Explanation: Demonstrates function scope, where variables declared inside a function are not accessible outside of it.

Code:

function testScope() {

?let insideFunction = "inside";

?console.log(insideFunction); // Outputs: inside

}

testScope();

// console.log(insideFunction); // Uncaught ReferenceError: insideFunction is not defined

Exercise 3: Block Scope

Problem: Inside a function, use a for loop with a block-scoped variable i. After the loop, try to print i.

Explanation: Illustrates block scope, introduced with ES6 let and const, which restrict variable access to the block in which they are declared.

Code:

function testBlockScope() {

?for (let i = 0; i < 5; i++) {

?console.log(i); // Outputs: 0, 1, 2, 3, 4

?}

?// console.log(i); // Uncaught ReferenceError: i is not defined

}

testBlockScope();

Exercise 4: Scope Chain

Problem: Create a nested function where each function declares a variable and the innermost function logs all variables.

Explanation: Demonstrates the scope chain, where inner scopes have access to outer scopes' variables.

Code:

function outer() {

?let outerVar = 'I am from the outer function';

?function middle() {

?let middleVar = 'I am from the middle function';

?function inner() {

?let innerVar = 'I am from the inner function';

?console.log(outerVar, middleVar, innerVar); // Accessible due to scope chain

?}

?inner();

?}

?middle();

}

outer();

Exercise 5: Lexical Scoping

Problem: Create a function that returns another function, which accesses the outer function's variable.

Explanation: Highlights lexical scoping, where a function's scope is defined by where it was declared, not where it is called.

Code:

function outerFunction() {

?let outerVar = 'Hello from the outside!';

?return function innerFunction() {

?console.log(outerVar); // Has access to outerVar due to lexical scope

?};

}

const inner = outerFunction();

inner(); // Outputs: Hello from the outside!

Exercise 6: Closure Scope

Problem: Create a closure that retains and modifies a private counter variable.

Explanation: Shows how closures maintain access to the outer function's scope even after the outer function has returned.

Code:

function createCounter() {

?let counter = 0;

?return {

?increment: function() {

?counter++;

?console.log(counter);

?},

?decrement: function() {

?counter--;

?console.log(counter);

?}

?};

}

const myCounter = createCounter();

myCounter.increment(); // Outputs: 1

myCounter.decrement(); // Outputs: 0

Exercise 7: Immediate Invoked Function Execution (IIFE) for Scope

Problem: Use an IIFE to create a private scope around a block of code that declares and modifies a variable.

Explanation: Demonstrates using an IIFE to limit the scope of variables and prevent polluting the global scope.

Code:

(function() {

?let privateVar = "Secret";

?console.log(privateVar); // Outputs: Secret

})();

// console.log(privateVar); // Uncaught ReferenceError: privateVar is not defined

Exercise 8: Comparing Var and Let

Problem: Inside a function, declare a variable using var in a block (e.g., within a loop) and then access it outside the block.

Explanation: Illustrates the difference between var (function-scoped) and let/const (block-scoped).

Code:

function compareVarAndLet() {

?for (var i = 0; i < 3; i++) {

?// Some code

?}

?console.log(i); // Outputs: 3 because var is function-scoped, not block-scoped

}

compareVarAndLet();

Exercise 9: Hoisting in Scope

Problem: Declare a function and variables using different keywords (var, let, const) and access them before declaration.

Explanation: Demonstrates how JavaScript hoists variable declarations (but not assignments) and how let and const prevent access before actual declaration (temporal dead zone).

Code:

console.log(varVariable); // Outputs: undefined due to hoisting

// console.log(letVariable); // Uncaught ReferenceError due to temporal dead zone

// console.log(constVariable); // Uncaught ReferenceError due to temporal dead zone

var varVariable = "Defined";

let letVariable = "Defined";

const constVariable = "Defined";

Exercise 10: Using Closure to Create Private Methods

Problem: Create a function that acts as a module with private and public methods, utilizing closures to keep certain variables inaccessible from the outside.

Explanation: Explores creating modular code that mimics private methods using closures, which is common in module pattern.

Code:

function myModule() {

?let privateVar = 'I am private';

?return {

?publicMethod: function() {

?console.log('Accessing privateVar from publicMethod:', privateVar);

?}

?};

}

let instance = myModule();

instance.publicMethod(); // Outputs: Accessing privateVar from publicMethod: I am private

// console.log(instance.privateVar); // Undefined, as it's not accessible directly