contenido 14 de julio de 2014 a las 13.34
   Imprimir artículo
elWebmaster.com

10 errores de Javascript de principiantes


javascript
JavaScript es un lenguaje de fácil aprendizaje, pero para lograr la maestría requiere mucho esfuerzo. Los principiantes suelen cometer algunos errores conocidos que vuelven y muerden cuando menos se lo esperan. Para conocer cuáles son estos errores, no puedes dejar de leer este artículo.

1. Falta de llaves

Una práctica, de la cual los principiantes de JavaScript son a menudo culpables, es omitir llaves después de las declaraciones como if, else, while y for. A pesar de que se permite, debes tener mucho cuidado, ya que esta práctica a menudo puede ocultar los problemas y ser el origen de los errores. Vea el siguiente ejemplo:

Ejemplo:

// Di hola a Gandalf

hello(‘Gandalf’);

function hello(name){

// Este código no entiende lo que la sangría implica!

if(name === undefined)

console.log(‘Please enter a username!’);

fail();

// La siguiente línea nunca es alcanzada:

success(name);

}

function success(name){

console.log(‘Hello, ‘ + name + ‘!’);

}

function fail(){

throw new Error(“Name is missing. Can’t say hello!”);

}

Aunque la llamada fail() tiene sangría y se ve como si perteneciera a la sentencia if, no es así. Siempre se le llama. Así que es una buena práctica siempre rodear bloques de código entre llaves, incluso si sólo hay una declaración de los involucrados.

2. Punto y comas faltantes

Cuando se procesa código JavaScript, hay un proceso conocido como la inserción automática de punto y coma. Como su nombre indica, el analizador es feliz para insertar un punto y coma que falta por ti. El propósito de esta función es hacer más accesible JavaScript y más fácil de escribir por los principiantes. Sin embargo, siempre debe incluir un punto y coma, porque hay peligros en omitirlos. He aquí un ejemplo:

Ejemplo:

// Este código tiene como resultado un error de tipo. Agregando punto y coma se resuelve.

console.log(‘Welcome the fellowship!’)

[‘Frodo’, ‘Gandalf’, ‘Legolas’, ‘Gimli’].forEach(function(name){

hello(name)

})

function hello(name){

console.log(‘Hello, ‘ + name + ‘!’)

}

