Operadores Javascript

  • Por
Estudiamos lo que es un operador y para qué sirve. Vemos los operadores de Javascript, en diversas clasificaciones, aritméticos, asignación, comparación, condicionales, a nivel de bit y preferencia de operadores.
En el presente artículo del Manual de Javascript vamos a comenzar una serie de textos enfocados en explicar los diferentes operadores disponibles en este lenguaje de programación.

Al desarrollar programas en cualquier lenguaje se utilizan los operadores, que sirven para hacer los cálculos y operaciones necesarios para llevar a cabo tus objetivos. Hasta el menor de los programas imaginables necesita de los operadores para realizar cosas, ya que un programa que no realizase operaciones, sólo se limitaría a hacer siempre lo mismo.

Es el resultado de las operaciones lo que hace que un programa varíe su comportamiento según los datos que tenga para trabajar y nos ofrezca resultados que sean relevantes para el usuario que lo utilice. Existen operaciones más sencillas o complejas, que se pueden realizar con operandos de distintos tipos, como números o textos, veremos en este capítulo, y los siguientes, de manera detallada todos estos operadores disponibles en Javascript.

Ejemplos de uso de operadores

Antes de entrar a enumerar los distintos tipos de operadores vamos a ver un par de ejemplos de éstos para que nos ayuden a hacernos una idea más exacta de lo que son. En el primer ejemplo vamos a realizar una suma utilizando el operador suma.

3 + 5

Esta es una expresión muy básica que no tiene mucho sentido ella sola. Hace la suma entre los dos operandos número 3 y 5, pero no sirve de mucho porque no se hace nada con el resultado. Normalmente se combinan más de un operador para crear expresiones más útiles. La expresión siguiente es una combinación entre dos operadores, uno realiza una operación matemática y el otro sirve para guardar el resultado.

miVariable = 23 * 5

En el ejemplo anterior, el operador * se utiliza para realizar una multiplicación y el operador = se utiliza para asignar el resultado en una variable, de modo que guardemos el valor para su posterior uso.

Los operadores se pueden clasificar según el tipo de acciones que realizan. A continuación vamos a ver cada uno de estos grupos de operadores y describiremos la función de cada uno.

Operadores aritméticos

Son los utilizados para la realización de operaciones matemáticas simples como la suma, resta o multiplicación. En javascript son los siguientes:

+ Suma de dos valores
- Resta de dos valores, también puede utilizarse para cambiar el signo de un número si lo utilizamos con un solo operando -23
* Multiplicación de dos valores
/ División de dos valores
% El resto de la división de dos números (3%2 devolvería 1, el resto de dividir 3 entre 2)
++ Incremento en una unidad, se utiliza con un solo operando
-- Decremento en una unidad, utilizado con un solo operando

Ejemplos
precio = 128 //introduzco un 128 en la variable precio
unidades = 10 //otra asignación, luego veremos operadores de asignación
factura = precio * unidades //multiplico precio por unidades, obtengo el valor factura
resto = factura % 3 //obtengo el resto de dividir la variable factura por 3
precio++ //incrementa en una unidad el precio (ahora vale 129)

Operadores de asignación

Sirven para asignar valores a las variables, ya hemos utilizado en ejemplos anteriores el operador de asignación =, pero hay otros operadores de este tipo, que provienen del lenguaje C y que muchos de los lectores ya conocerán.

= Asignación. Asigna la parte de la derecha del igual a la parte de la izquierda. A al derecha se colocan los valores finales y a la izquierda generalmente se coloca una variable donde queremos guardar el dato.
+= Asignación con suma. Realiza la suma de la parte de la derecha con la de la izquierda y guarda el resultado en la parte de la izquierda.
-= Asignación con resta
*= Asignación de la multiplicación
/= Asignación de la división
%= Se obtiene el resto y se asigna

Ejemplos
ahorros = 7000 //asigna un 7000 a la variable ahorros
ahorros += 3500 //incrementa en 3500 la variable ahorros, ahora vale 10500
ahorros /= 2 //divide entre 2 mis ahorros, ahora quedan 5250

