Entendendo Operadores em Javascript

Variáveis e dados são inúteis sem uma forma de manipulá-los, sem uma forma de alterá-los ou de fazer com que interajam entre si. Um programa é composto por uma série de frases (declarações) escritas em uma determinada linguagem de programação, que são compiladas, ou interpretadas, para que um determinado conjunto de ações seja executado. Ações complexas podem ser obtidas através da combinação, ou sequência, de ações simples. A forma mais simples de combinar, manipular e alterar variáveis em javascript para a criação de ações é através do uso de operadores.

Operadores são símbolos, ou palavras, capazes de executar uma ação entre dois valores diferentes ou, em apenas um valor específico. Já vimos, anteriormente, que podemos usar o sinal [math]=[/math] para atribuir um valor qualquer a uma determinada variável:

[javascript]
var nome = "depijama";
[/javascript]

Neste caso lemos esta declaração como: ‘nome recebe depijama’. E é exatamente isto que acontece o valor ‘depijama’ será armazenado em um compartimento de memória chamado nome. O sinal [math]=[/math] é um operador aritmético comum a muitas linguagens de programação, inclusive nosso amado, idolatrado, salve salve… javascript.

Qualquer declaração que contenha um operador resultará em um valor. Chamaremos de avaliação ao processo complexo executado por uma linguagem de programação para execução de uma determinada declaração. Assim, no exemplo anterior, a variável nome terá o valor “depijama” depois que a declaração seja avaliada pelo compilador / interpretador.

Classificação de operadores

Primeiro, e talvez mais importante, podemos dividir os operadores utilizados no javascript em dois grandes grupos os operadores unários e o binários. Os primeiros dizem respeito as palavras e símbolos reservados para operações sobre um único valor e os segundos, como você já deve ter deduzido, exigem dois valores para que sejam avaliados.

Observação: existe uma única exceção. Em javascript existe um e somente um operador trinário. O [math]?:[/math] que veremos ainda neste artigo.

Quanto aos operadores binários e unários eles podem ser divididos em:

Operadores aritméticos

+ Operador positivo/adição : se utilizado de forma unária converte o valor do operando para number, sempre que possível. Em forma binária procede a adição entre dois operandos convertidos para number sempre que possível.
[javascript]
var positivo = +"5"; // converte o string 5 no number 5 positivo
var resultado = 1 + positivo: // resultado conterá 6
var resultado = "Esta " + "coisa"; // resultado conterá "Esta coisa"
[/javascript]

Observe: Caso os operandos sejam do tipo string o operador positivo/adição executará a concatenação destes operandos gerando um string novo composto dos dois operandos.

++ Operador increment (incremento): adiciona o valor 1 ao operando e devolve o deste operando antes ou depois da adição. Se for possível e necessário, o operando será convertido para number.[javascript]
var i = 1, j = ++i; // tanto j quanto i terão valor 2 pré incremento
var i = 1, j = i++; // j terá valor 1 e i terá valor 2 pós incremento
[/javascript]
Operador negativo/subração: se utilizado de forma unária converte o valor do operando para number e devolve o valor negativo deste number, em forma binária procede a subtração entre dois operandos. Se possível, e necessário, os operandos serão convertidos para number.[javascript]
var negativo = -"4";// negativo conterá o <em>number</em> -4
var negativo = -negativo; //negativo conterá o number 4
var subtracao = 5 – negativo;// subtracao conterá o number 1
[/javascript]
Operador decremente (decrement): decrementa o valor 1 de um operando, se possível e necessário, converte o operando para number e devolve o resultado antes ou depois de decrementar.[javascript]
var i = 1, j = –i; // tanto j quanto i terão valor 0 pré decremento
var i = 1, j = i–; // j terá valor 1 e i terá valor 0 pós decremento
[/javascript]
* Operador multiplicar: devolve o resultado da multiplicação de dois operandos do tipo number. Se for possível os valores serão convertidos para number. Quando a conversão for impossível retornará um valor do tipo NaN.
[javascript]
var op1 =5;
var op2 = 3;
var op3 = "5";
var op4 = "cinco";
var resultado = op1 * op2; // resultado conterá o <em>number</em> 15
var resultado = resultado * op3;// resultado conterá o <em>number</em> 75
var resultado = resultado *op4; // resultado conterá um <em>NaN
</em>[/javascript]
/ Operador dividir: devolve o resultado de divisão entre dois valores do tipo number. Se for possível, e necessário, os valores serão convertidos para number. Quando a conversão for impossível retornará um valor do tipo NaN.
[javascript]
var op1 =15;
var op2 = 3;
var op3 = "1";
var op4 = "cinco";
var resultado = op1 / op2; // resultado conterá o <em>number</em> 5
var resultado = resultado / op3;// resultado conterá o <em>number</em> 5
var resultado = resultado / op4; // resultado conterá um <em>NaN
</em>var resultado = resultado / 0; // resultado conterá <em>infinity</em>
[/javascript]
% Operador resto (modulus): devolve o resto de uma divisão entre os dois operandos do tipo number. Assim como os operandos [math] +, -, *, / [/math] se possível o valor será convertido para number se não devolverá um NaN.
[javascript]
var op1 =15;
var op2 = 3;
var op3 = "4";
var op4 = "cinco";
var resultado = op1 % op2; // resultado conterá o number 0
var resultado = op1 % op3;// resultado conterá o number 3 (15/4 resta 3)
var resultado = resultado % op4; // resultado conterá um NaN
[/javascript]

Observação: ainda que o operador resto seja tipicamente usado com inteiros ele também funciona com números de ponto flutuante. Assim sendo, [math] 5.6 % 2.1 [/math] retornará 1.3999999999999995 que não tem nenhum sentido a menos que consideremos as especificações de ponto flutuante da norma IEEE754.

Operadores condicionais

== Operador igual: retorna verdadeiro se os dois operandos forem iguais. Se possível, os operandos serão convertidos para o mesmo tipo antes da comparação.
[javascript]
var op1 =15;
var op2 = "15";
var op3 = "quinze";
var compara = op1 == op2; // resultado conterá true
var resultado = op1 == op3;// resultado conterá false
[/javascript]
=== Operador estritamente igual: retorna verdadeiro se os dois operandos forem iguais e do mesmo tipo. Não há conversão
[javascript]
var op1 =15;
var op2 = "15";
var op3 = "quinze";
var compara = op1 === op2; // resultado conterá false
var resultado = op1 === op3;// resultado conterá false
[/javascript]
!= Operador diferente: retorna verdadeiro se os dois operadores forem diferentes. Se possível, os operandos serão convertidos para o mesmo tipo antes da comparação.
[javascript]
var op1 =15;
var op2 = "15";
var op3 = "quinze";
var compara = op1 != op2; // resultado conterá false
var resultado = op1 != op3;// resultado conterá true
[/javascript]
!== Operador estritamente diferente: retorna verdadeiro se os operandos forem do mesmo tipo mas de valores diferentes ou de tipos diferentes. Não há conversão de tipos.
[javascript]
var op1 =15;
var op2 = "15";
var op3 = "quinze";
var compara = op1 !== op2; // resultado conterá true
var resultado = op1 !== op3;// resultado conterá true
var resultado = op1 !== 15;// resultado conterá false
[/javascript]
> Operador maior: retorna verdadeiro se o primeiro operando for maior que o segundo. Se for possível, e necessário, os operandos serão convertidos antes da comparação. Quando os dois operandos forem do tipo string o operador [math] > [/math] considerará a ordem alfabética.
[javascript]
var op1 =15;
var op2 = "4";
var op3 = "quinze";
var op4 = "dezeseis";
var compara = op1 > op2; // resultado conterá true
var resultado = op1 > op3;// resultado conterá false
var resultado = op3 > op4; // resultado conterá verdadeiro,
[/javascript]
>= Operador maior ou igual: retornará true sempre que o primeiro operador for maior, ou igual, ao segundo operador. Se for possível, e necessário, os tipos serão convertidos antes da comparação. Quando os dois operandos forem do tipo string o operador [math] < [/math] considerará a ordem alfabética.
[javascript]
var op1 =15;
var op2 = "4";
var op3 = "quinze";
var op4 = "dezesseis";
var compara = op1 >= op2; // resultado conterá true
var resultado = op1 >= op3;// resultado conterá false
var resultado = op1 >= 15;// resultado conterá true
[/javascript]
< Operador menor: retorna verdadeiro se o primeiro operando for menor que o segundo. Se for possível, e necessário, os tipos serão convertidos para number antes da comparação.
[javascript]
var op1 =15;
var op2 = "4";
var op3 = "quinze";
var compara = op1 < op2; // resultado conterá false
var resultado = op1 < op3;// resultado conterá false
var resultado = op1 < 20;// resultado conterá true
[/javascript]
<= Operador menor ou igual: retorna verdadeiro se o primeiro operando for menor, ou igual, ao segundo. Se for possível, e necessário, os operandos serão convertidos para number antes da comparação.
[javascript]
var op1 =15;
var op2 = "4";
var op3 = "quinze";
var compara = op1 <= op2; // resultado conterá false
var resultado = op1 <= op3;// resultado conterá false
var resultado = op1 <= 20;// resultado conterá true
var resultado = op1 <= 15;// resultado conterá true
[/javascript]

