5 errores fatales de JavaScript para principiantes (y cómo evitarlos)

Por qué JavaScript rompe la cabeza, pero no debería romper la carrera

JavaScript es, al mismo tiempo, el lenguaje de programación más amigable y el más traicionero. Por un lado, escribes console.log('Hello') — y en el navegador aparece el resultado de inmediato. Por otro lado, este mismo código puede mostrar repentinamente undefined, NaN o algo peor, y pasarás una hora buscando un error que se esconde en una sola línea.

En pythonlib.ru sabemos lo importante que es aprender de los errores ajenos. En este artículo analizaremos 5 errores típicos de principiantes en JavaScript que convierten el código en calabaza. Y lo más importante: mostraremos cómo solucionarlos. ¡Allá vamos!

Error n.º 1: El mágico «var» y la falta de comprensión del ámbito

Muchos desarrolladores principiantes que estudian JavaScript usan var para declarar variables. Es una herencia del antiguo estándar ES5 que aún vive en libros de texto de hace una década. Pero var es como un coche viejo sin airbags: se puede conducir, pero ante el primer accidente (léase: bug) sufrirás mucho.

¿Cuál es el problema?

var tiene un ámbito de función, no de bloque. Esto significa que una variable declarada dentro de un if o un for será accesible fuera de ellos.

// Ejemplo: Error con var\nfunction testVar() {\n  if (true) {\n    var x = 10;\n  }\n  console.log(x); // 10 — funciona, aunque x fue declarado dentro de if\n}\n\ntestVar();

Ahora imagina que tienes 1000 líneas de código en tu proyecto. Declaras var i en un bucle, y luego accidentalmente usas la misma variable — obtienes un bug imposible de rastrear.

¿Cómo hacerlo bien?

Usa let y const. Tienen un ámbito de bloque y se comportan de manera predecible.

// Correcto: let y const\nfunction testLet() {\n  if (true) {\n    let y = 20;\n    const z = 30;\n  }\n  console.log(y); // ReferenceError: y is not defined\n}\n\ntestLet();

Consejo: usa siempre const por defecto. Solo si la variable va a ser reasignada, usa let. Deja var en el pasado, como los disquetes.

Error n.º 2: La clave olvidada «this» — el contexto que se pierde

La palabra clave this en JavaScript es como una sorpresa en un huevo de chocolate: nunca sabes lo que va a salir. Los principiantes suelen pensar que this siempre apunta al objeto actual. Pero no es así. this depende de cómo se llama a la función, no de dónde se declara.

Ejemplo clásico: pérdida de contexto en un callback

const user = {\n  name: 'Ana',\n  greet: function() {\n    console.log('Hola, ' + this.name);\n  }\n};\n\nuser.greet(); // Hola, Ana — funciona\n\nsetTimeout(user.greet, 1000); // Hola, undefined — ¡contexto perdido!

¿Por qué sucede esto? Porque setTimeout llama a la función como una función normal, no como un método del objeto. this en este caso apunta al objeto global (en el navegador, window), que no tiene name.

¿Cómo solucionarlo?

Tres formas:

\n
• Función flecha — no crea su propio this, sino que lo toma del contexto externo.
\n
• Método .bind() — vincula el contexto de forma permanente.
\n
• Guardar una referencia a this (método antiguo, mejor no usarlo).
\n

// Solución: función flecha\nconst user = {\n  name: 'Ana',\n  greet: function() {\n    console.log('Hola, ' + this.name);\n  }\n};\n\nsetTimeout(() => user.greet(), 1000); // Hola, Ana\n\n// O con bind\nsetTimeout(user.greet.bind(user), 1000); // Hola, Ana

Error n.º 3: Asincronía — «