En el siguiente artículo seguiremos conociendo otros de los operadores de Javascript: Operadores de cadenas, operadores lógicos y operadores condicionales.

Operadores de cadenas

Las cadenas de caracteres, o variables de texto, también tienen sus propios operadores para realizar acciones típicas sobre cadenas. Aunque javascript sólo tiene un operador para cadenas se pueden realizar otras acciones con una serie de funciones predefinidas en el lenguaje que veremos más adelante.

+ Concatena dos cadenas, pega la segunda cadena a continuación de la primera.

Ejemplo
cadena1 = "hola"
cadena2 = "mundo"
cadenaConcatenada = cadena1 + cadena2 //cadena concatenada vale "holamundo"


Un detalle importante que se puede ver en este caso es que el operador + sirve para dos usos distintos, si sus operandos son números los suma, pero si se trata de cadenas las concatena. Esto pasa en general con todos los operadores que se repiten en el lenguaje, javascript es suficientemente listo para entender que tipo de operación realizar mediante una comprobación de los tipos que están implicados en élla.

Un caso que resultaría confuso es el uso del operador + cuando se realiza la operación con operadores texto y numéricos entremezclados. En este caso javascript asume que se desea realizar una concatenación y trata a los dos operandos como si de cadenas de caracteres se trataran, incluso si la cadena de texto que tenemos fuese un número. Esto lo veremos más fácilmente con el siguiente ejemplo.

miNumero = 23
miCadena1 = "pepe"
miCadena2 = "456"
resultado1 = miNumero + miCadena1 //resultado1 vale "23pepe"
resultado2 = miNumero + miCadena2 //resultado2 vale "23456"
miCadena2 += miNumero //miCadena2 ahora vale "45623"


Como hemos podido ver, también en el caso del operador +=, si estamos tratando con cadenas de texto y números entremezclados, tratará a los dos operadores como si fuesen cadenas.

Nota: Como se puede haber imaginado, faltan muchas operaciones típicas a realizar con cadenas, para las cuales no existen operadores. Es porque esas funcionalidades se obtienen a través de la clase String de Javascript, que veremos más adelante.

Operadores lógicos

Estos operadores sirven para realizar operaciones lógicas, que son aquellas que dan como resultado un verdadero o un falso, y se utilizan para tomar decisiones en nuestros scripts. En vez de trabajar con números, para realizar este tipo de operaciones se utilizan operandos boleanos, que conocimos anteriormente, que son el verdadero (true) y el falso (false). Los operadores lógicos relacionan los operandos boleanos para dar como resultado otro operando boleano, tal como podemos ver en el siguiente ejemplo.

Si tengo hambre y tengo comida entonces me pongo a comer

Nuestro programa Javascript utilizaría en este ejemplo un operando boleano para tomar una decisión. Primero mirará si tengo hambre, si es cierto (true) mirará si dispongo de comida. Si son los dos ciertos, se puede poner a comer. En caso de que no tenga comida o que no tenga hambre no comería, al igual que si no tengo hambre ni comida. El operando en cuestión es el operando Y, que valdrá verdadero (true) en caso de que los dos operandos valgan verdadero.

Nota: Para no llevarnos a engaño, cabe decir que los operadores lógicos pueden utilizarse en combinación con tipos de datos distintos de los boleanos, pero en este caso debemos utilizarlos en expresiones que los conviertan en boleanos. En el siguiente grupo de operadores que vamos a tratar en este artículo hablaremos sobre los operadores condicionales, que se pueden utilizar junto con los operadores lógicos para realizar sentencias todo lo complejas que necesitemos. Por ejemplo:

if (x==2 && y!=3){
   //la variable x vale 2 y la variable y es distinta de tres
}

En la expresión condicional anterior estamos evaluando dos comprobaciones que se relacionan con un operador lógico. Por una parte x==2 devolverá un true en caso que la variable x valga 2 y por otra, y!=3 devolverá un true cuando la variable y tenga un valor distinto de 3. Ambas comprobaciones devuelven un boleano cada una, que luego se le aplica el operador lógico && para comprobar si ambas comprobaciones se cumplieron al mismo tiempo.

