Operadores

Operadores de Atribuição

No universo do Javascript, nós podemos atribuir certos valores às nossas variáveis.

Se você acompanhou os conteúdos anteriores, você já deve ter notado que já usamos um operador de atribuição que é o famoso sinal de igual (=).

Como o próprio nome já nos diz, o operador de atribuição, atribuí um valor/dado a algum outro lugar, que nesse caso é a uma variável.

Vejamos alguns exemplos abaixo:

const a = 10;//Aqui estamos atribuindo o valor númerico 10 a variável chamada 'a'
var b = 'Micilini';//Aqui estamos atribuindo a string 'Micilini' a variável chamada 'b'
let boleano = true;//Aqui estamos atribuindo o valor booleano true a variável chamada 'booleano'

Existem algumas variações dos operadores de atribuição, mas para que você possa entende-los, é necessário que você conheça um pouco mais sobre os operadores aritméticos.

Operadores Aritméticos

Todo computador que se preze, é capaz de realizar operações aritméticas, tais como: adição, diminuição, multiplicação e divisão, e no Javascript isso não é diferente.

No caso desse tipo de operador, eles são considerados operadores do tipo binário, isso quer dizer que ele trabalha em cima de 2 operandos.

Vejamos como cada um deles funciona na prática.

Adição

Para realizarmos uma adição em Javascript usamos o sinal de mais (+):

let soma = 1 + 1;//O resultado será 2

let adicao = 24 + 3;//O resultado será 27

Também é possível realizar uma adição por meio de variáveis, vejamos:

let a = 10;
let b = 5;

let soma = a + b;//O resultado será 15

O que será que acontece quando realizamos uma adição de um número com um texto? Simples, ele concatena os valores de modo a retornar uma string, vejamos:

let soma = "10" + 5;//O resultado será '105' e o tipo será string

No Javascript também é possível repetir o operador de adição duas vezes (++) na frente da variável para adicionar + 1:

let a = 1;
++a;//Agora a variável 'a' armazena o valor 2

let b = 5;
++b;//Agora a variável 'b' armazena o valor 6;

let c = '10';
++c//Resultado será 11

let d = '10A';
++d;//Resultado será NaN

Diminuição

Para realizarmos uma diminuição em Javascript usamos o sinal de menos (-):

let diminuicao = 1 - 1;//O resultado será 0

let dimin = 24 - 3;//O resultado será 21

Também é possível realizar uma diminuição por meio de variáveis, vejamos:

let a = 10;
let b = 5;

let dimin = a - b;//O resultado será 5

O que será que acontece quando realizamos uma diminuição de um número com um texto? Bem, depende exclusivamente do que está sendo diminuído, vejamos:

let dimin = "10" - 5;//O resultado será 5 do tipo numérico, pois o javascript viu que a string '10' poderia ser convertida em um número.

let dimins = "10A" - 5;//O resultado será NaN, pois o JS não conseguiu converter a string em número

No Javascript também é possível repetir o operador de subtração duas vezes (--) na frente da variável para adicionar -1:

let a = 1;
--a;//Agora a variável 'a' armazena o valor 0

let b = 5;
--b;//Agora a variável 'b' armazena o valor 4;

let c = '10';
--c//Resultado será 9

let d = '10A';
--d;//Resultado será NaN

Multiplicação

Para realizarmos uma multiplicação em Javascript usamos o sinal do asterisco (*):

let multi = 1 * 2;//O resultado será 2

let multiply = 24 * 3;//O resultado será 72

Também é possível realizar uma multiplicação por meio de variáveis, vejamos:  

let a = 10;
let b = 5;

let multi = a * b;//O resultado será 50

O que será que acontece quando realizamos uma multiplicação de um número com um texto? Assim como na diminuição, se o javascript conseguir converter em número ele procede com a multiplicação, caso contrário ele retorna NaN:

let multi = "10" - 5;//O resultado será 50

let multiple = "10A" - 5;//O resultado será NaN

Divisão

Para realizarmos uma divisão em Javascript usamos o sinal da barra (/):

let divide = 15 / 3;//O resultado será 5

let div = 24 / 3;//O resultado será 8

Também é possível realizar uma divisão por meio de variáveis, vejamos:

