Operadores en Javascript

Las variables sólo se pueden utilizar para almacenar información. Sin embargo, es muy habitual que los programas tengan que manipular la información original para transformarla en otra información. Los operadores son los elementos básicos que se utilizan para modificar el valor de las variables y para combinar varios valores entre sí para obtener otro valor.

JavaScript define numerosos operadores, entre los que se encuentran los operadores matemáticos (suma, resta, multiplicación, división) y los operadores lógicos utilizados para realizar comparaciones (mayor que, igual, menor que).

El operador de asignación es el más utilizado y el más sencillo. Simplemente se utiliza para asignar a una variable un valor específico. El símbolo utilizado es = (no confundir con el operador ==):

var numero1 = 3;
var variable1 = "hola mundo";

Solamente son válidos para las variables numéricas y son un método sencillo de incrementar o decrementar en 1 unidad el valor de una variable, tal y como se muestra en el siguiente ejemplo:

var numero = 5;
++numero;
alert(numero);  // numero = 6

El anterior ejemplo es equivalente a:

var numero = 5;
numero = numero + 1;
alert(numero);  // numero = 6

De la misma forma, el operador -- se utiliza para decrementar el valor de la variable:

var numero = 5;
--numero;
alert(numero);  // numero = 4

Como ya se supone, el anterior ejemplo es equivalente a:

var numero = 5;
numero = numero - 1;
alert(numero);  // numero = 4

Además de estos dos operadores, existen otros dos operadores similares pero que se diferencian en la forma en la que se realiza el incremento o decremento. En el siguiente ejemplo:

var numero = 5;
numero++;
alert(numero);  // numero = 6

El resultado es el mismo que antes y puede parecer que es equivalente añadir el operador ++ delante o detrás del identificador de la variable. Sin embargo, el siguiente ejemplo muestra sus diferencias:

var numero1 = 5;
var numero2 = 2;
numero3 = numero1++ + numero2;
// numero3 = 7, numero1 = 6
 
var numero1 = 5;
var numero2 = 2;
numero3 = ++numero1 + numero2;
// numero3 = 8, numero1 = 6

Si el operador ++ se indica como prefijo del identificador de la variable, su valor se incrementa antes de realizar cualquier otra operación. Si el operador ++ se indica como sufijo del identificador de la variable, su valor se incrementa después de ejecutar la sentencia en la que aparece.

Uno de los operadores lógicos más utilizados es el de la negación. Se utiliza para obtener el valor lógico contrario al valor de la variable:

var visible = true;
alert(!visible);  // Muestra 'false' y no 'true'

La negación lógica se obtiene prefijando el símbolo ! al identificador de la variable. Cuando la variable es de tipo booleano, obtener su valor lógico contrario es trivial:

Por el contrario, si la variable almacena un número o una cadena de texto, no se puede obtener su valor lógico contrario de forma directa. En este caso, JavaScript convierte previamente la variable a un valor lógico y después obtiene su valor contrario.

Si la variable original contiene un número, su transformación en variable lógica es false si el número es 0 y true en cualquier otro caso. Si la variable original contiene una cadena de texto, su transformación en variable lógica es false si la cadena no contiene ningún carácter y true en cualquier otro caso:

var cantidad = 0;
vacio = !cantidad;  // vacio = true
cantidad = 2;
vacio = !cantidad;  // vacio = false
 
var mensaje = "";
sinMensaje = !mensaje;  // sinMensaje = true
mensaje = "hola mundo";
sinMensaje = !mensaje;  // sinMensaje = false

La operación lógica AND combina dos valores booleanos para obtener como resultrado otro valor de tipo lógico. El resultado de la operación solamente es true si los dos operandos son true. El operador se indica mediante el símbolo &&:

El siguiente ejemplo muestra cómo combinar valores mediante el operador &&:

var valor1 = true;
var valor2 = false;
resultado = valor1 && valor2; // resultado = false
valor1 = true;
valor2 = true;
resultado = valor1 && valor2; // resultado = true

La operación lógica OR también combina dos valores booleanos para obtener como resultado otro valor de tipo lógico. El resultado de la operación es true si alguno de los dos operandos es true. El operador se indica mediante el símbolo ||:

El siguiente ejemplo muestra cómo combinar valores mediante el operador ||:

var valor1 = true;
var valor2 = false;
resultado = valor1 || valor2; // resultado = true
valor1 = false;
valor2 = false;
resultado = valor1 || valor2; // resultado = false

JavaScript permite realizar manipulaciones matemáticas sobre el valor de las variables numéricas. Los operadores definidos son: suma (+), resta (-), multiplicación (*) y división (/). Ejemplo:

