Errores de JavaScript


Tabla de contenido

    Mostrar tabla de contenidos


Este capítulo señala algunos errores comunes de JavaScript.


Usar accidentalmente el operador de asignación

Los programas JavaScript pueden generar resultados inesperados si un programador utiliza accidentalmente un operador de asignación (=), en lugar de un operador de comparación (==) en una declaración if.

Esta declaración if devuelve false (como esperado) porque x es no igual a 10:

let x = 0;
if (x == 10) 

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comparisons</h2>

<p>This returns false (as expected) because x is not equal to 10:</p>

<p id="demo"></p>

<script>
let x = 0;
document.getElementById("demo").innerHTML = Boolean(x == 10);
</script>

</body>
</html>

Esta declaración if devuelve true (tal vez no como se esperaba), porque 10 es verdadero:

let x = 0;
if (x = 10)

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>This returns true (maybe not as expected), because 10 is true:</p>

<p id="demo"></p>

<script>
let x = 0;
document.getElementById("demo").innerHTML = Boolean(x = 10);
</script>

</body>
</html>

Esta declaración if devuelve false (tal vez no como se esperaba), porque 0 es FALSO:

let x = 0;
if (x = 0)

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>This if statement returns false (maybe not as expected), because 0 is false:</p>

<p id="demo"></p>

<script>
let x = 0;
document.getElementById("demo").innerHTML = Boolean(x = 0);
</script>

</body>
</html>

Una asignación siempre devuelve el valor de la asignación.


Esperando una comparación vaga

En una comparación habitual, el tipo de datos no importa. Esta declaración if devuelve verdadero:

let x = 10;
let y = "10";
if (x == y) 

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>In regular comparison, data type does not matter. This if statement returns true:</p>

<p id="demo"></p>

<script>
let x = 10;
let y = "10";
document.getElementById("demo").innerHTML = Boolean(x == y);
</script>

</body>
</html>

En comparación estricta, el tipo de datos sí importa. Esta declaración if devuelve falso:

let x = 10;
let y = "10";
if (x === y) 

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>In strict comparison, data type does matter. This if statement returns false:</p>

<p id="demo"></p>

<script>
let x = 10;
let y = "10";
document.getElementById("demo").innerHTML = Boolean(x === y);
</script>

</body>
</html>

Es un error común olvidar que las sentencias switch utilizan instrucciones estrictas. comparación:

Este cambio de caso mostrará una alerta:

let x = 10;
switch(x) {
  case 10: alert("Hello");
    } 

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>It is a common mistake to forget that switch statements use strict comparison.</p>
<p>This will work:</p>

<p id="demo"></p>

<script>
let x = 10;
switch(x) {
  case 10: document.getElementById("demo").innerHTML = "Hello";
}
</script>

</body>
</html>

Este cambio de caso no mostrará una alerta:

let x = 10;
switch(x) {
  case "10": alert("Hello");
    } 

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>It is a common mistake to forget that switch statements use strict comparison.</p>
<p>This will not work:</p>

<p id="demo"></p>

<script>
let x = 10;
switch(x) {
  case "10": document.getElementById("demo").innerHTML = "Hello";
}
</script>

</body>
</html>


Suma y concatenación confusas

La suma consiste en sumar números.

La concatenación consiste en agregar cadenas.

En JavaScript, ambas operaciones utilizan el mismo operador +.

Debido a esto, sumar un número como número producirá un resultado diferente. resultado de sumar un número como una cadena:

let x = 10;
x = 10 + 5;       // 
    Now x is 15

let y = 10;
y += "5";        
    // Now y is "105"

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>Adding a number as a number produces a different result from adding a number as a string:</p>

<p id="demo"></p>

<script>
let y = 10
y += "5";
document.getElementById("demo").innerHTML = y;
</script>

</body>
</html>

Al sumar dos variables, puede resultar difícil anticipar el resultado:

let x = 10;
let y = 5;
let z = x + y;     // Now z is 15

let x = 10;
let y = "5";
let z = x + y;     // Now z is "105"

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>Adding a number as a number produces a different result from adding a number as a string:</p>

<p id="demo"></p>

<script>
let x = 10;
let y = "5";
let z = x + y;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

Malentendidos sobre flotadores

Todos los números en JavaScript se almacenan como números de coma flotante de 64 bits. (Flotadores).

Todos los lenguajes de programación, incluido JavaScript, tienen dificultades con valores precisos de punto flotante:

let x = 0.1;
let y = 0.2;
let z = x + y            
    // the result in z will not be 0.3

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>All programming languages, including JavaScript, have difficulties with precise floating point values:</p>

<p id="demo"></p>

<script>
let x = 0.1;
let y = 0.2;
let z = x + y;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

Para resolver el problema anterior, es útil multiplicar y dividir:

Ejemplo

let z = (x * 10 + y * 10) / 10;       // z will be 0.3

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>All programming languages, including JavaScript, have difficulties with precise floating point values.</p>
<p>To solve the problem, it helps to multiply and divide:</p>

<p id="demo"></p>

<script>
let x = 0.1;
let y = 0.2;
let z = (x * 10 + y *10) / 10;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>


Rompiendo una cadena de JavaScript

JavaScript le permitirá dividir una declaración en dos líneas:

Ejemplo 1

let x =
"Hello World!";

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>Breaking a JavaScript Statement</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Hello World!";
</script>

</body>
</html>

Pero romper una declaración en medio de una cadena no funcionará:

Ejemplo 2