Operadores lógicos

Tabela Verdade

&&

Operador e lógico (logical and): retorna verdadeiro se, e somente se, os dois operandos puderem ser convertidos para o valor boolean
true.

Operando 1

Operando 2

Resultado

Falso

Falso

Falso

Falso

Verdadeiro

Falso

Verdadeiro

Falso

Falso

Verdadeiro

Verdadeiro

Verdadeiro

|| Operador ou lógico (logical or): retorna falso se, e somente se, os dois operandos puderem ser convertidos para o valor boolean
false.

Operando 1

Operando 2

Resultado

Falso

Falso

Falso

Falso

Verdadeiro

Falso

Verdadeiro

Falso

Falso

Verdadeiro

Verdadeiro

Verdadeiro

! Operador não lógico (logical and): operador unário que retornará o boolean false se o operador for verdadeiro e o boolean true se o operador for falso.

Operando 1

Resultado

Falso

Verdadeiro

Verdadeiro

Falso

Considere que alguns operados podem ser convertidos para valores booleans antes da comparação. Operandos que possam ser convertidos para NaN,
null, 0, um string vazio (“”) ou undefined, serão convertidos para falso (boolean false) antes da comparação

Operadores de manipulação de bits

Os operadores desta categoria executam operações em baixo nível, diretamente nos bits, dos operandos. Trata-se de um conjunto de operadores cujo uso, normalmente, é restrito aos programadores mais avançados e operações mais complexas. Considere o seguinte: do ponto de vista dos operadores de manipulação de bits, os operandos são considerados como sendo inteiros binários de 32 bits. Sendo assim, um number 4, por exemplo, é visto como binário 100.

& Operador e (Bitwise AND): Retorna um 1 para cada bit onde ambos operandos possuem um 1.
[javascript]
var op1 =4;
var op2 = 2;
var op3 = 7;
var resultado = op1 & op2; // resultado conterá 0
var resultado = op1 & op3;// resultado conterá 4
var resultado = op3 & 3;// resultado conterá 3
[/javascript]
^ Operador xor (Bitwise XOR): retorna um 1 para cada posição onde exista um 1 em um dos operadores mas não nos dois operadores simultaneamente.
[javascript]
var op1 =4;
var op2 = 2;
var op3 = 7;
var resultado = op1 ^ op2; // resultado conterá 6
var resultado = op1 ^ op3;// resultado conterá 3
var resultado = op3 ^ 3;// resultado conterá 4
[/javascript]
| Operador ou (Bitwise OR): retorna um 1 para cada posição, onde existe um 1 em pelo menos um operando.
[javascript]
var op1 =4;
var op2 = 2;
var op3 = 7;
var resultado = op1 | op2; // resultado conterá 6
var resultado = op1 | op3;// resultado conterá 7
var resultado = op3 | 3;// resultado conterá 7
[/javascript]
~ Operador negação (Bitwise NOT): Inverte os bits do seu operador. Trocando 1 por 0 e vice-versa.
[javascript]
var op1 = 4;
var op2 = 2;
var op3 = 7;
var op4 = -12;
var resultado = ~op1; // resultado conterá -5
var resultado = ~op2;// resultado conterá -3
var resultado = ~op3;// resultado conterá -8
var resultado = ~op4;// resultado conterá 11
[/javascript]

Observe que todos os bits utilizados para a representação do operando serão invertidos. Neste caso, o bit mais significativo ficará com valor 1 indicando um valor negativo. Devido a forma como números são armazenados em memória o resultado deste operador é equivalente a inverter o sinal e subtrair um do resultado.

<< Operador deslocamento à esquerda (Left shift): move todos os bits do primeiro operando para esquerda o número de casas determinado pelo segundo operando. Este segundo operando deve, obrigatoriamente ser um número inteiro maior ou igual a 1 e menor ou igual a 31. O deslocamento começa no bit mais significativo do primeiro operando e termina preenchendo com zeros o bits que ficarem vazios a direita. Por fim, o 32º bit do original primeiro operando será perdido.
[javascript]
var op1 = 4;
var op2 = 2;
var op3 = 7;
var op4 = -12;
var resultado = op1 << 1; // resultado conterá 8
var resultado = op1 << 2;// resultado conterá 16
var resultado = op2 << 4;// resultado conterá 32
var resultado = op3 << 31;// resultado conterá -2147483648
var resultado = op4 << 1;// resultado conterá -24
[/javascript]

