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:
- Menor que (<),
- Maio que (>),
- Menor ou Igual a (<=),
- Maior ou Igual a (>=),
- Igual a (==),
- Não Igual a (!=),
- Igual e do mesmo valor (===),
- Não Igual e não do mesmo valor (!==).
É 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 | Explicação |
+ | Tenta converter o operando em um número |
- | Tenta converter o operando em um número e o torna negativo |
++ | Faz o incremento de um operando |
-- | Faz o decremento de um operando |
! | Converte em valor booleano e o nega |
~ | Inverte todos os bits do operando e retorna um número |
typeof | Retorna o tipo de dado de um operando |
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!