Cursos online y materiales digitales para estudiantes y docentes del mundo de la informática.

Tips & Tricks

¡Error! Confundir adición y concatenación (signo +)

Publicado el día por . 2 comentarios

¡Seguimos con los errores comunes en Javascript! Y lo hacemos con un clásico: confundir adición y concatenación.

Como vimos en las lecciones Javascript – #1.07. Operadores aritméticos y Javascript – #1.09. Operadores de cadena, el signo + se puede utilizar indistintamente para hacer una operación suma y para concatenar dos cadenas.

Podríamos pensar que no hay lugar a dudas porque el primero lo utilizaríamos con dos variables de tipo numérico y el segundo con dos variables de tipo cadena. ¿Pero qué ocurre si las mezclamos? Veamos:

En este caso, sumamos dos valores numéricos:

let x = 3 + 4; // x almacenará un número con el valor 7

En este, concatenamos dos cadenas:

let x = "5" + "6"; // x almacenará una cadena con el valor "56"

En caso de sumar un número como cadena, el resultado sería como sumar dos cadenas:

let x = 7 + "8"; // x almacenará una cadena con el valor "78"

El mayor problema puede surgir si sumamos dos variables y no sabemos qué tipo de datos van a almacenar (un número o una cadena).

En el siguiente ejemplo obtendremos por consola el resultado de concatenar cuando es probable que necesitáramos la suma de ambos valores. Esto suele pasar cuando solicitamos datos al usuario con un prompt o desde un formulario y no los parseamos.


let x = prompt("Introduce un número"); // Introducimos un 3
let y = prompt("Introduce otro número"); // Introducimos un 7
console.log (x+y); // ¡El resultado es 37 en lugar de 10 porque x e y almacenan cadenas!

Para solucionar el problema del ejemplo anterior es muy importante parsear los valores al tipo de dato que necesitemos. ¿Cómo? ¡Muy sencillo!

let x = parseInt(prompt("Introduce un número")); // Introducimos un 3
let y = parseInt(prompt("Introduce otro número")); // Introducimos un 7
console.log (x+y); // Ahora sí, el resultado será 10 porque x e y almacenan enteros

¡Truco! Si queremos que una suma de valores numéricos se convierta en una concatenación podríamos hacerlo sumando la cadena vacía («») al comienzo de la operación. ¡Ojo! Si sumamos la cadena vacía al final no funcionaría porque primero realizaría la suma y luego la concatenación.

let x = "" + 10 + 3;
let y = 10 + 3 + "";
console.log (x); // El resultado será la cadena "103" porque primero detecta que estamos sumando cadenas
console.log (y); // El resultado será la cadena "13" porque primero hace la suma y luego lo pasa a cadena.

¡Recuerda este error común en Javascript! ¡El operador más (+) suma y concatena! Debemos asegurarnos del tipo de datos que utilizamos en la operación.

Y tú, cuéntanos, ¿cuáles son tus errores de programación más comunes?

¡Error! Colocar mal el punto y coma

Publicado el día por . 2 comentarios

¡Veamos otro error en esta serie de artículos sobre errores comunes en Javascript! ¡El típico, el inigualable, el clásico error de colocar mal el punto y coma!

Ya vimos en la lección Javascript – #1.04. Sentencias en Javascript que es recomendable, aunque no obligatorio, finalizar las sentencias con un punto y coma. Sin embargo, colocar erróneamente un punto y coma puede tener consecuencias inesperadas.

¿A qué me refiero? Muy sencillo: a poner un punto y coma entre los paréntesis de una estructura de control (if, while, for, etc.) y las llaves o la siguiente sentencia. «¡Pero eso da error!» pensaréis… ¡nada más lejos de la realidad!

Y es que, en Javascript, es posible crear bloques de código independientes entre llaves sin que les preceda una estructura de control. Veamos un ejemplo:

let numero = 3;
if (numero !=3); // Esta sentencia no hace nada
{
  alert("Hola, caracola");
}
// Al haber puesto un ";" después del if, finaliza la estructura de control if
// A continuación se ejecuta el alert porque el bloque de las llaves es independiente

Así que, recuerda, ¡después de los paréntesis de las estructuras de control (if, for, while, do, etc.) no coloques un punto y coma!

¡Recuerda! Si ponemos un punto y coma entre una estructura de control (if, while, for…) y las llaves, lo que haya dentro de las llaves SIEMPRE se ejecutará.

Y tú, cuéntanos, ¿cuáles son tus errores de programación más comunes?

¡Error! Utilizar comparación regular en lugar de estricta

Publicado el día por . Dejar un comentario

¡Damos comienzo a esta serie de artículos sobre errores comunes en Javascript! Y lo hacemos con uno de los más comunes: utilizar una comparación regular en lugar de una comparación estricta.

Como vimos en la lección Javascript – #1.10. Operadores de comparación, a la hora de comparar dos valores podemos utilizar un doble o un triple igual. Sin embargo la diferencia es muy grande.

En una comparación regular (doble igual), el tipo de dato no importa. Veamos un ejemplo:

let x=5; // x toma el valor numérico 5
let y="5"; // y toma el valor de una cadena que contiene un 5
if (x==y) // Esta sentencia devolverá un valor true (verdadero) porque considera igual un 5 numérico que un 5 contenido en una cadena

Sin embargo, en una comparación estricta (triple igual), el tipo de dato sí que importa. 

let x=5; // x toma el valor numérico 5
let y="5"; // y toma el valor de una cadena que contiene un 5
if (x===y) // Esta sentencia devolverá un valor false (falso) porque los tipos de las variables son diferentes.

Y al hilo de esto, un error muy común es olvidar que una sentencia switch utiliza una comparación estricta. Por tanto, no es lo mismo este código, que sí ejecutará el alert:

var x = 10;
switch (x) {
case 10: alert("Hola, caracola"); // Este alert sí se ejecuta
}

Que este código, que no lo hará.

var x = 10;
switch (x) {
case "10": alert("Hola, caracola"); // Este alert no se ejecuta
}

Por tanto es muy importante asegurarnos el tipo de dato que le pasamos a la sentencia switch y el tipo de dato que comparamos en cada case coinciden.

¡Recuerda este error común en Javascript! ¡No es lo mismo utilizar una comparación regular que una comparación estricta!

Y tú, cuéntanos, ¿cuáles son tus errores de programación más comunes?