"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > ⚠️ Los peligros ocultos de usar `var` en JavaScript: por qué es hora de seguir adelante

⚠️ Los peligros ocultos de usar `var` en JavaScript: por qué es hora de seguir adelante

Publicado el 2024-11-07
Navegar:494

⚠️ The Hidden Dangers of Using `var` in JavaScript: Why It’s Time to Move On

La palabra clave var ha sido la forma predeterminada de declarar variables en JavaScript durante muchos años. Sin embargo, tiene varias peculiaridades y dificultades que pueden provocar un comportamiento inesperado en el código. Las alternativas modernas como let y const resuelven muchos de estos problemas, lo que las convierte en la opción preferida para declarar variables en la mayoría de los casos.


1️⃣ Izado: ¡var declara variables antes de que te des cuenta!

? Explicación:

En JavaScript, las declaraciones var se elevan a la parte superior de su alcance, lo que significa que se inicializan como indefinidas incluso si la declaración aparece más adelante en el código. Esto puede provocar un comportamiento confuso y provocar errores difíciles de detectar.

? Puntos clave:

  • ? Izado en acción: Las declaraciones de variables se mueven a la parte superior del alcance, pero sus asignaciones no.
  • ? Valores no definidos inesperados: Las variables se pueden usar antes de que se les asigne un valor, lo que genera resultados indefinidos no deseados.

? Ejemplo:

console.log(myVar);  // undefined (hoisted but not initialized)
var myVar = 10;
console.log(myVar);  // 10

? Comentario: La variable myVar se eleva a la parte superior del alcance pero inicialmente no está definida, lo que puede causar confusión en su código.

? Arreglar:

  • ? Utilice let o const: Estas palabras clave no se elevan de la misma manera que var, lo que ayuda a prevenir este problema.

? Solución de ejemplo:

console.log(myLet);  // ReferenceError: myLet is not defined
let myLet = 10;
console.log(myLet);  // 10

? Comentario: El uso de let evita que se acceda a la variable antes de declararla, lo que reduce la confusión y los posibles errores.


2️⃣ Alcance de la función frente al alcance del bloque: ¡var puede filtrarse de los bloques!

? Explicación:

Uno de los principales defectos de var es que tiene un alcance de función, no de alcance de bloque. Esto significa que las variables declaradas dentro de bucles, sentencias if u otros bloques no se limitan a ese bloque, sino que se puede acceder a ellas fuera de él, lo que puede provocar errores.

? Puntos clave:

  • ? Alcance de la función: var tiene como alcance la función más cercana, incluso si se declara dentro de un bloque como un bucle o una declaración if.
  • ? Fugas de variables: Esto puede provocar que las variables se filtren involuntariamente fuera de los bloques, lo que provoca un comportamiento impredecible.

? Ejemplo:

if (true) {
  var blockVar = "I’m accessible outside this block";
}
console.log(blockVar);  // "I’m accessible outside this block"

? Comentario: Aunque blockVar se declaró dentro del bloque if, todavía se puede acceder a él fuera del bloque porque var tiene un ámbito de función, no un ámbito de bloque.

? Arreglar:

  • ? Usar let o const: Estas palabras clave tienen alcance de bloque, lo que significa que solo se puede acceder a ellas dentro del bloque donde están definidas.

? Solución de ejemplo:

if (true) {
  let blockLet = "I’m only accessible inside this block";
}
console.log(blockLet);  // ReferenceError: blockLet is not defined

? Comentario: El uso de let o const garantiza que las variables permanezcan confinadas a sus respectivos bloques, evitando fugas de alcance.


3️⃣ Problemas de redeclaración: ¡var te permite declarar la misma variable dos veces!

? Explicación:

Con var, puedes volver a declarar accidentalmente la misma variable en el mismo ámbito, lo que puede sobrescribir el valor anterior. Esto puede provocar errores no intencionados, especialmente en bases de código más grandes donde los nombres de las variables pueden reutilizarse por error.

? Puntos clave:

  • ? Redeclaración de variables: var le permite redeclarar una variable dentro del mismo alcance, sobrescribiendo potencialmente los valores existentes.
  • ? Sobrescrituras no deseadas: Esto puede causar errores que son difíciles de detectar, especialmente en funciones grandes o complejas.

? Ejemplo:

var name = "Alice";
var name = "Bob";  // No error, overwrites the previous value
console.log(name);  // "Bob"

? Comentario: La segunda declaración de nombre sobrescribe la primera, lo que puede causar errores en el código.

? Arreglar:

  • ? Utilice let o const: Estas palabras clave le impiden volver a declarar variables en el mismo ámbito, lo que reduce el riesgo de sobrescrituras no deseadas.

? Solución de ejemplo:

let name = "Alice";
let name = "Bob";  // SyntaxError: Identifier 'name' has already been declared

? Comentario: Usar let o const le ayuda a evitar volver a declarar variables y garantiza que su código siga siendo predecible.


4️⃣ var en bucles: potencial de errores en el código asincrónico

? Explicación:

Cuando se usa var en bucles, el valor de la variable puede cambiar de formas inesperadas, especialmente cuando se trabaja con código asincrónico. Dado que var tiene un ámbito de función y no de bloque, la variable de bucle puede contener un valor inesperado cuando se accede a ella dentro de devoluciones de llamada asincrónicas.

? Puntos clave:

  • ? Variables de bucle: Las variables declaradas con var dentro de los bucles no se limitan al bloque de bucle, lo que genera posibles errores cuando se accede a ellas más tarde.
  • Problemas asincrónicos: Esto puede causar errores en operaciones asincrónicas como setTimeout o promesas, donde la variable de bucle puede tener un valor inesperado.

? Ejemplo:

for (var i = 0; i  console.log(i), 1000);  // Prints: 3, 3, 3 (unexpected)
}

? Comentario: Debido a que var no tiene un alcance de bloque, la variable de bucle i se comparte en todas las iteraciones y su valor final (3) se usa en cada devolución de llamada de setTimeout.

? Arreglar:

  • Usar let: La palabra clave let tiene un alcance de bloque, lo que garantiza que cada iteración del bucle obtenga su propio valor independiente de la variable del bucle.

? Solución de ejemplo:

for (let i = 0; i  console.log(i), 1000);  // Prints: 0, 1, 2 (as expected)
}

? Comentario: El uso de let crea una nueva instancia de i para cada iteración, solucionando el problema de devolución de llamada asincrónica y garantizando que se impriman los valores correctos.


5️⃣ var y cierres: una fuente de confusión

? Explicación:

Los cierres pueden provocar un comportamiento inesperado cuando se combinan con var. Dado que var tiene un alcance de función, su valor puede cambiar de maneras que no se esperan cuando un cierre lo captura.

? Puntos clave:

  • ? Cierres en JavaScript: Un cierre es una función que recuerda su alcance circundante incluso después de que la función externa haya terminado de ejecutarse.
  • ? Problemas de variables compartidas: Cuando se usa var dentro de un cierre, la variable capturada puede compartirse entre todos los cierres, lo que genera un comportamiento inesperado.

? Ejemplo:

function createFunctions() {
  var funcs = [];
  for (var i = 0; i 



? Comentario: Todos los cierres capturan el mismo valor de i porque var tiene un alcance de función, lo que genera resultados inesperados.

? Arreglar:

  • ? Usar let: Al usar let, cada cierre captura una nueva instancia de la variable de bucle, resolviendo el problema.

? Solución de ejemplo:

function createFunctions() {
  var funcs = [];
  for (let i = 0; i 



? Comentario: Con let, cada cierre obtiene su propia copia de i, lo que soluciona el problema y garantiza que se impriman los valores esperados.


? Conclusión: Es hora de decir adiós a var

Si bien var era la forma original de declarar variables en JavaScript, tiene varias deficiencias que la convierten en una mala elección en el desarrollo moderno de JavaScript. La introducción de let y const proporciona un mejor alcance, reduce el riesgo de errores y hace que su código sea más predecible. Para escribir JavaScript más limpio y fácil de mantener, es hora de dejar var y adoptar let y const.

Declaración de liberación Este artículo se reproduce en: https://dev.to/dharamgfx/the-hidden-dangers-of-using-var-in-javascript-why-its-time-to-move-on-2jgm?1Si hay alguno infracción, comuníquese con [email protected] para eliminar
Último tutorial Más>

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3