Observe que, graças a representação em binário, o deslocamento a esquerda resulta na multiplicação do primeiro operando por dois elevado a potência representada no segundo operando. Assim, 4 << 1 é igual [math] 4 * 2^1 = 4*2=8 [/math]. Porém é necessário ter cuidado e atenção. Se o deslocamento provocar um 1 no bit na posição 32 o valor resultado será negativo.

>> Operador deslocamento à direita (right shift): move todos os bits do primeiro operando para direita o número de casas determinado pelo segundo operando. Este segundo operando deve, obrigatoriamente ser um número inteiro maior ou igual a 1 e menor ou igual a 31. Durante a operação os bits mais à esquerda, mais significativos, serão preenchidos com 0 ou 1 de forma a conservar o sinal do primeiro operando.
[javascript]
var op1 = 4;
var op2 = 2;
var op3 = 7;
var op4 = -12;
var resultado = op1 >> 1; // resultado conterá 2
var resultado = op1 >> 2;// resultado conterá 1
var resultado = op2 >> 4;// resultado conterá 0
var resultado = op3 >> 31;// resultado conterá 0
var resultado = op4 >> 1;// resultado conterá -6
[/javascript]

Observe que o deslocamento à direita corresponde a divisão do primeiro operando pela número equivalente a dois elevando a potência especificada no segundo operando. Exceto quando o resultado desta divisão indicar um número real não inteiro. Neste caso o resultado será zero.

>>> Operador de deslocamento a direita sem preservação de sinal (Zero-fill right shift): Basicamente faz o mesmo que o operador de deslocamento a direita sem se preocupar em preservar o sinal do primeiro operando.

Operadores de atribuição

= Operador de atribuição: lê-se como recebe. Atribui o valor do Segundo operando ao primeiro. Usamos este operador em todos os exemplos até aqui.
+= Operador soma e atribui: soma os dois operandos e atribui o resultado ao primeiro.
[javascript]
var op1 = 4;
var op2 = 2;
var op1 += op2; // op1 conterá 6
var op2 += 3: // op2 conterá 5;
var op4 = "Bom ";
var op4 += "Dia"; // op4 conterá "Bom Dia"
[/javascript]

Observe que, em se tratando de operandos do tipo string o operador soma e atribui funciona concatenado estes operandos.

-= Operador subtrai e atribui: Subtrai o segundo operando do primeiro e atribui a este o resultado.
[javascript]
var op1 = 4;
var op2 = 2;
var op1 -= op2; // op1 conterá 2
var op2 -= 3: // op2 conterá -1;
[/javascript]
*= Operador multiplica e atribui: multiplica os dois operandos e atribui o valor ao primeiro deles.
[javascript]
var op1 = 4;
var op2 = 2;
var op1 *= op2; // op1 conterá 8
var op2 *= -3: // op2 conterá -6;
[/javascript]
/= Operador divide e atribui: divide o primeiro operando pelo segundo e atribui o resultado ao primeiro.
[javascript]
var op1 = 4;
var op2 = 2;
var op1 /= op2; // op1 conterá 2
var op2 /= 3: // op2 conterá 0.6666666666666666
[/javascript]
%= Operador resto e atribui: calcula o resto da divisão do primeiro operando pelo segundo e atribui este resultado ao primeiro operando.
[javascript]
var op1 = 4;
var op2 = 2;
var op1 %= op2; // op1 conterá 0
var op2 %= 3; // op2 conterá 2
var op1 % 2.3; // op1 conterá 1.7000000000000002
[/javascript]
&= Operador e e atribuição: realiza a operação e em cada bit dos dois operandos, da mesma forma que o operador de manipulação de bits e, e atribui o resultado ao primeiro operando.
^= Operador xor e atribuição: realiza a operação xor em cada um dos bits dos dois operadores, da mesma forma que o operador de manipulação de bits xor e atribui o resultado ao primeiro operando.
|= Operador ou e atribuição: realiza a operação ou em cada um dos bits dos dois operandos, da mesma forma que o operador de manipulação de bits ou e atribui o resultado ao primeiro operando.
<<= Operador deslocamento a esquerda e atribuição: realiza o deslocamento a esquerda, bit a bit, do primeiro operando de acordo com o número de casas indicado pelo segundo operando e atribui o resultado ao primeiro operando. Semelhante ao operador deslocamento a esquerda.
>>= Operador deslocamento a direita e atribuição: realiza o deslocamento a direita, bit a bit, do primeiro operando de acordo com o número de casas indicado pelo segundo operando e atribui o resultado ao primeiro operando. Semelhante ao operador deslocamento a direita.
>>>= Operador deslocamento a esquerda e atribuição sem preservação de sinal: realiza o deslocamento a esquerda, bit a bit, do primeiro operando de acordo com o número de casas indicado pelo segundo operando e atribui o resultado ao primeiro operando. Semelhante ao operador deslocamento a esquerda sem preservação de sinal.

Operadores com strings

+

Operador concatenação: Concatena dos strings e cria um string novo.
[javascript]
var txt1 = "Este é ";
var txt2 = "um novo dia.";
var resultado = txt1 + txt2; // resultado conterá "Este é um novo dia."
[/javascript]

+=

Operador concatena e atribui: realiza a concatenação dos strings contidos nos operados e atribui o resultado ao primeiro operando.[javascript]

var txt1 = "Este é ";

var txt2 = "um novo dia.";

var txt1 += txt2; // txt1 conterá "Este é um novo dia."

[/javascript]

Operadores especiais

Além dos operadores que vimos até agora, o javascript contém um conjunto de operadores especiais. Alguns se referem a manipulação do tipo object que ainda não foi abordado nesta série e, dessa forma, ficarão para mais tarde. Aqui apenas os operadores que tem relevância para o que vimos até o momento.

Operador condicional

O javascript possui um operador que pode ser utilizado para determinar a ação que deve ser executada em resposta a uma determinada condição lógica. Trata-se de uma forma de executar um if…then…else em uma única linha. Este operador, o único operador trinário do javascript tem a seguinte configuração:

[javascript]
// resultado = (condição)? Valor se verdadeiro: valor se falso;
var op1 =5;
var resultado = (op1 < 4)?true:false; // resultado conterá true
var resultado = (op1 < 4)?op1++:op1–; // resultado conterá 6 var resultado = x > 0 ? x : -x; // resultado conterá o módulo de x
[/javascript]

Observe que: o primeiro operando, sempre antes do sinal ? será sempre avaliado em busca de um resultado do tipo boolean. Os outros dois operandos, antes do : e depois do : podem ser de qualquer tipo e serão atribuídos como resposta de acordo com o resultado do primeiro operando.

Operador vírgula

Trata-se de um operador binário onde o primeiro operando será avaliado, o segundo operador será avaliado e apenas o resultado do segundo será devolvido. O operador vírgula só tem uso prático na especificação das condições do laço for e, desta forma, deixaremos para o futuro.

Operador typeof

Este operador, que já vimos anteriormente quando estudamos tipos de dados primitivos em javascript, retorna um valor do tipo string contendo o tipo de dado de seu único operando. Devolve um dos seguintes valores: number, string, object, function, boolean ou undefined.

[javascript]
var op1 =5;
var resultado = (typeof op1 == "string")? "texto": "não texto"; // resultado conterá "não texto"
var resultado = typeof(op1); // resultado conterá "number"
[/javascript]

Observe que: O typeof devolverá object se o operando for avaliado como null. Ou seja, para diferenciar o tipo object do tipo null o typeof é inútil. Além disso, como veremos no futuro, apesar de todas as funções em javascript serem uma espécie de objeto, o typeof devolve strings diferentes para funções e objetos. Isto para permitir a distinção entre objetos e outros tipos primitivos.

Operador void

A palavra void em inglês pode ser traduzida como vácuo, nada ou coisa nenhuma, dependendo do contexto. Em javascript significa que o operando será avaliado e não retornará nada. Trata-se de um operador unário que permitirá que seu operando seja avaliado mas garantirá que o retorno seja sempre undefined. Desta forma, o operador void só tem sentido quando o operando executa alguma ação internamente. O uso mais comum deste operador está na definição de URLs em javascript.

Precedência

A ordem que os operadores são avaliados em uma determinada declaração pode ser vista na tabela a seguir:

Precedência

Operador

direção

1

. []

esquerda para direita

new

direita para esquerda

2

()

esquerda para direita

3

++  

4

!  ~  (negation)  +(unary plus)  typeof  void  delete

direita para esquerda

5

*  /  %

esquerda para direita

6

+  

esquerda para direita

7

<< >> >>>

esquerda para direita

8

>  >= < <=

esquerda para direita

9

== != === !==

esquerda para direita

10

&

esquerda para direita

11

^

esquerda para direita

12

|

esquerda para direita

13

&&

esquerda para direita

14

||

esquerda para direita

15

?:

direita para esquerda

16

=  +=  -=  *=  /=  %=  &=  |=  ^=  <<=  >>=  >>>=

direita para esquerda

17

,

esquerda para direita