Debido a que existe una falta de un punto y coma en la línea 3, el analizador asume que el soporte de la apertura de la línea 5 es un intento de acceder a una propiedad mediante la sintaxis de matrices de acceso (ver el error # 8), y no un conjunto independiente, que no es lo que era previsto y los resultados en un error de tipo. La solución es simple, siempre escribir un punto y coma.

Algunos desarrolladores de JavaScript experimentados prefieren dejar de lado un punto y coma, pero son perfectamente conscientes de los errores que esto podría causar y saben cómo prevenirlas.

3. No entender la conversión de tipo

JavaScript es de tipado dinámico. Esto significa que no es necesario especificar un tipo al declarar una nueva variable, y se puede volver a asignar o convertir libremente su valor. Esto hace que JavaScript sea mucho más fácil de escribir en comparación con C # o Java, pero se abren las puertas para los posibles errores que en otros idiomas son capturadas durante de el paso de compilación. He aquí un ejemplo:

Javascript

// Listen for the input event on the textbox

var textBox = document.querySelector(‘input’);

textBox.addEventListener(‘input’, function(){

// textBox.value holds a string. Adding 10 appends

// the string ’10’, it doesn’t perform an addition..

console.log(textBox.value + ‘ + 10 = ‘ + (textBox.value + 10));

});

HTML

<input type=”number” placeholder=”Enter a number here” />

El problema se puede solucionar f√°cilmente mediante el uso de parseInt (textBox.value, 10), para convertir la cadena en un n√ļmero antes de a√Īadir 10 a la misma. Dependiendo de c√≥mo se utiliza una variable, el tiempo de ejecuci√≥n puede decidir que se debe convertir en un tipo u otro. Esto se conoce como tipo de conversi√≥n. Para evitar que los tipos se convierta impl√≠citamente al comparar las variables en las sentencias if, puede utilizar comprobaciones de igualdad estricta (===).

4. Olvidando var

Otra pr√°ctica de la cual los principiantes son culpables, es de olvidarse de utilizar la palabra clave var al declarar variables. JavaScript es muy permisiva, y la primera vez que ve que se ha utilizado una variable sin la sentencia var, ser√° en silencio declarada de manera global. Esta puede ser la fuente de errores sutiles. He aqu√≠ un ejemplo, que tambi√©n muestra un error diferente – falta de una coma al declarar m√ļltiples variables a la vez:

var a = 1, b = 2, c = 3;

function alphabet(str){

var a = ‘A’, b = ‘B’ // Oops, missing ‘,’ here!

c = ‘C’, d = ‘D’;

return str + ‘ ‘ + a + b + c + ‘‚Ķ’;

}

console.log( alphabet(“Let’s say the alphabet!”) );

// Oh no! Something went wrong! c has a new value!

console.log(a, b, c);

Cuando el analizador alcanza la línea 4, se insertará un punto y coma de forma automática, y luego interpreta las declaraciones c y d  en la línea 5 como global. Esto hará que el valor de la variable externa C cambie.

5. Las operaciones aritméticas con flotadores

Este error se aplica a casi todos los idiomas de programaci√≥n, incluyendo JavaScript. Debido a la forma en que los n√ļmeros en coma flotante se representan en la memoria, las operaciones aritm√©ticas no son tan precisas como se podr√≠a pensar. He aqu√≠ un ejemplo:

Javascript

var a = 0.1, b = 0.2;

// Surprise! this is false:

console.log(a + b == 0.3);

// Because 0.1 + 0.2 does not produce the number that you expect:

console.log(‘0.1 + 0.2 = ‘, a + b);

Para evitar este problema, no se deber√≠an utilizar los decimales si necesita correcci√≥n absoluta, utiliza n√ļmeros enteros, o si tiene que trabajar con el dinero, utilizar una biblioteca como bignumber.js.

6. El uso de los constructores sobre los literales

Cuando los programadores de Java y C # comienzan a escribir JavaScript a menudo prefieren crear objetos utilizando constructores: new Array (), new Object (), new String (). Aunque son perfectamente compatibles, se recomienda utilizar las anotaciones literales: [], {}, “”, debido a que las funciones constructoras tienen peculiaridades sutiles:

Javascript

/* Using array constructors is valid, but not recommended. Here is why. */

// Create an array with four elements:

var elem4 = new Array(1,2,3,4);

console.log(‘Four element array: ‘ + elem4.length);

// Create an array with one element. It doesn’t do what you think it does:

var elem1 = new Array(23);

console.log(‘One element array? ‘ + elem1.length);

/* String objects also have their warts */

var str1 = new String(‘JavaScript’),

str2 = “JavaScript”;

// Strict equality breaks:

console.log(“Is str1 the same as str2?”, str1 === str2);

La solución es simple: trata siempre de usar la anotación literal. Además, las matrices de JS no necesitan conocer su longitud con antelación.

7. No entender cómo funcionan los alcances

Un concepto difícil de entender para los principiantes son las reglas alcances y cierres. Y con razón:

Javascript

// Print the numbers from 1 to 10, 100ms apart. Or not.

for(var i = 0; i < 10; i++){

setTimeout(function(){

console.log(i+1);

}, 100*i);

}

/* To fix the bug, wrap the code in a self-executing function expression:

for(var i = 0; i < 10; i++){

(function(i){

setTimeout(function(){

console.log(i+1);

}, 100*i);

})(i);

}

*/

Las funciones conservan con visibilidad a las variables en sus ámbitos padres. Pero debido a que estamos retrasando la ejecución con un setTimeout, cuando llegue el momento de que las funciones que se ejecutan en realidad, el bucle ya ha terminado y la variable i se incrementa a 11.

La auto ejecución de las funciones en los comentarios funciona, porque copia la variable i por valor y mantiene una copia privada para cada función timeout.

8. Usando eval

Eval es la maldad. Se considera una mala práctica, y la mayoría de las veces cuando se utiliza, hay un enfoque mejor y más rápido.

Javascript

/* Using eval to access properties dynamically */

var obj = {

name: ‘Foo Barski’,

age: 30,

profession: ‘Programmer’

};

// Which property to access?

var access = ‘profession’;

// This is a bad practice. Please don’t do it:

console.log( eval(‘obj.name + ” is a ” + obj.’ + access) );

// Instead, use array notation to access properties dynamically:

console.log( obj.name + ” is a ” + obj[access]);

/* Using eval in setTimout */

// Also bad practice. It is slow and difficult to read and debug:

setTimeout(‘ if(obj.age == 30) console.log(“This is eval-ed code, ” + obj[access] + “!”);’, 100);

// This is better:

setTimeout(function(){

if(obj.age == 30){

console.log(‘This code is not eval-ed, ‘ + obj[access] + ‘!’);

}

}, 100);

El código dentro de eval es una cadena. Los mensajes de depuración que surgen a partir de bloques eval son incomprensibles y tienes que hacer malabares para escapar de las comillas simples y dobles. Por no hablar de que es más lento que el JavaScript regular. No utilices eval a menos que sepa lo que está haciendo.

9. No entienden el código asíncrono

Algo que es √ļnico en JavaScript es que casi todo es as√≠ncrono, y lo que necesitas es pasar las funciones de devoluci√≥n de llamada o callbacks con el fin de ser notificado de los eventos. Esto no se consigue de forma intuitiva para los principiantes, y se encuentran r√°pidamente confuzos sobre un error que es dif√≠cil de entender. Te ofrecemos una muestra, en la que se utiliza el servicio FreeGeoIP para ir a buscar su ubicaci√≥n por IP:

var userData = {};

// Fetch the location data for the current user.

load();

// Output the location of the user. Oops, it doesn’t work! Why?

console.log(‘Hello! Your IP address is ‘ + userData.ip + ‘ and your country is ‘ + userData.country_name);

// The load function will detect the current visitor’s ip and location with ajax, using the

// freegeoip service. It will place the returned data in the userData variable when it’s ready.

function load(){

$.getJSON(‘http://freegeoip.net/json/?callback=?’, function(response){

userData = response;

// Uncomment this line to see what is returned:

// console.log(response);

});

}

A pesar de que la console.log viene después de la llamada a la función load(), en realidad es ejecutado antes de que los datos sean encabezados.

10. Mal uso de los eventos listeners

Digamos que quieres escuchar por los clics en un botón, pero sólo mientras una casilla de verificación está marcada. Así es como un principiante puede hacerlo (usando jQuery):

Javascript

var checkbox = $(‘input[type=checkbox]’),

button = $(‘button’);

// We want to listen for clicks only when the checkbox is marked.

checkbox.on(‘change’, function(){

// Is the checkbox checked?

if(this.checked){

// Listen for clicks on the button.

button.on(‘click’, function(){

// This alert is called more than once. Why?

alert(‘Hello!’);

});

}

});

HTML

<input type=”checkbox” />

<button>Click me!</button>

<p>Click the checkbox a few times.</p>

Conclusion

La mejor manera de evitar que sucedan errores como estos es utilizar JSHint. Algunos IDEs ofrecen una función de integración con la herramienta, por lo que su código se comprueba mientras escribe. Espero que hayas encontrado esta lista interesante.

Fuente original del artículo: tutorialzine
Traducción realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder