JavaScript Scope

What is scope in JavaScript?

Scope in JavaScript refers to the visibility or accessibility of variables and functions in certain parts of the code. It determines where variables can be accessed and modified within the program.

What are the different types of scope in JavaScript?

There are three main types of scope in JavaScript:

Global Scope: Variables declared outside any function are in the global scope and can be accessed from anywhere in the code.
Function Scope: Variables declared within a function are only accessible within that function. They are not visible outside the function.
Block Scope: Variables declared with let and const within a block (e.g., within curly braces) are only accessible within that block.

Can you provide an example of global scope?


let globalVariable = 'I am global!';

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

showGlobal(); // Outputs: I am global!
console.log(globalVariable); // Accessible

What is function scope? Can you provide an example?

Function scope means that variables declared inside a function are not accessible outside of that function.


function myFunction() {
  let localVariable = 'I am local!';
  console.log(localVariable); // Accessible inside the function
}

myFunction(); // Outputs: I am local!
// console.log(localVariable); // ReferenceError: localVariable is not defined

What is block scope? Can you provide an example?

Block scope is created by using curly braces (e.g., in if statements, loops, etc.). Variables declared with let and const inside a block are only accessible within that block.


if (true) {
  let blockVariable = 'I am in a block!';
  console.log(blockVariable); // Accessible inside the block
}

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

What is the difference between `var`, `let`, and `const` in terms of scope?

The differences are as follows:

var: Function-scoped or globally scoped if declared outside a function. Can be re-declared and updated.
let: Block-scoped. Can be updated but not re-declared in the same block.
const: Block-scoped. Cannot be updated or re-declared and must be initialized at declaration.


// Example of var
var x = 1;
if (true) {
  var x = 2; // Same variable
  console.log(x); // 2
}
console.log(x); // 2

// Example of let
let y = 1;
if (true) {
  let y = 2; // Different variable
  console.log(y); // 2
}
console.log(y); // 1

// Example of const
const z = 1;
// z = 2; // TypeError: Assignment to constant variable

What is the scope chain in JavaScript?

The scope chain is the mechanism through which JavaScript resolves variable names. When a variable is accessed, JavaScript first checks the local scope, then the outer scopes, and continues up to the global scope.


let outerVar = 'I am outside!';

function outerFunction() {
  let innerVar = 'I am inside!';

  function innerFunction() {
    console.log(innerVar); // Accessible
    console.log(outerVar); // Accessible
  }
  innerFunction();
}

outerFunction(); // Outputs: I am inside!, I am outside!

How do closures relate to scope in JavaScript?

A closure is a function that retains access to its lexical scope, even when the function is executed outside that scope. Closures allow for data encapsulation and can create private variables.


function makeCounter() {
  let count = 0; // Private variable

  return function() {
    count++;
    return count; // Accessing the private variable
  };
}

const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2

What is the concept of "hoisting" in JavaScript?

Hoisting is a JavaScript mechanism where variable and function declarations are moved to the top of their containing scope during the compile phase. This means you can use variables and functions before they are declared in the code.


// Function hoisting
console.log(myFunction()); // Outputs: 'Hello!'

function myFunction() {
  return 'Hello!';
}

// Variable hoisting
console.log(myVar); // Outputs: undefined
var myVar = 'I am hoisted!';

How can you prevent variable name conflicts in JavaScript?

You can prevent variable name conflicts by:

Using let and const to limit the scope of variables.
Encapsulating variables within functions or blocks.
Using modules to create separate scopes for different parts of your code.
Using unique naming conventions or prefixes for variables.

Ads

‹ JavaScript Interview