JavaScript
Explica cómo un binding interior puede ocultar otro exterior, la diferencia con reasignar o redeclarar y los errores que causa el shadowing accidental.
El shadowing ocurre cuando un scope interior declara un binding con el mismo nombre que uno exterior. Mientras el binding interior esté visible, oculta al exterior.
const status = "global";
function showStatus() {
const status = "local";
console.log(status);
}
showStatus(); // "local"
console.log(status); // "global"La resolución comienza en el scope actual.
const role = "viewer";
function openPanel() {
const role = "admin";
console.log(role);
}Dentro de openPanel, JavaScript encuentra primero el binding local role y deja de buscar hacia fuera.
let count = 0;
function increment() {
count++;
}Aquí la función encuentra el binding exterior y lo reasigna.
En cambio:
let count = 0;
function increment() {
let count = 0;
count++;
}La segunda función crea un binding local nuevo. El count exterior permanece en 0.
const message = "outside";
{
const message = "inside";
console.log(message);
}
console.log(message);Resultado:
inside
outsideconst currency = "COP";
function formatPrice(value, currency) {
return `${value} ${currency}`;
}
formatPrice(50000, "USD");El parámetro currency oculta al binding exterior dentro de la función.
let total = 0;
for (const order of orders) {
const total = order.items.reduce(
(sum, item) => sum + item.price,
0,
);
}
console.log(total); // 0El total del bloque es distinto al exterior. Si la intención era acumular el resultado general, el shadowing produce un error lógico.
Una versión correcta:
let total = 0;
for (const order of orders) {
const orderTotal = order.items.reduce(
(sum, item) => sum + item.price,
0,
);
total += orderTotal;
}const price = 100;
{
console.log(price); // ReferenceError
const price = 200;
}El bloque ya contiene una declaración local llamada price. Ese binding oculta al exterior desde el comienzo del bloque, pero permanece sin inicializar hasta su declaración.
Esto es una redeclaración inválida en el mismo scope:
const user = "Nicolás";
const user = "Nico"; // SyntaxErrorEsto es shadowing válido en scopes diferentes:
const user = "Nicolás";
function example() {
const user = "Nico";
}let value = 10;
{
var value = 20; // SyntaxError
}var pertenece al scope de función o script, por lo que chocaría con el let exterior del mismo entorno relevante.
La dirección contraria sí puede crear un binding de bloque:
var value = 10;
{
let value = 20;
console.log(value); // 20
}
console.log(value); // 10Un nombre local puede ocultar constructores, objetos o funciones globales.
function parseInput(String) {
return String(value);
}Aquí el parámetro String oculta al constructor global String.
Otros nombres que conviene no ocultar sin una razón clara incluyen:
ArrayObjectPromiseDateJSONMathconsoleundefinedconst user = { id: "user-1" };
users.forEach((user) => {
console.log(user.id);
});El parámetro del callback oculta al user exterior. Una opción más clara puede ser:
users.forEach((currentUser) => {
console.log(currentUser.id);
});let total = 0;
for (const order of orders) {
const orderTotal = calculateOrderTotal(order);
total += orderTotal;
}const users = await getUsers();
function transformUsers(sourceUsers) {
// ...
}Reglas como no-shadow pueden detectar nombres interiores que ocultan bindings exteriores.
data, result o value en muchos niveles.var interactúa de forma distinta con los scopes de bloque.¿Qué imprime este código?
let value = 1;
function example(value) {
value += 1;
console.log(value);
}
example(10);
console.log(value);11
1El parámetro value oculta al binding exterior. La reasignación ocurre únicamente sobre el parámetro local.
Hoisting explica en qué estado existen las declaraciones antes de que la ejecución alcance la línea donde fueron escritas.