var numero1 = 10;
var numero2 = 5;
resultado = numero1 / numero2;  // resultado = 2
resultado = 3 + numero1;        // resultado = 13
resultado = numero2 – 4;        // resultado = 1
resultado = numero1 * numero 2; // resultado = 50

Uno de los operadores matemáticos más singulares cuando se estudia por primera vez es el módulo, que calcula el resto de la división entera. Si se divide 10 entre 5, la división es exacta y da un resultado de 2. El resto de esa división es 0, por lo que «módulo de 10 y 5» es igual a 0.

Sin embargo, si se divide 9 y 5, la división no es exacta, el resultado es 1 y el resto es 4, por lo que «módulo de 9 y 5» es igual a 4.

El módulo en JavaScript se indica mediante el símbolo %, que no debe confundirse con el porcentaje:

var numero1 = 10;
var numero2 = 5;
resultado = numero1 % numero2; // resultado = 0
numero1 = 9;
numero2 = 5;
resultado = numero1 % numero2; // resultado = 4

Aunque el operador módulo parece demasiado extraño como para ser útil, en muchas aplicaciones web reales se utiliza para realizar algunas técnicas habituales, tal y como se verá más adelante.

Los operadores matemáticos se pueden combinar con el operador de asginación para escribir de forma abreviada algunas operaciones comunes:

var numero1 = 5;
numero1 += 3; // numero1 = numero1 + 3 = 8
numero1 -= 1; // numero1 = numero1 - 1 = 4
numero1 *=2;  // numero1 = numero1 * 2 = 10
numero1 /= 2; // numero1 = numero1 / 2 = 2.5
numero1 %= 3; // numero1 = numero1 % 3 = 2

Los operadores relacionales definidos por JavaScript son idénticos a los definidos por las matemáticas: mayor que (>), menor que (<), mayor o igual (>=), menor o igual (<=), igual (==) y distinto (!=).

El resultado de todas estas operaciones siempre es un valor booleano:

var numero1 = 3;
var numero2 = 5;
resultado = numero1 > numero2; // resultado = false
resultado = numero1 < numero2; // resultado = true
numero1 = 5;
numero2 = 5;
resultado = numero1 >= numero2; // resultado = true
resultado = numero1 <= numero2; // resultado = true
resultado = numero1 == numero2; // resultado = true
resultado = numero1 != numero2; // resultado = false

El operador == es la mayor fuente de errores de programación incluso para los usuarios que ya tienen cierta experiencia desarrollando scripts. Si se quiere comparar el valor de dos variables, no se debe utilizar el operador =:

var numero1 = 5;
resultado = numero1 = 3; // numero1 = 3 y resultado = 3

Para comparar valores, se debe utilizar el operador == (con dos signos de igual):

var numero1 = 5;
resultado = numero1 == 3; // numero1 = 5 y resultado = false

Además de las variables numéricas, también se pueden utilizar variables de tipo cadena de texto con los operadores relacionales:

var texto1 = "hola";
var texto2 = "hola";
var texto3 = "adios";
resultado = texto1 == texto3; // resultado = false
resultado = texto1 != texto2; // resultado = false
resultado = texto3 >= texto2; // resultado = false

Cuando se comparan cadenas de texto con los operadores > y <, el resultado obtenido puede ser poco intuitivo. JavaScript compara letra a letra comenzando desde la izquierda hasta que se encuentre una diferencia entre las dos letras. Para determinar si una letra es mayor o menor que otra, se considera que:

A < B < ... < Z < a < b < ... < z

Además de los operadores básicos de igualdad, también existen los operadores «idéntico» (también llamado «exactamente igual») y «no idéntico» (también llamado «no exactamente igual»). Cuando se utilizan estos operadores, no sólo se comparan los valores que almacenan las variables, sino que también se compara el tipo de cada variable.

var variable1 = 10;
var variable2 = "10";
variable1 == variable2;   // devuelve true
variable1 === variable2;  // devuelve false

El operador «idéntico» se indica mediante tres signos de igualdad (===) y devuelve true solamente si los dos operandos son exactamente iguales sin necesidad de realizar ninguna conversión. En el ejemplo anterior, la primera variable es de tipo numérico y su valor es 10, mientras que la segunda variable es de tipo cadena de texto y su valor es "10".

Si se utiliza el operador ==, JavaScript convierte automáticamente el tipo de las variables para realizar la comparación. Al convertir la cadena de texto en variable numérica, se obtiene el valor 10, por lo que los dos valores que se comparan son iguales y el resultado de la operación es true.

Sin embargo, en el caso del operador «idéntico», las dos variables tienen que ser además del mismo tipo. Como la primera variable es de tipo numérico y la segunda es una cadena de texto, aunque sus valores son iguales, el resultado de la operación es false.

El operador «no idéntico» tiene un funcionamiento equivalente y se indica mediante los caracteres !==