10 errores que los novatos de Javascript suelen cometer - Parte 1

Javascript es un lenguaje sencillo con el cual comenzar a aprender programación, pero lograr ser un experto en la materia requiere mucho esfuerzo. Los novatos, a menudo, cometen errores que ya son conocidos por los desarrolladores experimentados en Javascript, y siguen cayendo, y cayendo, y cayendo, hasta que un día, por fin, se les mete en la sesera. Si quieres saber de qué errores estamos hablando, sigue leyendo este artículo:

Llaves perdidas

Una de las prácticas que los desarrolladores novatos suelen cometer, es omitir las llaves o corchetes en sentencias if, else, while y for. A pesar de que está permitido en Javascript el crear una de estas sentencias sin llaves o corchetes, debes tener mucho cuidado y ser consciente de que, solo se permite cuando después le sigue no más de una sentencia. Esta práctica suele ocultar problemas y ser fuente de errores. Echa un vistazo al siguiente ejemplo:

// Say hello to Gandalf
hello('Gandalf');

function hello(name){

	// This code doesn't do what the indentation implies!

	if(name === undefined)
		console.log('Please enter a username!');
		fail();

	// The following line is never reached:

	success(name);
}

function success(name){
	console.log('Hello, ' + name + '!');
}

function fail(){
	throw new Error("Name is missing. Can't say hello!");
}

Aunque la llamada a fail() está indentada y parece como si perteneciese a la sentencia if, en realidad no es así. Siempre se le llama. Esto es un buen ejemplo para tener en cuenta que siempre hay que establecer llaves o corchetes a cualquier declaración if, else, while o for, aun sabiendo que la dependencia o el bucle solo atañe a una sentencia.

El dichoso punto y coma

Cuando se parsea Javascript, existe un proceso conocido como inserción automática de punto y coma. Como su propio nombre indica, el parseador introduce automáticamente los puntos y comas que le faltan a tu código por ti. El propósito de esta función es hacer que Javascript sea más accesible y mucho más usable para los novatos. De todas maneras, recomiendo que nunca te olvides de escribir punto y coma después de cada sentencia puesto que hay peligro de que se omitan. Aquí tienes un ejemplo:

// This code results in a type error. Adding semicolons will fix it.

console.log('Welcome the fellowship!')

['Frodo', 'Gandalf', 'Legolas', 'Gimli'].forEach(function(name){
	hello(name)
})

function hello(name){
	console.log('Hello, ' + name + '!')
}

Como puedes ver, falta un punto y coma en la línea 3, el parseador asume que el corchete abierto de la línea 5 es un intento de acceder a una propiedad mediante la sintaxis de array de acceso, y no una sentencia separada. La solución es simple, escribe siempre el punto y coma.

Algunos desarrolladores de JavaScript experimentados prefieren dejar de lado el punto y coma, pero son perfectamente conscientes de los errores que esto puede causar y saben cómo prevenirlos.

No entender los tipos

JavaScript es un lenguaje dinámico. Esto significa que no necesitas especificar el tipo al declarar una nueva variable, y puedes libremente reasignar o convertir su valor. Esto hace que JavaScript sea más sencillo de utilizar que lenguajes como C# o Java, pero abre las puertas a posibles errores que, en otros lenguajes son detectados en la etapa de compilación. Aquí hay un ejemplo:

<input type="number" placeholder="Enter a number here" />
// 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));

});

El problema se puede arreglar fácilmente utilizando parseInt(textBox.value, 10) para convertir una cadena en un número antes de sumarle 10. Dependiendo de cómo se utilice una variable, el tiempo de ejecución puede decidir si debe convertirse en un tipo u otro. Esto se conoce como tipo de coacción. Para evitar que los tipos se conviertan implícitamente al comparar variables en caso de declaraciones, puedes utilizar controles de igualdad estricta como ===.

Olvidar el var

Otra práctica que los novatos suelen cometer, es olvidarse de utilizar la palabra clave var al declarar variables. JavaScript es muy permisivo, y la primera vez que delaras una variable sin la sentencia var, la estarás declarando sin enterarte a nivel global. Esto puede ser fuente de errores pequeños. He aquí un ejemplo, que también muestra un error diferente, falta 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 parseador lee la línea 4, insertará un punto y coma de forma automática, y luego interpretara las declaraciones de c y d, de la línea 5, como globales. Esto implica que el valor de la variable c, en el exterior, pueda cambiar.

Operaciones aritméticas con floats

Este error es común en cualquier lenguaje de programación que conozcas, incluyendo JavaScript. Debido a la forma en que los floats son representados en la memoria, las operaciones aritméticas no son tan precisas como se puede pensar en un inicio. Aquí hay un ejemplo:

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 debes utilizar decimales si necesitas una precisión absoluta. Usa números enteros, o si necesitas trabajar con asuntos económicos, utiliza una librería como bignumber.js.

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP