Cursos WebJavaScriptProgramaçãoTutoriais

Operadores JavaScript

Foto de Lucas Lemos Miranda Lucas Lemos Miranda1 de julho de 2019
0 16 8 minutos de leitura

O que é um operador?

Conforme a própria palavra diz, operador é um elemento de um programa aplicado a um ou mais operandos em uma expressão ou instrução.

Por exemplo: 4+5 é igual a 9.

Sendo assim, 4 e 5 são chamados operandos e ‘+’ é chamado de operador. O JavaScript contem os seguintes tipos de operadores.

  • Operadores aritméticos.
  • Operadores de Comparação.
  • Operadores lógicos(ou relacionais).
  • Operadores de atribuição.
  • Operadores condicionais(ou ternários).

Enfim, vamos dar uma olhada em todos os operadores, um por um.

Operadores aritméticos

O JavaScript suporta os seguintes operadores aritméticos:

Suponhamos que a variável A contenha 10 e a variável B contenha 20, então:

#Operador e Descrição
1+ (Adição) Soma os dois operandos.
Ex: A + B = 30
2– (subtração) Subtrai o segundo operando do primeiro.
Ex: A – B = -10
3* (Multiplicação) Multiplica os dois operandos.
Ex: A * B = 200
4/ (Divisão) Divide o numerador pelo denominador.
Ex: B / A = 2
5% (Módulo) Gera o restante de uma divisão inteira.
Ex: B% A = 0
6++ (incremento) Aumenta um valor inteiro por um.
Ex: A ++ = 11
7– (Decremento) Diminui um valor inteiro por um.
Ex: A– = 9

Obs: O operador de adição(+) funciona tanto para números quanto para strings(textos ou caracteres). 

Por exemplo: “a” + 10 = “a10”.

Exemplo

O código a seguir mostra como usar operadores aritméticos em JavaScript.

<html>
   <body>
   
      <script type="text/javascript">
         <!--
            var a = 23;
            var b = 20;
            var c = "Teste";
            var quebradelinha = "<br /><br />";
         
            document.write("a + b = ");
            resultado = a + b;
            document.write(resultado);
            document.write(quebradelinha);
         
            document.write("a - b = ");
            resultado = a - b;
            document.write(resultado);
            document.write(quebradelinha);
         
            document.write("a / b = ");
            resultado = a / b;
            document.write(resultado);
            document.write(quebradelinha);
         
            document.write("a % b = ");
            resultado = a % b;
            document.write(resultado);
            document.write(quebradelinha);
         
            document.write("a + b + c = ");
            resultado = a + b + c;
            document.write(resultado);
            document.write(quebradelinha);
         
            a = ++a;
            document.write("++a = ");
            resultado = ++a;
            document.write(resultado);
            document.write(quebradelinha);
         
            b = --b;
            document.write("--b = ");
            resultado = --b;
            document.write(resultado);
            document.write(quebradelinha);
         //-->
      </script>
   </body>
</html>

Resultado:

Operadores de Comparação

O JavaScript suporta os seguintes operadores de comparação:

Suponha que a variável A detenha 10 e a variável B detenha 20, então:

#Operador e Descrição
1== (Igual) Verifica se o valor dos dois operandos é igual ou não, se sim, a condição se torna verdadeira.
Ex: (A == B) não é verdade.
2!= (Não igual) Verifica se o valor dos dois operandos são iguais ou não, se os valores não são iguais, então a condição se torna verdadeira.
Ex: (A! = B) é verdade.
3> (Maior que) Verifica se o valor do operando esquerdo é maior que o valor do operando direito, se sim, a condição se torna verdadeira.
Ex: (A> B) não é verdade.
4< (Menos que) Verifica se o valor do operando esquerdo é menor que o valor do operando direito, se sim, a condição se torna verdadeira.
Ex: (A <B) é verdade.
5>= (Maior que ou igual a) Verifica se o valor do operando da esquerda é maior ou igual ao valor do operando da direita, se sim, a condição se torna verdadeira.
Ex: (A> = B) não é verdade.
6<= (Menor que ou igual a) Verifica se o valor do operando esquerdo é menor ou igual ao valor do operando direito, se sim, a condição se torna verdadeira.
Ex: (A <= B) é verdade.

Exemplo

O código a seguir mostra como usar operadores de comparação no JavaScript.

<html>
   <body>  
      <script type="text/javascript">
         <!--
            var a = 10;
            var b = 20;
            var quebradelinha = "<br />";
      
            document.write("(a == b) => ");
            resultado = (a == b);
            document.write(resultado);
            document.write(quebradelinha);
         
            document.write("(a < b) => ");
            resultado = (a < b);
            document.write(resultado);
            document.write(quebradelinha);
         
            document.write("(a > b) => ");
            resultado = (a > b);
            document.write(resultado);
            document.write(quebradelinha);
         
            document.write("(a != b) => ");
            resultado = (a != b);
            document.write(resultado);
            document.write(quebradelinha);
         
            document.write("(a >= b) => ");
            resultado = (a >= b);
            document.write(resultado);
            document.write(quebradelinha);
         
            document.write("(a <= b) => ");
            resultado = (a <= b);
            document.write(resultado);
            document.write(quebradelinha);
         //-->
      </script>      
   </body>
</html>

Resultado

(a == b) => false 
(a < b) => true 
(a > b) => false 
(a != b) => true 
(a >= b) => false 
a <= b) => true

Operadores lógicos

JavaScript suporta os seguintes operadores lógicos –

Suponha que a variável A contenha 10 e a variável B contenha 20, então:

#Operador e Descrição
1&& (lógica AND) Se ambos os operandos forem diferentes de zero, a condição se tornará verdadeira.
Ex:  (A && B) é verdade.
2|| (Lógica OU) Se algum dos dois operandos for diferente de zero, a condição se tornará verdadeira.
Ex: (A || B) é verdade.
3! (NÃO lógico) Reverte o estado lógico de seu operando. Se uma condição for verdadeira, então o operador Lógico NOT tornará falsa.
Ex: ! (A && B) é falso.

Exemplo

Experimente o seguinte código para aprender como implementar operadores lógicos em JavaScript.

<html>
   <body>   
      <script type="text/javascript">
         <!--
            var a = true;
            var b = false;
            var quebradelinha = "<br />";
      
            document.write("(a && b) => ");
            resultado = (a && b);
            document.write(resultado);
            document.write(quebradelinha);
         
            document.write("(a || b) => ");
            resultado = (a || b);
            document.write(resultado);
            document.write(quebradelinha);
         
            document.write("!(a && b) => ");
            resultado = (!(a && b));
            document.write(resultado);
            document.write(quebradelinha);
         //-->
      </script>      
   </body>
</html>

Resultado

(a && b) => false 
(a || b) => true 
!(a && b) => true

Operadores Bitwise(bit a bit)

O JavaScript suporta os seguintes operadores bitwise:

Por exemplo, suponhamos que a variável A contenha o valor 2 e a variável B contenha o valor 3, então:

#Operador e Descrição
1& (BitWise AND) Ele executa uma operação AND booleana em cada bit de seus argumentos inteiros.
Ex: (A & B) é 2.
2| (BitWise OR) Ele executa uma operação OR booleana em cada bit de seus argumentos inteiros.
Ex: (A | B) é 3.
3^ (Bitwise XOR) Ele executa uma operação OR exclusiva booleana em cada bit de seus argumentos inteiros. OR exclusivo significa que o operando um é verdadeiro ou o operando dois é verdadeiro, mas não ambos.
Ex: (A ^ B) é 1.
4~ ( BitWise Not) É um operador unário e opera invertendo todos os bits no operando.
Ex: (~ B) é -4.
5<< (deslocamento da esquerda) Ele move todos os bits em seu primeiro operando para a esquerda pelo número de lugares especificado no segundo operando. Novos bits são preenchidos com zeros. Mudar um valor deixado por uma posição é equivalente a multiplicá-lo por 2, deslocando duas posições é equivalente a multiplicar por 4 e assim por diante.
Ex: (A << 1) é 4.
6>> (deslocamento para a direita) Operador de deslocamento à direita binário. O valor do operando da esquerda é movido para a direita pelo número de bits especificado pelo operando da direita.
Ex: (A >> 1) é 1.
7>>> (deslocamento à direita com zero)Este operador é exatamente como o operador >>, exceto que os bits deslocados à esquerda são sempre zero.
Ex: (A >>> 1) é 1.

Exemplo

Experimente o seguinte código para implementar o operador Bitwise em JavaScript.

<html>
   <body>   
      <script type="text/javascript">
         <!--
            var a = 2; // Bit presentation 10
            var b = 3; // Bit presentation 11
            var quebradelinha = "<br />";
         
            document.write("(a & b) => ");
            resultado = (a & b);
            document.write(resultado);
            document.write(quebradelinha);
         
            document.write("(a | b) => ");
            resultado = (a | b);
            document.write(resultado);
            document.write(quebradelinha);
         
            document.write("(a ^ b) => ");
            resultado = (a ^ b);
            document.write(resultado);
            document.write(quebradelinha);
         
            document.write("(~b) => ");
            resultado = (~b);
            document.write(resultado);
            document.write(quebradelinha);
         
            document.write("(a << b) => ");
            resultado = (a << b);
            document.write(resultado);
            document.write(quebradelinha);
         
            document.write("(a >> b) => ");
            resultado = (a >> b);
            document.write(resultado);
            document.write(quebradelinha);
         //-->
      </script>      
   </body>
</html>

Resultado

(a & b) => 2 
(a | b) => 3 
(a ^ b) => 1 
(~b) => -4 
(a << b) => 16 
(a >> b) => 0

Operadores de atribuição

O JavaScript suporta os seguintes operadores de atribuição –

#Operador e Descrição
1= (Atribuição simples) Atribui valores do operando do lado direito para o operando do lado esquerdo
Ex: C = A + B irá atribuir o valor de A + B em C.
2+= (Adicionar e atribuição) Adiciona ao operando direito o operando esquerdo e atribui o resultado ao operando esquerdo.
Ex: C += A é equivalente a C = C + A
3-= (Subtrair e Atribuição) Subtrai o operando direito do operando esquerdo e atribui o resultado ao operando esquerdo.
Ex: C -= A é equivalente a C = C – A
4*= (Multiplicação e atribuição) Multiplica o operando da direita pelo operando da esquerda e atribui o resultado ao operando da esquerda.Ex: C *= A é equivalente a C = C * A
5/= (Dividir e Atribuição)Ele divide o operando da esquerda com o operando da direita e atribui o resultado ao operando da esquerda.
Ex: C /= A é equivalente a C = C / A
6%= (Módulos e atribuição)Ele usa módulo usando dois operandos e atribui o resultado ao operando esquerdo.
Ex: C% = A é equivalente a C = C% A

Obs: A mesma lógica se aplica aos operadores Bitwise, de modo que eles se tornarão semelhantes a <<=, >>=, >>=, &=, |= e ^=.

Exemplo

Experimente o seguinte código para implementar os operadores de atribuição em JavaScript.

<html>
   <body>   
      <script type="text/javascript">
         <!--
            var a = 33;
            var b = 10;
            var quebradelinha = "<br />";
         
            document.write("Valor de a => (a = b) => ");
            resultadoado = (a = b);
            document.write(resultadoado);
            document.write(quebradelinha);
         
            document.write("Valor de a => (a += b) => ");
            resultadoado = (a += b);
            document.write(resultadoado);
            document.write(quebradelinha);
         
            document.write("Valor de a => (a -= b) => ");
            resultadoado = (a -= b);
            document.write(resultadoado);
            document.write(quebradelinha);
         
            document.write("Valor de a => (a *= b) => ");
            resultadoado = (a *= b);
            document.write(resultadoado);
            document.write(quebradelinha);
         
            document.write("Valor de a => (a /= b) => ");
            resultadoado = (a /= b);
            document.write(resultadoado);
            document.write(quebradelinha);
         
            document.write("Valor de a => (a %= b) => ");
            resultadoado = (a %= b);
            document.write(resultadoado);
            document.write(quebradelinha);
         //-->
      </script>
   </body>
</html>

Resultado

Valor de a => (a = b) => 10
Valor de a => (a += b) => 20 
Valor de a => (a -= b) => 10 
Valor de a => (a *= b) => 100 
Valor de a => (a /= b) => 10
Valor de a => (a %= b) => 0

Operador Diverso

Vamos discutir aqui dois operadores bastante úteis em JavaScript: o operador condicional ( ? : ) e o operador typeof .

Operador Condicional ( ? : )

O operador condicional primeiro avalia uma expressão para um valor verdadeiro ou falso e, em seguida, executa uma das duas instruções dadas, dependendo do resultado da avaliação.

#Operador e Descrição
1? : (Condicional) Se a condição é verdadeira? Então, valor X: Caso contrário, valor Y

Exemplo

Experimente o seguinte código para entender como o Operador Condicional funciona em JavaScript.

<html>
   <body>   
      <script type = "text/javascript">
         <!--
            var a = 10;
            var b = 20;
            var quebradelinha = "<br />";
         
            document.write ("((a > b) ? 100 : 200) => ");
            resultado = (a > b) ? 100 : 200;
            document.write(resultado);
            document.write(quebradelinha);
         
            document.write ("((a < b) ? 100 : 200) => ");
            resultado = (a < b) ? 100 : 200;
            document.write(resultado);
            document.write(quebradelinha);
         //-->
      </script>      
   </body>
</html>

Resultado

((a > b) ? 100 : 200) => 200 
((a < b) ? 100 : 200) => 100

Operador typeof 

O operador typeof é um operador unário colocado antes de seu único operando, que pode ser de qualquer tipo. Seu valor é uma string indicando o tipo de dados do operando.

O operador typeof é avaliado como “number”, “string” ou “boolean” se seu operando for um número, string ou valor booleano e retorna true ou false com base na avaliação.

Aqui está uma lista dos valores de retorno para o tipo de operador.

TypeRetorno de typeof
Number“number”
String“string”
Boolean“boolean”
Object“object”
Function“function”
Undefined“undefined”
Null“object”

Exemplo

O código a seguir mostra como implementar o operador typeof.

<html>
   <body>      
      <script type="text/javascript">
         <!--
            var a = 10;
            var b = "String";
            var quebradelinha = "<br />";
         
            resultado = (typeof b == "string" ? "B é uma String" : "B é um número");
            document.write("resultado => ");
            document.write(resultado);
            document.write(quebradelinha);
         
            resultado = (typeof a == "string" ? "A é uma String" : "A é um número");
            document.write("resultado => ");
            document.write(resultado);
            document.write(quebradelinha);
         //-->
      </script>      
   </body>
</html>

Resultado

resultado => B é uma String 
resultado => A é um número

Gostou do artigo? deixe um comentário para nos incentivar!

Etiquetas
Foto de Lucas Lemos Miranda Lucas Lemos Miranda1 de julho de 2019
0 16 8 minutos de leitura
Foto de Lucas Lemos Miranda

Lucas Lemos Miranda

Criador do site TecForest, aprendi PHP aos 14 anos e desde então continuo estudando e procurando aprender mais sobre programação. Sou apaixonado por tecnologia e tenho como Hobby Blogs e Páginas. Me formei em Análise e Desenvolvimento de Sistemas em 2016, também sou Técnico em Informática e em Manutenção em Celulares.

Artigos relacionados

Como criar um menu horizontal responsivo

13 de fevereiro de 2020

Switch Case JavaScript

4 de março de 2021

Programação e desenvolvimento em PHP e Java são áreas com maior oferta de vagas

7 de setembro de 2017
Títulos e outros

Títulos do H1 ao H6 em HTML

4 de setembro de 2019

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Verifique também
Fechar
Botão Voltar ao topo