Introducción

En el post JS: Introducción a la programación, se hace una distinción entre la Programación y las herramientas que esta aporta para la realización de los distintos programas y los Lenguajes de Programación. 

Un Lenguaje de Programación debe permitir que usemos las herramientas de Programación. En esta oportunidad vamos a ver cómo hace JavaScript para permitirnos trabajar con los operadores.

Tipos de operadores

Los operadores son elementos que nos permiten interactuar con los datos contenidos en nuestro programa. Los datos habitualmente se encuentran almacenados en variables (aunque no es necesario que así sea para trabajar con algunos operadores) por lo que es común hablar de ellos como operadores de variables.

En JavaScript existen cuatro tipos de operadores:

  • Operadores Matemáticos (+, —, *, /, %)
  • Operadores de Asignación (=, +=, -=, *=, /=)
  • Operadores de Incremento y Decremento (++, --)
  • Operadores Lógicos (&&, || ,!)

En este post hablaremos sobre los tres primeros (matemáticos, asignación e incremento y decremento). Mientras que en el post JS: Operadores de Variables II nos ocuparemos de los operadores lógicos.

Operadores Matemáticos

Los Operadores Matemáticos, como su nombre lo indica, permiten realizar cálculos matemáticos.

Tabla de Operadores Matemáticos

Es importante notar que en JavaScript, el operador suma tiene una doble función. Por un lado, permite sumar datos de tipo number. Y por el otro, concatenar datos de tipo string.

La concatenación de datos implica crear un valor único juntando todos los valores concatenados. Imaginemos lo siguiente, tenemos dos datos de tipo string: "Hola, " y "Mundo!". Si “sumamos” (concatenar) los valores Hola, y Mundo!, obtendremos un único dato de tipo string con el siguiente valor "Hola, Mundo!".

Casteo de tipo de dato

Al momento operar sobre datos de distinto tipo (se encuentren dentro de variables o no) vamos a tener problemas porque «No es posible operar sobre datos de distinto tipo». 

Hay Lenguajes que, si intentamos hacer una suma con una variable de tipo string y una de tipo number generan un error y dejan de ejecutar el programa. JavaScript tiene otro enfoque.

Cada vez que intentemos operar sobre datos de distinto tipo, JavaScript va a realizar una conversión de dato. Es decir, va a elegir un tipo de dato y se va a asegurar que las dos variables sean de ese tipo. Después hará la operación solicitada. 

Analicemos los siguientes ejemplos

¿Qué está sucediendo? 

Arranquemos por el primer caso. La variable num contiene un dato de tipo number, por tanto, es una variable de tipo number. La variable frase contiene un dato de tipo string convirtiéndose, entonces, en una variable de tipo string. Con console.log(frase + num) le estamos pidiendo a JavaScript que ejecute una operación relacionada con el operador suma y nos muestre el resultado de dicha operación en la consola del navegador. Como dijimos más arriba, «No es posible operar sobre datos de distinto tipo».  En este punto, otros Lenguajes nos dejarían saber que dicha acción no es posible debido a esta premisa. JavaScript, en cambio, convierte a la variable num en una variable de tipo string para, después, mostrar el resultado de concatenar (operación que se realiza cuando “sumamos” datos de tipo string) los dos datos. Es decir que, console.log(frase + num) para JavaScript equivale a console.log("En la variable num, se almacena el valor:  " + "4").

En el segundo caso, nos encontramos con el mismo problema. Estamos queriendo operar sobre distintos tipos de datos. En consecuencia, JavaScript convierte uno de esos datos y opera de forma acorde. Acá también la variable de tipo number es convertida a variable de tipo string. Por tanto, console.log(n1 + n2), JavaScript lo opera como console.log("1" + "2"). Nuevamente, el operador más implica la concatenación de datos de tipo string.

Esta particularidad, conocida como casteo implícito, se da todas y cada una de las veces en que intentemos operar con variables de distinto tipo. Es importante, por tanto, conocer cómo hace JavaScript este casteo.

A continuación te muestro cómo se genera la conversión cuando operamos sobre datos de tipo number y string utilizando los Operadores Matemáticos. 

  • string + number ⇒ string
  • string (—, *, /, %) number ⇒ number

El casteo y coerción de datos en JavaScript es un tema más complejo que trataremos en posteos futuros.

Por último, cuando se hace un casteo de dato de tipo string a dato de tipo number sobre un valor que no puede ser representado de forma numérica, obtendremos un dato de tipo number con el valor NaN (Not a Number) para indicar que, aunque se cambió el tipo de dato, no se pudo obtener un número.  

Como ya dijimos, el casteo implícito es algo que va a suceder siempre que trabajemos con variables de distinto tipo, pero podríamos evitarlo haciendo uso de los paréntesis. 

Por ejemplo:


Tené presente que si querés hacer una multiplicación y una división, igual que en matemáticas, los paréntesis no son necesarios porque siempre se realizan primero esas operaciones y después las sumas y restas.




Operadores de Asignación

Con estos operadores vamos a poder almacenar datos dentro de espacios de almacenamiento. De hecho, el operador de asignación más utilizado y relevante es el que nos permite guardar un dato dentro de las distintas variables (recordemos que las variables son espacios de almacenamiento). La idea de declarar una variable es tener la capacidad de guardar un dato. Para guardar un dato (asignar el dato al espacio de memoria generado con la variable) necesitamos escribir una sentencia como esta variable = dato. El símbolo de igual, entonces indica la asignación del dato a la variable.

Tabla de Operadores de Asignación

Además del símbolo igual, en la tabla anterior podemos encontrar operadores que son producto de la conjunción del símbolo igual y los operadores matemáticos. Estos sirven para simplificar el almacenaje del resultado de la realización de una operación matemática.

Imaginemos que tenemos un dato de tipo number almacenado en una variable y, a ese dato, necesitamos modificarlo y mostrar el resultado de dicha modificación. 

Una opción sería:


Se puede obtener el mismo resultado utilizando el operador +=

Operadores de Incremento/Decremento

Los operadores de incremento/decremento permiten sumar/restar en uno el valor almacenado en una variable y almacenar el resultado en esa misma variable (lo mismo que si usáramos la conjunción suma/resta de los operadores de asignación).  La particularidad que presentan es la posibilidad de indicar en qué momento utilizar el valor almacenado y realizar la operación.

Tabla de Operadores de Incremento/Decremento

En la tabla de arriba se aprecian dos formas de manipular el valor almacenado. Antes de leerlo y después. 

Arranquemos entendiendo que cuando hablamos de leer un dato estamos haciendo referencia a que el navegador mira el valor almacenado en una variable y aplica las operaciones sobre ese valor leído según necesidad. Pongamos el siguiente ejemplo, necesitamos que el navegador haga una suma sobre el valor almacenado en una variable y, cuando tiene el resultado, le pedimos que lo muestre. En código se podría plantear lo siguiente


Eso mismo se puede efectuar empleando el operador de pre-incremento porque este operado primero hace la suma y guarda el resultado y después se lee el dato almacenado que es el valor resultante de la operación matemática.


Cambiemos el ejemplo. Pensemos que estamos buscando mostrar el dato antes de hacer la suma y después mostrar el resultado. Para esto es válido plantear lo siguiente


Se puede lograr lo mismo usando el operado de post-incremento, ya que este le dice al navegador que lea el valor almacenado en la variable antes de hacer la suma. El ejemplo quedaría así


Los operadores de decremento tienen el mismo funcionamiento, por lo que, si en lugar de sumar, necesitáramos restar, se aplicaría la misma lógica anteriormente descrita.