What is Shadowing in JavaScript

What is Shadowing in JavaScript

In JavaScript, shadowing occurs when a variable declared within a certain scope has the same name as a variable declared in an outer scope. The inner variable "shadows" the outer one, effectively hiding it within that specific scope. This can sometimes lead to confusion and unintended behavior if not handled carefully.

Here's an example to illustrate variable shadowing:

let x = 10; // Outer variable

function exampleFunction() {
  let x = 20; // Inner variable, shadows the outer variable within this function scope
  console.log(x); // Output: 20
}

exampleFunction();

console.log(x); // Output: 10, accessing the outer variable outside the function

In this example, the variable x declared inside the exampleFunction function is separate from the x declared outside the function. The inner variable shadows the outer one within the function's scope. When you access x inside the function, it refers to the inner variable with a value of 20. Outside the function, the outer variable with a value of 10 is accessible.

Shadowing can lead to unexpected behavior, especially if you're not aware of the existence of an outer variable with the same name. It's generally good practice to avoid variable shadowing unless there's a clear reason for doing so. To minimize the risk of unintentional shadowing and improve code readability, you can use different variable names or use block-scoped variables with let or const when appropriate.