Tutoriales JavaScript | Operadores

Curso completo de JavaScript para todos los niveles

//Tutoriales JavaScript | Operadores
Tutoriales JavaScript | Operadores2019-06-20T09:57:15+00:00

Lección 6. Operadores

En JavaScript podemos distinguir hasta 6 tipos de operadores diferentes los cuales nos van a permitir realizar desde operaciones matemáticas hasta cálculos lógicos. Estos operadores son los que, en definitiva, van a determinar si nuestro código es óptimo, ya que haciendo un buen uso de los mismos, podemos reducir la carga de procesos de nuestro navegador.

Operadores de asignación

Este tipo de operadores, como su propio nombre indica, nos va a servir para dar un valor o inicializar una variable. Su uso es muy sencillo y es el operador que más se va a utilizar. El símbolo de este operador es el signo “=”.

Copy to Clipboard

Como vemos en el ejemplo de arriba, estamos declarando una variable y le asignamos un valor. A la vez que estamos asignando un valor, en este caso al ser un número entero, estamos inicializando la variable como tipo entero al darle ese valor.

Operadores de incremento o decremento

Los operadores crecientes o decrecientes nos sirven aumentar o disminuir el valor de una variable de una unidad en una unidad. Vamos a ver esta descripción con un ejemplo:

Copy to Clipboard

Podemos ver la declaración de una variable inicializada con valor 5. En la siguiente línea, a esa variable le estamos aplicando el operador de incremento. Posteriormente en la tercera línea, estamos mostrando en un alert el valor de dicha variable. El valor que mostrará el alert será 6, ya que como hemos aplicado el operador de incremento se ha aumentado en 1 su valor. El siguiente código haría lo mismo que el que acabamos de ver:

Copy to Clipboard

Por otro lado también tenemos el operador de decremento que, al contrario que el de incremento, este se encarga de disminuir en una unidad el valor de la variable a la que se lo apliquemos.

Copy to Clipboard

En este caso, el alert nos mostrará el valor 4, ya que hemos disminuído en 1 su valor. Como hemos visto con el operador de incremento, el siguiente código haría lo mismo que si usáramos el operador de decremento:

Copy to Clipboard

Este tipo de operadores son muy utilizados porque es un recurso muy bueno para optimizar código. También se utilizan mucho en los bucles for y while para determinar su fin de ciclo.

Operadores lógicos

Antes de empezar con una explicación teórica sobre los operadores lógicos de JavaScript, vamos a partir de una situación para entenderlo con un ejemplo muy simple. Tenemos un formulario de registro de usuarios en un curso en los que tenemos los siguientes campos:

  • Nombre
  • Apellidos
  • Edad
  • Curso
  • Teléfono
  • Email

Muchas veces nos encontramos con que hay campos obligatorios y campos opcionales, así que vamos a suponer que todos son obligatorios excepto el teléfono y el email. Cuando el usuario haga click en el botón correspondiente para enviar esos datos, nuestro código en JavaScript tendrá que validar estos antes de enviarlos a guardar.

Ya tenemos un ejemplo y un problema, la validación de los datos. Vamos a ir viendo los distintos tipos de operadores lógicos en base a este ejemplo y cómo nos ayudarían a resolver el problema.

Sabiendo que las variables booleanas hacen referencia con su nombre al álgebra de Boole, sus operadores funcionan exactamente igual, excepto el “SI” que no tiene operador, ya que sería el “contrario del contrario” del de negación.

ÁLGEBRA DE BOOLE OPERADOR LÓGICO SÍGNO
NO Negación !
Y AND &&
O OR ||
SI Afirmación !!

Operador lógico de negación

Este operador siempre nos va a dar como resultado un valor booleano (true o false). Es muy utilizado porque va a determinar el funcionamiento de un programa en cuanto a qué camino debe tomar. Su signo es la “!” y se utiliza antes de la variable que vayamos a utilizar.

Siguiendo el ejemplo de arriba, para saber si el campo nombre tiene o no contenido, bastaría con utilizar el operador de negación:

Copy to Clipboard

El valor que tendrá la variable “boolNombreVacio” en este caso va a ser false. ¿Por qué? Como hemos visto antes, este operador siempre nos devuelve true o false y en este caso, al estar evaluando una cadena de texto, devuelve false si tiene contenido. Vamos a ver en qué situaciones devuelve true o false.

TIPO DE VARIABLE VALOR NEGACIÓN
Booleana True False
Booleana False True
Numérica 0 True
Numérica Cualquier número False
Alfanumérica Sin texto True
Alfanumérica Con texto False

Operador lógico AND

De igual forma que el operador de negación, el operador lógico AND nos va a devolver un valor booleano como resultado de comparar dos variables o resultados booleanos. Para hacernos una idea vamos a continuar con el ejemplo de antes y vamos a suponer que ya no solo queremos evaluar el campo “Nombre”, sino que también vamos a evaluar el campo “Apellidos”. Primero vamos a ver el código y después lo explicaremos:

Copy to Clipboard

