Cursos online y materiales digitales para estudiantes y desarrolladores web

Tips & Tricks

¡Error! No usar las llaves en estructuras de control

Publicado el por Leave a Comment

Seguimos con la serie de artículos sobre errores comunes en Javascript, aunque este error es un clásico de todos los lenguajes de programación: ¡lo veo prácticamente tooooooodos los días!

Como sabes, las estructuras de control suelen ir seguidas de bloques de código delimitados por llaves. Supongamos un ejemplo en el que queremos llevar la cuenta de las personas cuya edad es menor de 18 utilizando una estructura de control condicional if:

if (edadPersona < 18) {
  contadorMenores++;
}

También sabrás que, cuando dentro del bloque anterior solamente va una sentencia, puedes eliminar las llaves porque el resultado es el mismo (podrías incluso dejarlo en la misma línea):

if (edadPersona < 18)
  contadorMenores++;

Imagina que quieres añadir una sentencia más dentro de esa estructura de control. Algo inofensivo: un pequeño mensaje en la consola para saber el nombre de esas personas que son menores de 18. Y haces lo siguiente:

if (edadPersona < 18)  
  console.log("La persona " + nombrePersona + " es menor de edad");
  contadorMenores++;

Con el código así indentado, da la sensación de que ambas instrucciones se encuentran dentro del bloque de la estructura de control if. ¡Nada más lejos de la realidad! Lo que estás haciendo es lo siguiente:

if (edadPersona < 18)  
  console.log("La persona " + nombrePersona + " es menor de edad");
contadorMenores++;

Es decir, mostrar por consola el nombre de los menores de 18 años, pero incrementar SIEMPRE el valor de la variable contadorMenores, independientemente de que la edad de la persona sea mayor, menor o igual a 18. ¿La razón? Al eliminar las llaves de la estructura de control únicamente se ejecuta la primera sentencia después del if.

Así que, por precaución, te recomiendo:

  • Utilizar las llaves para delimitar los bloques de sentencias que se ejecutan en una estructura de control, aunque solamente haya una sentencia dentro de ese bloque.
  • En caso de que quieras prescindir de las llaves porque solamente vas a ejecutar una sentencia, escríbela en la misma línea o asegúrate de que la indentación es correcta.
  • Utiliza linters para asegurarte de que estás escribiendo el código correctamente.

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

Snippet: cambiar el texto de un botón al hacer click

Publicado el por Leave a Comment

Os traigo un sencillo snippet que nos permite modificar el texto de un botón al hacer click sobre él, en respuesta a la duda que nos planteó Cristian en el canal de Youtube:

Duda Yutube - Cambiar texto botón al hacer click
Duda en Youtube – Cambiar texto de un botón al hacer click sobre él

La solución es muy sencilla: simplemente hay que asociar una función al evento “click” del botón en la que cambiamos el valor de su atributo “value” al que necesitemos.

¡Os dejo el snippet donde podéis verlo!

¡Error! Dividir una cadena con un salto de línea

Publicado el por Leave a Comment

¡Un error más en esta serie de artículos sobre errores comunes en Javascript! Esta vez vemos cómo se puede y cómo no se puede dividir una cadena con un salto de línea tanto en el editor de código como en la propia visualización.

En la lección Javascript – #1.04. Sentencias en Javascript vimos recomendaciones para escribir sentencias en Javscript. Y es que, en ocasiones, escribimos cadenas muy largas que nos obligan a hacer scroll horizontal en nuestro editor de código o bien necesitamos introducir un salto de línea en la visualización de la cadena. ¿Cuál es el modo correcto de dividirlas?

En primer lugar, podemos poner un salto de línea justo después del igual de asignación de la cadena. Por ejemplo:

let cadena = 
"Hola, caracola";

Sin embargo, no podemos dividir la cadena por la mitad, sin más, con un salto de línea.

let cadena = "Esta es una cadena muy larga 
que me gustaría dividir en dos";
// Obtendríamos un error de sintaxis: "String literal contains an unescaped line break"
// es decir, "El literal cadena contiene un salto de línea no escapado".

Para hacerlo, necesitamos utilizar el operador de escape barra invertida de la siguiente manera:

let cadena = "Esta es una cadena muy larga \
que me gustaría dividir en dos";
console.log (cadena); 
//El resultado sería "Esta es una cadena muy larga que me gustaría dividir en dos";

¡Ojo! No quiere decir que al mostrar la cadena vayamos a ver un salto de línea, si no que podemos escribirla dividida en nuestro editor de código sin hacer scroll horizontal.

Otra opción más laboriosa es utilizar el operador asignación de adición (+=) tal y como se ve en el ejemplo:

let cadena = "Esta es una cadena muy larga ";
cadena += "que me gustaría dividir en dos";
//El resultado sería igualmente "Esta es una cadena muy larga que me gustaría dividir en dos";

En cualquier caso, si lo que necesitas es que en la visualización de la cadena se muestre con un salto de línea dependerá del lugar en el que vayas a mostrarla:

  • Si es un diálogo modal (alert, prompt, confirm) o un console.log necesitarás utilizar \n para realizar el salto de línea.
  • Si la cadena se va a mostrar diréctamente sobre la página web deberás hacerlo con la etiqueta de HTML <br/>.
console.log ("Hola,\n caracola");
alert ("Hola,\n caracola");
let respuesta1 = confirm ("¿Deseas salir\n de esta página");
let respuesta2 = prompt ("Introduce una opción:\n a) Amarillo \n b) Azul \n c) Rojo
// En todos los casos anteriores se mostraría un salto de línea en el lugar que hay un \n

document.innerHTML = "<p>Esto es un párrafo <br/> dividido en dos líneas</p";
document.getElementById("miParrafo").innerHTML = "<p>Esto es un párrafo <br/> dividido en dos líneas</p";

¡Recuerda este error común en Javascript! Para dividir una cadena en el editor de código necesitaremos la barra invertida (\) y para dividirla en la visualización necesitaremos \n o <br/> dependiendo de dónde se muestre.

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

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

Publicado el por 2 Comments

¡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 por 2 Comments

¡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 por Leave a Comment

¡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?