How does variable shadowing work in JavaScript?

Can you explain what variable shadowing is in JavaScript?

Sure! Variable shadowing occurs when a variable declared in a certain scope has the same name as a variable in an outer scope. The inner variable 'shadows' the outer one.

Can you give me an example of variable shadowing?

Of course! Here's a simple example:

let x = 10;
function example() {
    let x = 5; // This x shadows the outer x
    console.log(x); // Outputs: 5
}
example();
console.log(x); // Outputs: 10

What happens if I try to access the outer variable inside the function?

If you try to access the outer variable inside the function, it will refer to the inner variable instead. To access the outer variable, you can use the window object in a browser environment or avoid naming conflicts.

Are there any best practices to avoid variable shadowing?

Yes! To avoid variable shadowing, use unique variable names, especially in nested functions, and consider using block scope with let and const.