Sobra decir que, para ver ejemplos de operadores condicionales, necesitamos aprender estructuras de control como if, a las que no hemos llegado todavía.

! Operador NO o negación. Si era true pasa a false y viceversa.
&& Operador Y, si son los dos verdaderos vale verdadero.
|| Operador O, vale verdadero si por lo menos uno de ellos es verdadero.

Ejemplo
miBoleano = true
miBoleano = !miBoleano //miBoleano ahora vale false
tengoHambre = true
tengoComida = true
comoComida = tengoHambre && tengoComida

Operadores condicionales

Sirven para realizar expresiones condicionales todo lo complejas que deseemos. Estas expresiones se utilizan para tomar decisiones en función de la comparación de varios elementos, por ejemplo si un numero es mayor que otro o si son iguales.

Nota: Por supuesto, los operadores condicionales sirven también para realizar expresiones en las que se comparan otros tipos de datos. Nada impide comparar dos cadenas, para ver si son iguales o distintas, por ejemplo. Incluso podríamos comparar boleanos.

Los operadores condicionales se utilizan en las expresiones condicionales para tomas de decisiones. Como estas expresiones condicionales serán objeto de estudio más adelante será mejor describir los operadores condicionales más adelante. De todos modos aquí podemos ver la tabla de operadores condicionales.

== Comprueba si dos valores son iguales
!= Comprueba si dos valores son distintos
> Mayor que, devuelve true si el primer operando es mayor que el segundo
< Menor que, es true cuando el elemento de la izquierda es menor que el de la derecha
>= Mayor igual
<= Menor igual

Veremos ejemplos de operadores condicionales cuando expliquemos estructuras de control, como la condicional if.

De manera adicional, en este texto veremos un asunto de bastante importancia en la programación en general, que es la precedencia de operadores, que debemos tener en cuenta siempre que utilicemos diversos operadores en una misma expresión, para que se relacionen entre ellos y se resuelvan de la manera habíamos planeado.

Operadores a nivel de bit

Estos son muy poco corrientes y es posible que nunca los llegues a utilizar. Su uso se realiza para efectuar operaciones con ceros y unos. Todo lo que maneja un ordenador son ceros y unos, aunque nosotros utilicemos números y letras para nuestras variables en realidad estos valores están escritos internamente en forma de ceros y unos. En algunos caso podremos necesitar realizar operaciones tratando las variables como ceros y unos y para ello utilizaremos estos operandos. En este manual se nos queda un poco grande realizar una discusión sobre este tipo de operadores, pero aquí podréis ver estos operadores por si algún día os hacen falta.

& Y de bits
^ Xor de bits
| O de bits
<< >> >>> >>>= >>= <<= Varias clases de cambios

Precedencia de los operadores

La evaluación de una sentencia de las que hemos visto en los ejemplos anteriores es bastante sencilla y fácil de interpretar, pero cuando en una sentencia entran en juego multitud de operadores distintos puede haber una confusión a la hora de interpretarla y dilucidar qué operadores son los que se ejecutan antes que otros. Para marcar unas pautas en la evaluación de las sentencias y que estas se ejecuten siempre igual y con sentido común existe la precedencia de operadores, que no es más que el orden por el que se irán ejecutando las operaciones que ellos representan. En un principio todos los operadores se evalúan de izquierda a derecha, pero existen unas normas adicionales, por las que determinados operadores se evalúan antes que otros. Muchas de estas reglas de precedencia están sacadas de las matemáticas y son comunes a otros lenguajes, las podemos ver a continuación.

() [] . Paréntesis, corchetes y el operador punto que sirve para los objetos
! - ++ -- negación, negativo e incrementos
* / % Multiplicación división y módulo
+- Suma y resta
<< >> >>> Cambios a nivel de bit
< <= > >= Operadores condicionales
== != Operadores condicionales de igualdad y desigualdad
& ^ | Lógicos a nivel de bit
&& || Lógicos boleanos
= += -= *= /= %= <<= >>= >>>= &= ^= != Asignación