Como podemos ver, estamos declarando una variable de nombre y dándole un valor,  evaluamos su contenido y se lo asignamos a una variable. Hacemos lo mismo con los apellidos y los comparamos con el operador AND. Por último mostramos el el resultado en un alert el cual, en este caso, nos va a devolver true. En la siguiente tabla vamos a ver los distintos resultados que podemos obtener siguiendo el principio del álgebra booleana a partir del operador AND.

VARIABLE 1 VARIABLE 2 RESULTADO
True True True
True False False
False True False
False False False

El resultado va a ser siempre false mientras haya una variable false.

Operador lógico OR

Este operador tiene el mismo funcionamiento que el operador AND, compara dos variables booleanas y el resultado va a ser true siempre que haya una variable true. Siguiendo con el ejemplo de antes, vamos a analizar el siguiente código:

Copy to Clipboard

Definimos y asignamos valor a la variable de nombre y definimos y asignamos un valor vacío a la variable de email. Evaluamos el valor de cada una, los comparamos con el operador OR y mostramos su resultado. ¿Qué nos dará en este caso? True, ya que mínimo una de las dos es true. La siguiente tabla muestra la casuística de este operador.

Definimos y asignamos valor a la variable de nombre y definimos y asignamos un valor vacío a la variable de email. Evaluamos el valor de cada una, los comparamos con el operador OR y mostramos su resultado. ¿Qué nos dará en este caso? True, ya que mínimo una de las dos es true. La siguiente tabla muestra la casuística de este operador.

VARIABLE 1 VARIABLE 2 RESULTADO
True True True
True False True
False True True
False False False

Operadores matemáticos

En JavaScript existen cinco operadores matemáticos básicos: Suma, resta, multiplicación, división y resto. Vamos a ver un ejemplo de uso de cada uno de ellos.

Copy to Clipboard

Declaramos 3 variables enteras para realizar operaciones entre ellas y almacenamos los resultados en su variable correspondiente. A continuación veremos el resultado de cada una de ellas:

  • resultadoSuma: Resultado de la suma de 14 + 7. Es una suma sencilla. Su resultado sería 21.
  • resultadoResta: Resultado de la resta de 14 – 7. Resta sencilla cuyo resultado es 7.
  • resultadoMultiplicacion: Resultado de la multiplicación de 14 x 7. Su resultado es 98.
  • resultadoDivision: Resultado de la división de 14/7. Resultado: 2.
  • resultadoResto1: Resto de la división de 14/7. Como es una división exacta el resultado es 0.
  • resultadoResto2: Resto de la división de 14/5. Esta división ya no da como resultado un número entero, entonces su resultado es el resto de la división, cuyo valor en este caso es 4.

El operador “resto” puede resultar un poco complicado de entender al principio. Su uso suele estar relacionado con saber si un número es par o impar, es decir, si el resto de dividir un número entre 2 es 0, ese número es par, en caso contrario, es impar.

Los operadores matemáticos pueden combinarse con el de asignación para optimizar o facilitar la lectura del código. Vamos a ver una serie de ejemplos de cómo pueden ser las combinaciones.

Copy to Clipboard

Estas 6 líneas de código harán exactamente lo mismo que las siguientes 6:

Copy to Clipboard

Como podemos ver en este caso, el primer fragmento código facilita y aclara mucho más la lectura que el segundo fragmento de código.

Operadores relacionales

Los operadores relacionales, como los lógicos, nos van a devolver una variable booleana después de la comparación entre variables de cualquier tipo. Estos operadores son los siguientes:

NOMBRE SÍMBOLO
Mayor que >
Menor que <
Mayor o igual que >=
Menor o igual que <=
Igual que ==
Distinto de !=

Como hemos hecho con los operadores anteriores, vamos a crear un pequeño código con todos y después los analizaremos uno a uno.

Copy to Clipboard

A continuación vemos lo que daría cada resultado:

  • resultado1: El resultado es true, ya que 20 es mayor que 4.
  • resultado2: El resultado es false, ya que 20 no es menor que 4.
  • resultado3: El resultado es true, ya que 20 es mayor o igual que 4.
  • resultado4: El resultado es false, ya que 20 no es menor o igual que 4
  • resultado5: El resultado es false, ya que 20 no es igual que 4.
  • resultado6: El resultado es true, ya que 20 es distinto de 4.

Hasta ahora hemos visto cómo sería el comportamiento de los operadores relacionales con variables numéricas, pero podemos encontrarnos en el caso de que su contenido no sea un número, si no un texto o carácter. En este caso, JavaScript interpreta la comparación carácter a carácter, es decir, que si comparamos la palabra “hola” con la palabra “adios”, comparará la “h” con la “a”, la “o” con la “d”, la “l” con la “a”…. La forma que tiene JavaScript de determinar si una letra es mayor o menor que otra es siguiendo el orden del alfabeto, la “a” será mayor que la “b”, la “b” que la “c”… Además, si queremos afinar un poco más, interpreta que las mayúsculas son menores que las minúsculas. El orden básico de criterio, sin contar símbolos, ordenado de menor a mayor será el siguiente:

abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

4.6 (92.73%) 11 votes