Los últimos tutoriales de desarrollo web
 

JavaScript Errores comunes


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


Accidentalmente Usando el operador de asignación

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

Esto if instrucción devuelve false (como se esperaba), ya que x no es igual a 10:

var x = 0;
if (x == 10)
Inténtalo tú mismo "

Esto if instrucción devuelve true (quizás no tan esperado), porque 10 es verdadero:

var x = 0;
if (x = 10)
Inténtalo tú mismo "

Esto if instrucción devuelve false (quizás no tan esperado), porque 0 es falsa:

var x = 0;
if (x = 0)
Inténtalo tú mismo "

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


Comparación esperando Loose

En comparación regular, tipo de datos no importa. Esta sentencia if devuelve true :

var x = 10;
var y = "10";
if (x == y)
Inténtalo tú mismo "

En comparación estricta, tipo de datos es importante. Esta sentencia if devuelve false :

var x = 10;
var y = "10";
if (x === y)
Inténtalo tú mismo "

Es un error común olvidar que las sentencias switch se utiliza la comparación estricta:

Este interruptor caso mostrará una alerta:

var x = 10;
switch(x) {
    case 10: alert("Hello");
}
Inténtalo tú mismo "

Este interruptor caso no mostrará una alerta:

var x = 10;
switch(x) {
    case "10": alert("Hello");
}
Inténtalo tú mismo "

Suma y confuso concatenación

Además se trata de la suma de números.

La concatenación es sobre la adición de cadenas.

En JavaScript ambas operaciones utilizan el mismo operador +.

Debido a esto, la adición de un número como un número producirá un resultado diferente de la adición de un número como una cadena:

var x = 10 + 5;          // the result in x is 15
var x = 10 + "5";        // the result in x is "105"
Inténtalo tú mismo "

Cuando la adición de dos variables, puede ser difícil anticipar el resultado:

var x = 10;
var y = 5;
var z = x + y;           // the result in z is 15

var x = 10;
var y = "5";
var z = x + y;           // the result in z is "105"
Inténtalo tú mismo "

malentendido flotadores

Todos los números en JavaScript se almacenan como 64-bits números de punto flotante (flotadores).

Todos los lenguajes de programación, incluyendo JavaScript, tienen dificultades con valores de coma flotante precisas:

var x = 0.1;
var y = 0.2;
var z = x + y            // the result in z will not be 0.3
if (z == 0.3)            // this if test will fail
Inténtalo tú mismo "

Para resolver el problema anterior, ayuda a multiplicar y dividir:

Ejemplo

var z = (x * 10 + y * 10) / 10;       // z will be 0.3
Inténtalo tú mismo "

Rompiendo una cadena de JavaScript

JavaScript se permitirá romper una declaración en dos líneas:

Ejemplo 1

var x =
"Hello World!";
Inténtalo tú mismo "

Pero, rompiendo un comunicado en el medio de una cadena no funcionará:

Ejemplo 2

var x = "Hello
World!";
Inténtalo tú mismo "

Se debe utilizar una "barra invertida" si tiene que romper una declaración en una cadena:

Ejemplo 3

var x = "Hello \
World!";
Inténtalo tú mismo "

colocación incorrecta 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 
}
Inténtalo tú mismo "

Fractura de una instrucción de retorno

Es un comportamiento predeterminado JavaScript para cerrar un comunicado automáticamente al final de una línea.

Debido a esto, estos dos ejemplos devolver el mismo resultado:

Ejemplo 1

function myFunction(a) {
    var power = 10 
    return a * power
}
Inténtalo tú mismo "

Ejemplo 2

function myFunction(a) {
    var power = 10;
    return a * power;
}
Inténtalo tú mismo "

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

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

Ejemplo 3

function myFunction(a) {
    var
    power = 10; 
    return a * power;
}
Inténtalo tú mismo "

Pero, ¿qué pasará si se rompe la sentencia de retorno en dos líneas como esta:

Ejemplo 4

function myFunction(a) {
    var
    power = 10; 
    return
    a * power;
}
Inténtalo tú mismo "

La función devolverá indefinido!

¿Por qué? Debido JavaScript piensa que quería decir:

Ejemplo 5

function myFunction(a) {
    var
    power = 10; 
    return;
    a * power;
}
Inténtalo tú mismo "

Explicación

Si una declaración es incompleta como:

var

JavaScript tratará de completar la declaración mediante la lectura de la siguiente línea:

power = 10;

Pero ya que esta declaración es completa:

return

JavaScript se cerrará automáticamente de esta manera:

return;

Esto sucede porque el cierre (final) declaraciones con punto y coma es opcional en JavaScript.

JavaScript se cerrará la instrucción de retorno al final de la línea, ya que es una declaración completa.

Nunca romper una instrucción de retorno.


Acceder a un Array con índices con nombre

Muchos lenguajes de programación soportan matrices con índices nombrados.

Matrices con índices nombrados se llaman matrices asociativas (o hash).

JavaScript no es compatible con matrices de índices con nombre.

En JavaScript, matrices usan índices numerados:

Ejemplo

var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;         // person.length will return 3
var y = person[0];             // person[0] will return "John"
Inténtalo tú mismo "

En JavaScript, objetos utilizan índices nombrados.

Si se utiliza un índice llamado, cuando se accede a una matriz, JavaScript va a 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 incorrectas:

Ejemplo:

var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length;         // person.length will return 0
var y = person[0];             // person[0] will return undefined
Inténtalo tú mismo "

Poniendo fin a una definición de la matriz con una coma

Incorrecto:

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

Algunos motores de JSON y JavaScript fracasarán, o comportarse de forma inesperada.

Correcto:

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

Poniendo fin a una definición de objeto con una coma

Incorrecto:

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

Algunos motores de JSON y JavaScript fracasarán, o comportarse de forma inesperada.

Correcto:

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

Indefinido no es nulo

Con JavaScript, es nula para los objetos, sin definir es el caso de variables, propiedades y métodos.

Para ser nula, un objeto tiene que ser definido, de lo contrario será indefinido.

Si desea probar si existe un objeto, esto generará un error si el objeto no está definido:

Incorrecto:

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

Debido a esto, debe probar typeof () en primer lugar:

Correcto:

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

Esperando Ámbito de nivel de bloque

JavaScript no crea un nuevo ámbito para cada bloque de código.

Es cierto en muchos lenguajes de programación, pero no es cierto en JavaScript.

Es un error común, entre los nuevos desarrolladores de JavaScript, para creer que este código devuelve undefined:

Ejemplo

for (var i = 0; i < 10; i++) {
    // some code
}
return i;
Inténtalo tú mismo "