let a = 10;
let b = 5;

let divided = a / b;//O resultado será 2

O que será que acontece quando realizamos uma divisão de um número com um texto? Assim como na diminuição e multiplicação, se o javascript conseguir converter em número ele procede com a divisão, caso contrário ele retorna NaN:

let div = "10" / 5;//O resultado será 2

let divided = "10A" / 5;//O resultado será NaN

Resto da Divisão

Para realizarmos o resto de uma divisão em Javascript usamos o sinal da porcentagem (%):

let resto = 3 % 2;//O resultado será 1

Também é possível realizar o resto da divisão por meio de variáveis, vejamos:

let a = 3;
let b = 2;

let resto = a % b;//O resultado será 1

O que será que acontece quando realizamos o resto da divisão de um número com um texto? Assim como na diminuição, multiplicação e divisão, se o javascript conseguir converter em número ele procede com a operação, caso contrário ele retorna NaN:

let rest = "3" % 2;//O resultado será 1

let rest_02 = "3A" % 2;//O resultado será NaN

Operador Exponencial

Também é possível realizar operações exponenciais com Javascript, ou seja, executar o famoso "X elevado a Y". Para isso usamos o duplo asterisco (**):

let exp = 2 ** 3;//O resultado de 2 elevado a 3 será 8

let exp_2 = '2' ** 3;//O resultado será 8, pois o JS converteu a string

let exp_3 = '2A' ** 3;//O resultado será NaN

Múltiplas Operações Aritméticas

Anteriormente neste conteúdo nós vimos como realizar operações aritméticas, mas ainda não respondemos nossa dúvida sobre os operadores do tipo binário.

Antes de entrarmos nesse assunto, temos que ter em mente que é possível sim realizar diversas operações em uma única linha, vejamos:

let soma = 12 + 15 + 23;//Resultado será 49

let operacao = 1 + 2 - 3 * 4 / 2;//Nessa situação, ele resolve primeiro a multiplicação e divisão, seguidos das adições e subtrações.

Caso queiramos realizar certas operações primeiro, podemos fazer o uso dos parênteses:

let operacao = (1 + 2) * 3;//Primeiro ele realiza a soma para depois multiplicar com 3

Lembrando que a ordem para realizar as operações é parênteses, potências, multiplicações e divisões e adição e subtração.

Operadores de Atribuição em conjunto com Aritméticos

Como foi falado anteriormente, existem algumas variações dos operadores de atribuição, onde podemos realizar adições, subtrações, multiplicações, divisões e restos, vejamos:

let a = 10;
a += 3;//Resultado será 13. É como se fizéssemos a = a + 3;

let b = 5;
a -= 3;//Resultado será 2. É como se fizéssemos b = b - 3;

let c = 5;
c *= 2;//Resultado será 10. É como se fizéssemos c = c * 2;

let d = 8;
d /= 2;//Resultado será 4. É como se fizéssemos d = d / 2;

let e = 12;
e %= 2;//Resultado será 0. É como se fizéssemos e = e % 2;

Operadores Relacionais

Quando nos referimos a operadores relacionais, estamos nos referindo a operações que fazemos para verificar a relação entre dois ou mais valores.

Existem 8 tipos de operações relacionais em Javascript, são eles:

É importante ressaltar que esses operadores sempre irão retornar um valor booleano, ou seja, um valor do tipo verdadeiro ou falso. Vejamos como cada um deles se comporta:

let a = 5 < 2;//False, pois 5 é maior que 2
let b = 2 < 5;//True, pois 2 é menor que 5

let c = 5 > 2;//True, pois 5 é maior que 2
let d = 2 > 5;//False, pois 2 é menor que 5

let e = 5 <= 2;//False, pois 5 não é menor e muito menos igual a 2
let f = 2 <= 5;//True, apesar de 2 não ser igual a 5, ele é menor que 5

let g = 5 >= 2;//True, apesar de 5 não ser igual a 2, ele é maior que 2
let h = 2 >= 5;//False, 2 não é maior nem igual a 5

let i = 5 == 2;//False, 5 não é igual a 2
let j = 1 == 1;//True, 1 é igual a 1

let k = 5 != 2;//True, pois 5 é diferente de 2
let l = 1 != 1;//False, pois 1 é igual a 1

