Nesse artigo vamos conhecer e entender como usamos os operadores JavaScript na construção de códigos. Atualmente, existem nove operadores: de atribuição, comparação e igualdade, desigualdade, destructuring, aritméticos, relacionais, lógicos, unários e ternários. Vamos conhecer cada um deles!

Atribuição

Representado pelo símbolo (=), serve para atribuir ao operando do lado esquerdo, um determinado valor definido pelo operando do lado direito. Por exemplo: 

let a = "a"
console.log(a)

let numero1 = 1
console.log(numero1)

let arr = []
console.log(arr)

let obj = {}
console.log(obj)

let func = function(){
    return "Funciona também com funções"
}
console.log(func())```jsx
let a = "a"
console.log(a)

let numero1 = 1
console.log(numero1)

let arr = []
console.log(arr)

let obj = {}
console.log(obj)

let func = function(){
    return "Funciona também com funções"
}
console.log(func())

Comparação e Igualdade

Existem dois tipos de comparação: a abstrata, representado pelo símbolo (==) e a estrita, representada pelo símbolo (===).

Muitas vezes, os operadores de comparação e igualdade são confundidos com o operador de atribuição, pois também usam o símbolo de igual (=), mas são bem diferentes.

Comparação abstrata

Essa comparação converte o tipo antes de comparar. Já que o JavaScript não é fortemente tipado, é o valor que será comparado. Vamos aos exemplos:

console.log(1 == '1') //imprime true
console.log(0 == null) //imprime false
console.log(null == undefined) //imprime true

Quando se trata de objetos, o JavaScript vai comparar endereços de memória, que serão os mesmos quando se trata do mesmo objeto. Comparações entre dois objetos diferentes geram resultados falsos:

let objeto1 = {'chave': 'valor'}
let objeto2 = {'chave': 'valor'}
console.log(objeto1 == objeto2) //imprime false pois são duas referências de memória diferentes

Comparação Estrita

Também conhecida como identidade, diferente da abstrata, não faz a conversão de tipo antes da comparação. Ou seja, os operandos só vão retornar true caso sejam estritamente iguais. Por exemplo:

console.log(1 === '1') //imprime false
console.log(null === undefined) //imprime false
console.log(0 === null) //imprime false

A comparação estrita de objetos continua sendo falsa, pelo mesmo motivo da anterior:

let objeto1 = {'chave': 'valor'}
let objeto2 = {'chave': 'valor'}
console.log(objeto1 === objeto2) //imprime false pois são duas referências de memória diferentes

Desigualdade

O operador de desigualdade (!=) retorna true se os operandos não forem iguais. No caso de comparar objetos, continua sendo feita a comparação entre os endereços de memória. Veja o exemplo:

console.log(1 != 2) //imprime true
console.log(1 != '1') //imprime false
console.log(0 != null) //imprime true


let objeto1 = {'chave': 'valor'}
let objeto2 = {'chave': 'valor'}
console.log(objeto1 != objeto2) //imprime true pois de fato são duas referências de memória diferentes

Destructuring

Também chamado de operador de desestruturação, funciona da seguinte forma: ele tira partes de um objeto ou array e “joga” em outra variável. É por isso que quando você tem o objeto obj:

const obj = { nome: 'Maria', sobrenome: 'das Dores', idade:  35}

Que tem as propriedades nome, sobrenome e idade, é possível tirar “partes” desse objeto, que são exatamente essas propriedades!
Por isso que, quando se faz:

const {sobrenome} = obj

Ele retorna o valor da propriedade de mesmo nome, que é “das Dores”.

Ao tentar acessar uma propriedade que não existe, ele retorna undefined:

const obj = { nome: 'Maria', sobrenome: 'das Dores', idade:  35}

const { peso } = obj

console.log(peso)//imprime undefined

Um exemplo usando Arrays seria:

const numeros = [1, 2, 3, 4, 5]
const[a, b, c, d, e] = numeros
console.log(a, b, c, d, e)//imprime 1 2 3 4 5

Operadores Aritméticos

São as operações básicas que já conhecemos: adição (+), subtração (-), divisão (/), multiplicação (*), operações de módulo (%) que retornam o resto da divisão; 

let x, y

x = 5
y = 3

console.log(x - y) //imprime 2
console.log(x * y) //imprime 15
console.log(x / y) //imprime 1.66666(...)67
console.log(x % y) //imprime 2

Temos ainda as operações de exponenciação (**), que eleva o primeiro operando ao segundo operando; de incremento (++), que acrescenta ao operando em uma unidade; e de decremento (–) que reduz o operando em uma unidade.

O operador de adição (+) pode tanto fazer a soma dos operandos quanto a concatenação de Strings, então é necessária uma atenção para seu uso.

let x, y

x = 2
y = 3

console.log(x + y) //imprime 5

x = 2
y = "Juntou!"
console.log(x + y) //imprime 2Juntou, a concatenação dos dois operandos

Além disso, o JavaScript considera o valor booleano true == 1, então ao fazer a soma de true com 1, o resultado é 2:

console.log(true + 1) //imprime 2

Apenas mais uma das particularidades do JavaScript! No caso, isso acontece porque ele interpreta 1 e 0 como verdadeiro (true) e falso (false), respectivamente.

Porém, ao tentar fazer uma soma de String e Boolean, o resultado é uma concatenação:

console.log("true" + true) //imprime truetrue

Operadores Relacionais

A depender da relação entre dois operadores, os operadores relacionais retornarão verdadeiro (true) ou falso (false). Essas relações podem ser quatro: de maior (>); maior ou igual (>=); menor (<); e menor ou igual (<=). Por exemplo:

console.log(3 > 2) //imprime true
console.log(3 < 2) //imprime false
console.log(3 >= 2) //imprime true
console.log(3 <= 2) //imprime false

Operadores Lógicos

Os operadores lógicos são: && (“e” lógico), || (“ou” lógico) e o ! (negação lógica).

Também comumente usados com os valores booleanos, exceto os operadores || (“ou” lógico) e && (“e” lógico), que, se usados com valores não-booleanos, podem retornar, também, valores não booleanos.

“E” lógico (&&)

O “e” lógico vai retornar o valor booleano true quando ambas as proposições ambas forem verdadeiras. Se pelo menos uma delas for falsa, o resultado é false.

Por exemplo:

console.log(2 < 3 && 3 > 2) //imprime true
console.log(2 < 3 && 3 < 2) //imprime false
console.log( 2 < 3 && 3 > 2 && 10 <= 100)//usando mais de duas proposições - imprime true

“Ou” lógico ( || )

A principal diferença para o “e” lógico é que, no “ou” lógico, basta uma das proposições estar verdadeira que o resultado impresso é true.

Por exemplo:

console.log(2 < 3 || 3 > 2) //imprime true
console.log(2 < 3 || 3 < 2) // imprime true
console.log( 2 < 3 || 3 > 2 || 10 <= 100)//imprime true
ATENÇÃO!

Na lógica matemática temos o ou exclusivo, onde somente uma das proposições é verdadeira; se ambas forem verdadeiras, o resultado é false!

Negação Lógica ( ! )

A negação vai simplesmente inverter o valor booleano da proposição. Ou seja, se a proposição tem o valor true, a negação vai inverter para false, e vice-versa.

ATENÇÃO!

O uso de dupla negação (!!) volta a proposição para o seu valor booleano de origem.

Por exemplo:

console.log(2 < 3) //imprime true
console.log(!(2 < 3)) //negação da afirmativa - imprime false
console.log(!!(2 < 3)) //negação da negação, retorna para o valor original - imprime true

Operadores Unários

Os operadores unários podem ter duas formas: prefixada, quando são usados antes do operando; e pós-fixada, quando são usados depois do operando.

 A negação lógica do exemplo anterior é um tipo de operador unário. Além desses, nós temos o incremento (++) e o decremento (–). O (-) pode ser usado também antes de números para inverter o seu valor.

Por exemplo:

num1 = 1
num2 = 2
num3 = 3

num1++ //forma pós-fixada
console.log(num1) //imprime 2 - sofreu incremento de uma unidade

--num2 //forma pré-fixada
console.log(num2) //imprime 1 - sofreu decremento de uma unidade

console.log(-num3) //imprime -3 - o número negativo equivalente

Operadores Ternários

Por fim, os operadores ternários funcionam como simplificações de comparações if/else. Resume a mesma comparação a somente uma linha, tendo a seguinte interpretação:

“A afirmação é verdadeira ? se sim, retorne a primeira opção : se falso, retorne a segunda”.

Por exemplo:

const resultado = nota => nota >= 7 ? 'Aprovado' : 'Reprovado'
//pergunta 'nota é maior ou igual a 7? se sim, retorne "Aprovado" : se não, retorne "Reprovado" ' 

console.log(resultado(7.1)) //imprime Aprovado
console.log(resultado(6.7)) //imprime Reprovado

Esse operador ternário também pode ser entendido da seguinte forma:

function resultado (nota){
    if (nota >= 7) {
        return 'Aprovado'
    } else {
        return 'Reprovado'
    }
}

Só que, convenhamos, o operador ternário é bem mais resumido!

Agora que você já conhece todos os operadores usados na construção de códigos em JavaScript, espero que fique mais claro o seu uso e funcionamento. Para saber mais, recomendo a explicação sobre operadores na página do Mozilla.

Bons estudos!