En los siguientes ejemplos podemos ver cómo las expresiones podrían llegar a ser confusas, pero con la tabla de precedencia de operadores podremos entender sin errores cuál es el orden por el que se ejecutan.

12 * 3 + 4 - 8 / 2 % 3

En este caso primero se ejecutan los operadores * / y %, de izquierda a derecha, con lo que se realizarían estas operaciones. Primero la multiplicación y luego la división por estar más a la izquierda del módulo.

36 + 4 - 4 % 3

Ahora el módulo.

36 + 4 - 1

Por último las sumas y las restas de izquierda a derecha.

40 - 1

Lo que nos da como resultado el valor siguiente.

39

De todos modos, es importante darse cuenta que el uso de los paréntesis puede ahorrarnos muchos quebraderos de cabeza y sobretodo la necesidad de sabernos de memoria la tabla de precedencia de los operadores. Cuando veamos poco claro el orden con el que se ejecutarán las sentencias podemos utilizarlos y así forzar que se evalúe antes el trozo de expresión que se encuentra dentro de los paréntesis.

Para acabar con el tema de operadores nos queda por ver un último operador un tanto especial, llamado typeof.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Safiro

06/9/2006
El manual esta muy bueno solo que me gustaria que hubiera link hacia paginas que tuvieran javascript para poder mirar su codigo

midesweb

27/9/2010
Ejemplos Javascript
Es verdad que este manual no tiene muchos ejemplos, pero es que estamos aprendiendo cosas tan básicas que no hay mucho pie a hacerlos. Pero si sigues la lectura encontrarás muchos ejemplos.

adrian

01/3/2011
CODIGO JAVASCRIPT
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>

<script>

function enmascaratexto(objeto,tipo)
{
var texto=objeto.value;
var largotexto = texto.length;
var letramascara;
var letratexto;
var enmascarado="";
var analisa="";
var aux=0;
switch (tipo)
{
case "CUIT": var tipomascara="99-99999999-9"; break;
case "FECHA": var tipomascara="99/99/9999"; break;
}
var largomascara=tipomascara.length;
if( largotexto>largomascara ){ texto=texto.substr(0,largomascara); }
for(aux=0;aux<=largotexto;aux++)
{
letramascara=tipomascara.charAt(aux);
letratexto=texto.charAt(aux);
switch (letramascara)
{
case "9": if( !isNaN(letratexto) && letratexto!=" " ){ enmascarado=enmascarado+letratexto; } break;
case "/": if( isNaN(letratexto) ){ enmascarado=enmascarado+"/"; } break;
case "-": if( isNaN(letratexto) ){ enmascarado=enmascarado+"-"; } break;
}
}
if( largotexto==largomascara )
{
switch (tipo)
{
case "FECHA": analisa=enmascarado.split("/");
if( parseInt(analisa[0])>31 || parseInt(analisa[0])==0 ){ enmascarado="31/"; } else { enmascarado=analisa[0]+"/"; }
if( parseInt(analisa[1])>12 || parseInt(analisa[1])==0 ){ enmascarado=enmascarado+"12/"; } else { enmascarado=enmascarado+analisa[1]+"/"; }
if( parseInt(analisa[2])<2000 ){ enmascarado=enmascarado+"2000"; } else { enmascarado=enmascarado+analisa[2]; }
break;
case "CUIT": analisa=enmascarado.split("-");
if( parseInt(analisa[0])<10 ){ enmascarado=""; break; }
analisa=enmascarado.split("");
aux=analisa[0]*5 + analisa[1]*4 + analisa[3]*3 + analisa[4]*2 + analisa[5]*7 + analisa[6]*6 + analisa[7]*5 + analisa[8]*4 + analisa[9]*3 + analisa[10]*2;
aux=aux%11;
aux=11-aux;
analisa=enmascarado.split("-");
enmascarado=analisa[0]+"-"+analisa[1]+"-"+aux;
break;
}
}
objeto.value=enmascarado;
}

</script>
</head>
<body>


<form name="formulario">
<input type="text" name="mocosoft" onkeyup="enmascaratexto(this,'CUIT')"/>
</form>

</body>
</html>