let m = 5 === 5;//True, pois 5 é igual a 5 e são do mesmo tipo, ou seja, tipo numérico
let n = 5 === '5';//False, pois o outro tipo é do tipo string, tipo string é diferente do tipo number

let o = 5 !== 5;//False, pois 5 não é diferente de igual a 5, pois são do mesmo tipo e valor
let p = 5 !== '5';//True, pois 5 é diferente de '5'

Lembrando que podemos fazer comparações relacionais usando string ou qualquer outro tipo de dado primitivo do Javascript.

Além disso podemos também utilizar variáveis durante o processo.

Operadores Lógicos

No mundo do JS, os operadores lógicos são de extrema importância e se encontram frequentemente entre as linhas de códigos de diversos projetos.

Mas antes de entrarmos nesse assunto, precisamos entender um conceito bastante conhecido na computação chamado de tabela verdade.

Dentro dessa tabela nós temos a operação lógico do tipo &&, que diz assim: "Eu vou sair de casa, se o tempo estiver ensolarado e também eu tiver dinheiro no bolso".

Nesse tipo de operação, eu só sairia de casa se ambas as situações fossem verdadeiras, ou seja, eu só saio de casa se o tempo estiver ensolarado e eu tiver dinheiro no bolso.

Isso significa dizer que se uma das situações for falsa, eu não irei sair de casa. Ou seja, o dia está ensolarado, mas eu não tenho dinheiro no bolso... vou sair de casa? Não!

O dia está nublado e estou com bastante dinheiro no bolso... vou sair de casa? Também não!

Temos também o operador lógico do tipo ||, que diz assim: "Eu vou sair de casa, se o tempo estiver ensolarado ou eu tiver dinheiro no bolso.".

Isso significa dizer que uma das situações precisam ser verdadeiras para que eu consiga sair de casa. Nesse caso eu só não sairia de casa se ambas fossem falsas, ou seja, se o dia não estivesse ensolarado e eu não tivesse nenhum dinheiro no bolso.

Nesse caso... se o dia estiver ensolarado e eu tiver dinheiro no bolso, eu vou sair? Sim!

Se o dia estiver ensolarado e eu não tiver nenhum dinheiro no bolso, eu ainda vou sair? Sim.

Se o dia estiver nublado e eu tiver bastante dinheiro no bolso, eu ainda vou sair? Sim.

Mas e se o dia estiver nublado e eu estiver zerado? Mesmo assim ainda vou sair? Não!

Por fim e não menos importante, nos temos o famoso operador lógico de negação (!).

No caso dele, sua função é transformar uma afirmação verdadeira em falsa, e vice-versa.

Para nos aprofundarmos mais a fundo no conceitos dos operadores lógicos, vamos brincar um pouco com os valores booleanos quando se trata do AND (&&):

let a = true && true;//True, pois verdadeiro com verdadeiro é verdadeiro
let b = true && false;//False, pois verdadeiro com falso é igual a falso
let c = false && true;//False, não importa a ordem, eles ainda serão falsos
let d = false && false;//False, pois o retorno final é falso

Já no OR (||) as operações funcionam de uma forma um pouco diferente, vejamos:

let a = true || true;//True, pois uma delas precisa ser verdadeiro para retornar verdadeiro
let b = true || false;//True, pois uma delas precisa ser verdadeiro para retornar verdadeiro
let c = false || true;//True, pois uma delas precisa ser verdadeiro para retornar verdadeiro
let d = false || false;;//False, pois nenhuma delas é verdadeiro

Já o operador de negação (NOT), funciona dessa forma:

let a = !true;//Transforma o resultado true para false
let b = !false;//Transforma o resultado de false para true

Agora que já entendemos o conceito dos operadores lógicos, vamos ver um pouco na prática:

let a = (5 < 2) && (5 > 3);//False, pois uma das operações retorna false.
let b = (5 < 2) || (5 > 3);//True, pois uma das operações retorna verdadeiro.
let c = !(1 == 1);//False, apesar de 1 ser igual a 1 e essa operação ser verdadeiro, o operador de negação transforma em false

Lembrando que podemos usar quaisquer um dos dados e tipos primitivos junto com os operadores lógicos.

Operadores Unários

Uma operação do tipo unária é uma operação com apenas um operando. Este operando vem antes ou depois do operador.

Anteriormente neste conteúdo nos aprendemos algumas operações unárias, onde usamos a negação (!), o duplo positivo (++) e o duplo negativo (--).

Além deles, existem outros operadores unários, vejamos:

Operador (+)

Este operador unário, tenta converter seu operando em um número, caso não consiga ele retornará o valor NaN:

let a = +3;//Retorna 3 pois ele já é um número

let b = +"3";//Retorna o valor numérico 3

let c = +"-3";//Retorna o valor -3 numérico

let d = +"3.14";//Retorna 3.14 numérico

let e = +"123e-5"//Retorna 0.00123 numérico

let f = +"0xFF";//Retorna 255 numérico

let g = +true;//Retorna 1 numérico

let h = +false;//Retorna 0 numérico

let i = +null;//Retorna 0 numérico

let j = +"Infinity";//Retorna Infinity

let k = +"micilini"//Retorna NaN, pois não conseguiu converter

let l = +function(val){ return val }//Funções também retornam NaN

Operador (-)

Este operador unário, tenta converter seu operando em um numérico, e ainda o torna negativo, caso não consiga converter em número ele retornará o valor NaN:

let a = -3;//Retorna -3 pois ele já é um número

let b = -"3";//Retorna o valor numérico -3

let c = -"-3";//Retorna o valor 3 numérico

let d = -"3.14";//Retorna -3.14 numérico

let e = -"123e-5"//Retorna -0.00123 numérico

let f = -"0xFF";//Retorna -255 numérico

let g = -true;//Retorna -1 numérico

let h = -false;//Retorna -0 numérico

let i = -null;//Retorna -0 numérico

let j = -"Infinity";//Retorna -Infinity

let k = -"micilini"//Retorna NaN, pois não conseguiu converter

let l = -function(val){ return val }//Funções também retornam NaN

Operador (~)

Popularmente conhecido como bitwise operator, seu objetivo é inverter os bits do seu operando.

Basicamente ele executa essa formula: -(x + 1).

De modo que quando executamos ~3, ele pague o valor 3, adiciona + 1, ficando 4, e por fim negativa este valor (-4).

Vejamos alguns exemplos de sua utilização:

let a = ~3;//Retorna -4

let b = ~"3";//Retorna o valor numérico -4

let c = ~"-3";//Retorna o valor 2 numérico

let d = ~"3.14";//Retorna -4 numérico

let e = ~"123e-5"//Retorna -1 numérico

let f = ~"0xFF";//Retorna -256 numérico

let g = ~true;//Retorna -2 numérico

let h = ~false;//Retorna -1 numérico

let i = ~null;//Retorna -1 numérico

let j = ~"Infinity";//Retorna -1

let k = ~"micilini"//Retorna -1

let l = ~function(val){ return val }//Retorna -1

Operador Ternário

Um operador ternário avalia uma condição e executa um bloco de código com base na condição.

Por exemplo: "Se 5 for maior que 2, retorne/armazene o valor 5, caso contrário, armazene o valor 2".

Sua sintaxe é: condição ? expressão1 : expressão2

Vejamos como esse operador funciona:

let resultado = (10 >= 40) ? '10 é maior ou igual a 40' : 'falhou!';//Armazena o texto 'falhou'

let resultado_02 = (2 == 3) ? 2 : 3;//Armazena 3

let resultado_03 = (5 > 2) ? true : false;//Armazena true 

Lembrando que você pode usar variáveis, e outros operadores em conjunto com o operador ternário.

Você também pode aninhar um operador ternário como uma expressão dentro de outro operador ternário. Por exemplo:

let a = 3;
let resultado = (a >= 0) ? (a == 0 ? "zero" : "positivo") : "negativo";
console.log(`O número é ${resultado}.`);//'o número é positivo'

Conclusão

Neste conteúdo nos aprendemos um pouco mais sobre a utilização de diversos operadores em Javascript.

Será por meio deles que iremos executar e validar operações no dia a dia dos nossos sistemas.

Portanto brinque com cada um deles e realize testes e mais testes até que esses operadores façam parte do seu DNA!