let x = "Hello
World!";

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>
<p>Breaking a statement in the middle of a string will not work:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello 
World!";
</script>

</body>
</html>

Debe utilizar una "barra invertida" si debe dividir una declaración en una cadena:

Ejemplo 3

let x = "Hello \
World!";

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>You must use a "backslash" if you must break a statement in a string:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello \
World!";
</script>

</body>
</html>

Colocar mal el punto y coma

Debido a un punto y coma mal colocado, este bloque de código se ejecutará independientemente de el valor de x:

if (x == 19);
{
    // code block  
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p id="demo"></p>

<script>
let x = 5;
if (x == 19);
{
document.getElementById("demo").innerHTML = "Hello";
}
</script>

</body>
</html>

Romper una declaración de devolución

Es un comportamiento predeterminado de JavaScript cerrar una declaración automáticamente en el final de una línea.

Por este motivo, estos dos ejemplos arrojarán el mismo resultado:

Ejemplo 1

function myFunction(a) {
    let power = 10  
  return a * power
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>This example will return a correct result:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
  let power = 10
  return a * power
}
</script>

</body>
</html>

Ejemplo 2

function myFunction(a) {
    let power = 10;
  return a * power;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>This example will return a correct result:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
  let power = 10;
  return a * power;
}
</script>

</body>
</html>

JavaScript también le permitirá dividir una declaración en dos líneas.

Debido a esto, el ejemplo 3 también arrojará el mismo resultado:

Ejemplo 3

function myFunction(a) {
    let
  power = 10;  
  return a * power;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>This example will return a correct result:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
  let
  power = 10;
  return a * power;
}
</script>

</body>
</html>

Pero, ¿qué pasará si divides la declaración de devolución en dos líneas como este:

Ejemplo 4

function myFunction(a) {
    let
  power = 10;  
  return
  a * power;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>This example will return undefined:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
  let
  power = 10;
  return
  a * power;
}
</script>

</body>
</html>

¡La función devolverá undefinido!

¿Por qué? Porque JavaScript pensó que querías decir:

Ejemplo 5

function myFunction(a) {
    let
  power = 10;  
  return;
  a * power;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>This example will return undefined:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
  let
  power = 10;
  return;
  a * power;
}
</script>

</body>
</html>

Explicación

Si una declaración está incompleta como:

let

JavaScript intentará completar la declaración leyendo la siguiente línea:

 power = 10;

Pero como esta declaración está completa:

 return

JavaScript lo cerrará automáticamente así:

 return;

Esto sucede porque cerrar (finalizar) declaraciones con punto y coma es opcional en JavaScript.

JavaScript cerrará la declaración de devolución al final de la línea, porque es una declaración completa.

Nunca rompas una declaración de devolución.


Acceder a matrices con índices con nombre

Muchos lenguajes de programación admiten matrices con índices con nombre.

Las matrices con índices con nombre se denominan asociativas. matrices (o hashes).

JavaScript no admite matrices con índices con nombre.

En JavaScript, las matrices utilizan índices numerados:

Ejemplo

const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length;       
 // person.length will return 3
person[0];           
 // person[0] will return "John"

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p id="demo"></p>

<script>
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46; 
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>

</body>
</html>

En JavaScript, los objetos utilizan índices con nombre.

Si usa un índice con nombre, al acceder a una matriz, JavaScript redefinirá la matriz a un objeto estándar.

Después de la redefinición automática, los métodos y propiedades de matriz producirán valores indefinidos o resultados incorrectos:

Ejemplo :

const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length;      // person.length will 
 return 0
person[0];          
 // person[0] will return undefined

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p>If you use a named index when accessing an array, JavaScript will redefine the array to a standard object, and some array methods and properties will produce undefined or incorrect results.</p>

<p id="demo"></p>

<script>
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46; 
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>

</body>
</html>


Definiciones finales con coma

Las comas finales en la definición de objetos y matrices son legales en ECMAScript 5.

Ejemplo de objeto:

person = {firstName:"John", lastName:"Doe", age:46,}

Ejemplo de matriz:

points = [40, 100, 1, 5, 25, 10,];

ADVERTENCIA !!

Internet Explorer 8 fallará.

JSON no permite comas finales.

JSON:

person = {"firstName":"John", "lastName":"Doe", "age":46}

JSON:

points = [40, 100, 1, 5, 25, 10];

Indefinido no es nulo

Los objetos, variables, propiedades y métodos de JavaScript pueden ser indefinidos.

Además, los objetos JavaScript vacíos pueden tener el valor null.

Esto puede hacer que sea un poco difícil probar si un objeto está vacío.

Puedes probar si un objeto existe probando si el tipo es undefinido:

Ejemplo :

if (typeof myObj === "undefined") 

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>To test if an object does not exist, test if the type is undefined:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = typeof myObj === "undefined";
</script>

</body>
</html>

Pero no puedes probar si un objeto es null, porque esto arrojará un error si el el objeto es indefinido:

Incorrecto:

if (myObj === null)  

Para resolver este problema, debes probar si un objeto no es nulo, y no undefinido.

Pero esto aún puede generar un error:

Incorrecto:

if (myObj !== null && typeof myObj 
  !== "undefined")  

Debido a esto, debes comprobar si no es undefinido antes de poder prueba para no null:

Correcto :

if (typeof myObj !== "undefined" && myObj !== null) 

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>If you want to test if an object is not null, you must test if it not undefined first.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = typeof myObj !== "undefined" && myObj !== null;
</script>

</body>
</html>