Errores comunes de JavaScript
Este capítulo señala algunos errores comunes de JavaScript.
Uso accidental del operador de asignación
Los programas de JavaScript pueden generar resultados inesperados si un programador usa accidentalmente un operador de asignación ( =), en lugar de un operador de comparación ( ==) en una declaración if.
Esta ifdeclaración devuelve false(como se esperaba) porque x no es igual a 10:
let x = 0;
if (x == 10)
Esta ifdeclaración devuelve true(quizás no como se esperaba), porque 10 es verdadero:
let x = 0;
if (x = 10)
Esta ifdeclaración devuelve false(tal vez no como se esperaba), porque 0 es falso:
let x = 0;
if (x = 0)
Una asignación siempre devuelve el valor de la asignación.
Esperando una comparación suelta
En la comparación regular, el tipo de datos no importa. Esta ifdeclaración devuelve verdadero:
let x = 10;
let y = "10";
if (x == y)
En comparación estricta, el tipo de datos sí importa. Esta ifdeclaración devuelve falso:
let x = 10;
let y = "10";
if (x === y)
Es un error común olvidar que switchlas declaraciones usan una comparación estricta:
Esto case switchmostrará una alerta:
let x = 10;
switch(x) {
case 10: alert("Hello");
}
Esto case switchno mostrará una alerta:
let x = 10;
switch(x) {
case "10": alert("Hello");
}
Adición y concatenación confusas
La suma consiste en sumar números .
La concatenación consiste en agregar cadenas .
En JavaScript, ambas operaciones usan el mismo +operador.
Debido a esto, agregar un número como número producirá un resultado diferente a agregar 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"
Al sumar dos variables, puede ser 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"
Flotadores malentendidos
Todos los números en JavaScript se almacenan como números de punto flotante de 64 bits (Flotantes).
Todos los lenguajes de programación, incluido JavaScript, tienen dificultades con los 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
Para resolver el problema anterior, es útil multiplicar y dividir:
Ejemplo
let z = (x * 10 + y * 10) / 10; // z will be 0.3
Romper una cadena de JavaScript
JavaScript le permitirá dividir una declaración en dos líneas:
Ejemplo 1
let x =
"Hello World!";
Pero romper una declaración en medio de una cadena no funcionará:
Ejemplo 2
let x = "Hello
World!";
Debe usar una "barra invertida" si debe dividir una declaración en una cadena:
Ejemplo 3
let x = "Hello \
World!";
Extraviar el punto y coma
Debido a un punto y coma fuera de lugar, este bloque de código se ejecutará independientemente del valor de x:
if (x == 19);
{
// code block
}
Romper una declaración de devolución
Es un comportamiento predeterminado de JavaScript cerrar una declaración automáticamente al final de una línea.
Debido a esto, estos dos ejemplos devolverán el mismo resultado:
Ejemplo 1
function myFunction(a) {
let power = 10
return a * power
}
Ejemplo 2
function myFunction(a) {
let power = 10;
return a * power;
}
JavaScript también le permitirá dividir una declaración en dos líneas.
Debido a esto, el ejemplo 3 también devolverá el mismo resultado:
Ejemplo 3
function myFunction(a) {
let
power = 10;
return a * power;
}
Pero, ¿qué sucederá si divide la declaración de devolución en dos líneas como esta?
Ejemplo 4
function myFunction(a) {
let
power = 10;
return
a * power;
}
¡ La función volverá undefined!
¿Por qué? Porque JavaScript pensó que querías decir:
Ejemplo 5
function myFunction(a) {
let
power = 10;
return;
a * power;
}
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 las declaraciones de cierre (finalización) con punto y coma son opcionales en JavaScript.
JavaScript cerrará la declaración de devolución al final de la línea, porque es una declaración completa.
Nunca rompa una declaración de devolución.
Acceso 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 matrices asociativas (o hashes).
JavaScript no admite matrices con índices con nombre.
En JavaScript, las matrices usan í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"
En JavaScript, los objetos usan í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 las propiedades de la matriz producirán resultados indefinidos o 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
Definiciones finales con una coma
Las comas finales en la definición de objeto y matriz 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 se bloqueará.
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 undefined.
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.
You can test if an object exists by testing if the type is undefined:
Example:
if (typeof myObj === "undefined")
But you cannot test if an object is null, because this will throw an error if the
object is undefined:
Incorrect:
if (myObj === null)
To solve this problem, you must test if an object is not null,
and not undefined.
But this can still throw an error:
Incorrect:
if (myObj !== null && typeof myObj
!== "undefined")
Because of this, you must test for not undefined before you can
test for not null:
Correct:
if (typeof myObj !== "undefined" && myObj !== null)