• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Cursos online y materiales digitales para estudiantes y desarrolladores web

  • CURSOS
  • BLOG
  • QUIÉNES SOMOS
  • FAQ
  • ACCEDER
  • CONTACTO

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

Publicado el 27/06/2020 por didacticode 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.

Tweet

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

Filed Under: Tips & Tricks Tagged With: concatenación, errores, javascript, operadores

Reader Interactions

Comments

  1. Luis says

    24/06/2022 at 03:38

    Excelente explicaión!!!, me sirvió mucho!!! Muchas gracias!!!

    Accede para responder
    • didacticode says

      28/06/2022 at 23:36

      ¡Me alegro muchísimo, Luis!

      Accede para responder

Deja una respuesta Cancelar la respuesta

Lo siento, debes estar conectado para publicar un comentario.

Footer

Didacticode

Cursos para estudiantes y docentes del mundo de la informática.
Retos: retos resueltos de programación.
Tips&Tricks: trucos y consejos.
Boleticodes: boletines de noticias.
Quiénes somos: Ada, Edu... y Laura.
Contacto¡Contacta conmigo!

Legal

Aviso legal
Política de privacidad
Cookies

Redes Sociales

Youtube
Twitter
Instagram
Facebook
Twitch
LinkedIn
Gitlab
Github

Didacticode © 2022

¡Cómo no! Este sitio también utiliza cookies para mejorar la experiencia de tu visita.

Puedes informarte más sobre qué cookies estamos utilizando o desactivarlas en los AJUSTES.

Resumen de privacidad
Didacticode

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.