Um guia abrangente para expressões e operadores JavaScript

Introdução

Se você é um desenvolvedor da web como eu, lida com código JavaScript todos os dias. No entanto, apesar de usar essa biblioteca em nosso trabalho diário, muitos de nós não conhecemos todas as expressões e operadores JavaScript que ajudariam a tornar nossas vidas mais fáceis.

Neste artigo, listei algumas expressões e operadores obrigatórios em JavaScript, incluindo exemplos simples e concisos para cada um. Vamos mergulhar!

Expressões JavaScript

Uma expressão é qualquer unidade de código válida (composta de um conjunto de literais, variáveis, operadores e outras expressões mais simples) que produz um valor quando resolvido. Uma expressão pode ser tão simples quanto um nome de variável igual a qualquer valor que atribuímos a ela (como x=5).

Como você provavelmente já sabe, o valor que atribuímos à nossa variável pode ser qualquer coisa, desde um número a uma string ou um booleano.

Existem cinco categorias de expressões; os três primeiros são bastante simples, enquanto os dois últimos são um pouco mais complexos.

1. Aritmética:

Essas expressões usam operadores aritméticos, números como 5 ou 5,864.

2. String:

Essas expressões têm um conjunto de caracteres como "nada" ou "5.864" como valores.

3. Lógico:

Essas expressões são iguais a verdadeiro ou falso, geralmente por meio de um operador lógico, como && ou || .

4. Expressões primárias:

Estas são palavras-chave básicas e caracteres-chave que usamos em nosso código JavaScript (você provavelmente conhece a maioria deles):

este

Como em this.propertyName . A expressão this se refere à propriedade de um objeto dentro de um contexto de execução.

… Agora você deve estar se perguntando: qual é o contexto de execução para this ? Geralmente, é o contexto global (em um navegador, por exemplo, seria window ). Uma exceção seria se ele fosse usado em um método de objeto (por exemplo, user.fullName () ). Neste caso, this é chamado dentro do método ( fullname () ) e fará referência ao contexto do objeto ( usuário ).

Para obter mais informações, codeSTACKr explica isso em mais detalhes neste vídeo.

function , function * e async function:

Como você sabe, função define a expressão da função (duh). Afirmando o óbvio, uma função é um procedimento de código que recebe uma entrada (um conjunto de instruções) e retorna uma saída na forma de um desempenho de tarefa.

Por outro lado, uma função * define uma função geradora, que simplifica a tarefa de escrever iteradores ao gerar uma sequência de resultados em vez de um único valor.

Embora você possa usar function * em programação assíncrona , é melhor use uma função async simplesmente. Uma função assíncrona ativa “ comportamento assíncrono baseado em promessa a ser escrito em um estilo mais limpo ”, evitando a necessidade de configurar cadeias de promessa explicitamente.

De um modo geral, uma função assíncrona permitirá que você execute uma série de tarefas sem ter que esperar que uma termine antes de executar a próxima.

Para obter mais informações, recomendo verificar este vídeo.

yield , yield * e await

Para começar, vamos diferenciar yield de return e yield de await :

return é usado em funções regulares, enquanto yield é usado em funções geradoras ( function * ). A diferença é que em uma função, podemos simplesmente retornar um valor. Em contraste, em uma função geradora, geramos uma sequência de valores, então yield é usado para gerar vários valores até que paremos de chamar aquela função * .

Por outro lado, await é usado apenas em funções async . A única missão de uma função async é retornar uma promessa, então await chamará Promise.resolve no valor esperado.

Agora que diferenciamos entre return , yield e await , você deve estar se perguntando o que diabos é yield * sobre. Na verdade, é bastante simples: yield * delega para outra função de gerador da seguinte maneira:

 função * função1 () {
yield"Eu sou o valor da função1 & # x1f44b; mas quando a função2 é chamada, ela delega à função1 a tarefa de gerar um valor";
}
function * function2 () {
rendimento * função1 ();
}
console.log (função2 (). next (). valor);
//saída esperada:"Eu sou o valor da função1, mas quando a função2 é chamada, ela delega à função1 a tarefa de gerar um valor"

classe :

Um usuário em Quora descreveu uma classe como “um projeto para um objeto” e eu não poderia concordar mais com essa comparação.

Para envolver seu cérebro em torno do conceito de expressão de classe (introduzido no ES6), é útil ver como funciona em um exemplo:

 class ClothingItem {
construtor (tipo, estação) {
this.type=type;
this.season=season;
}
descrição() {
return `Este $ {this.type} é para $ {this.season}`;
}
}
console.log (novo ClothingItem ("vestido","inverno"));
//saída esperada: Object {season:"winter", type:"dress"}
console.log (novo ClothingItem ("vestido","inverno"). descrição ());
//saída esperada:"Este vestido é para o inverno"

Conforme mostrado aqui, após definirmos as propriedades da instância do objeto usando o construtor () , fomos capazes de vincular nossos dados a um método usando description () .

Inicializador de array/sintaxe literal []

Existem maneiras diferentes de inicializar um array , mas a maneira mais simples é usando [] :

 let myEmptyArray=[];
console.log (myEmptyArray);
//saída esperada: []

Você pode inserir elementos da matriz nele ( myEmptyArray.push (475) ) ou até defini-los na fase de inicialização ( let myArray=[1, 100] ).

Inicializador de objeto/sintaxe literal {}

Da mesma forma que podemos inicializar uma matriz com uma sintaxe literal em vez da sintaxe do construtor, também podemos inicializar um objeto com apenas {} :

 let myEmptyObject={};
console.log (myEmptyObject);
//saída esperada: objeto {}

Regexp (abreviação de expressão regular) /ab + c/i :

RegExp é usado para combinar texto com um padrão, certificando-se de que o que o usuário coloca em um campo corresponde ao padrão em, digamos, um e-mail ou um número, por exemplo).

Há algum tempo, encontrei esta ótima ferramenta para aprender, construir e testar RegExp. Mas, para obter uma folha de referências rápida que me ajuda a obter rapidamente as expressões regulares de que preciso, uso iHateRegex .

Operador de agrupamento ()

Os parênteses que chamamos de operador de agrupamento simplesmente controlam a precedência da avaliação em qualquer expressão.

Como você sabe, 1 + 2 * 3 produzirá o mesmo resultado que 1 + (2 * 3) (7). No entanto, se você alterar a ordem dos parênteses, você alterará quem será avaliado primeiro. Por exemplo, (1 + 2) * 3 retornará 9.

Como programador, isso é útil em situações em que você precisa avaliar muitas condições usando operadores ternários:

 condição1?"declaração 1": (condição2?"declaração 2":"declaração 3");

5. Expressões do lado esquerdo:

As expressões do lado esquerdo (LHS) referem-se à localização de uma determinada expressão ou atribuição. Sem surpresa, você os encontrará do lado esquerdo do bloco de código. Eles são compostos do seguinte:

Acessadores de propriedade:

Um acessador de propriedade nos fornece uma maneira de acessar uma propriedade de objeto usando uma dessas duas sintaxes:

• Com a notação de ponto object.property
• Com a notação de colchetes object["property"]

Confira o exemplo abaixo:

 const meuObjeto={
primeiroObjeto:"Boku",
secondObject:"Anata",
};
console.log (meuObjeto.firstObjeto);
//Saída esperada:"Boku"
console.log (meuObjeto ["segundoObjeto"]);
//Saída esperada:"Anata"

novo :

Como vimos em nosso exemplo anterior de expressões [class] , você pode criar uma instância de um objeto apenas usando a palavra-chave new . Leia mais sobre os detalhes do novo operador aqui .

new.target :

new.target simplesmente detecta se uma função ou construtor foi chamado usando a palavra-chave new . Saiba mais sobre esta meta propriedade neste vídeo e neste artigo .

super :

A palavra-chave super é usada para acessar e chamar um construtor pai. Pode ser útil com herança de classe quando, por exemplo, você tem dois construtores que compartilham partes comuns. Para evitar a duplicação de seu código, você pode chamar super () .

Aqui está um exemplo de super em ação:

 classe Filme {
construtor (nome, ano) {
this.name=nome;
this.ano=ano;
}
MovieDescription () {
retornar `Filme: $ {this.name}, ano: $ {this.year}.`;
}
}
console.log (novo filme ("Ma Rainey's Black Bottom","2020"));
//saída esperada: Objeto {nome:"Ma Rainey's Black Bottom", ano:"2020"}
console.log (novo filme ("Ma Rainey's Black Bottom","2020"). MovieDescription ());
//saída esperada:"Filme: Ma Rainey's Black Bottom, ano: 2020."
class TvShow extends Movie {
construtor (nome, ano, estações) {
super (nome, ano);
this.seasons=temporadas;
}
TvShowDescription () {
retornar `Programa de TV: $ {this.name}, número de temporadas: $ {this.seasons}, ano: $ {this.year}.`;
}
}
console.log (novo TvShow ("F.R.I.E.N.D.S","1994", 10));
//saída esperada: Objeto {nome:"F.R.I.E.N.D.S", temporadas: 10, ano:"1994"}
console.log (novo TvShow ("F.R.I.E.N.D.S","1994", 10).TvShowDescription ());
//saída esperada:"Programa de TV: F.R.I.E.N.D.S, número de temporadas: 10, ano: 1994."

Spread syntax ...obj

A sintaxe de propagação, ... , permite que você expanda uma expressão. Por exemplo, se você precisa adicionar um array em um array, pode obter algo assim (se não usar o ... ): [a, [b, c ], d] .

Uma maneira de usar o operador spread é espalhar os elementos do array:

 let childArray=["b","c"];
let parentArray=["a",... childArray,"d"];
console.log (parentArray);
//saída esperada: [a, b, c, d]

Existem algumas outras maneiras de usar a sintaxe de propagação, abordadas neste artigo .

Operadores JavaScript

Agora que vimos o que as expressões podem fazer, é hora de começar a falar sobre operadores. Os operadores são usados ​​para construir expressões complexas inteiramente a partir de expressões mais simples. Explicaremos mais a seguir.

Operadores são as ferramentas que usamos para gerar valores do lado direito (RHS). Eles podem ser tão simples quanto o operador de adição- a + b=c onde o valor do lado direito gerado é c-ou um pouco mais complicados onde um operador condicional, por exemplo, é usado: (c> a)?”c é maior que a”:”c não é maior que a”.

Existem três tipos de operadores: unário, binário e ternário. Nas seções a seguir, discutiremos todos os três com exemplos simples e fáceis de seguir.

Operadores unários

Um operador unário é um operador que requer apenas um operando (expressão) para gerar um valor. Por exemplo, em 2 ++ , preciso apenas de um operando ( 2 ) para gerar um valor.

Existem muitos tipos de operadores unários, que discutiremos a seguir.

Operadores aritméticos unários:

Incrementar operador ++ :

O operador de incremento é bastante direto: ele adiciona 1. No entanto, observe que seu comportamento varia dependendo se ele é pós-corrigido ou prefixado em seu operando:

 deixe a=2;
console.log (a ++);
//saída esperada: 2
console.log (a);
//saída esperada: 3
deixe b=2;
console.log (++ b);
//saída esperada: 3
console.log (b);
//saída esperada: 3 

Operador de decremento --

O mesmo princípio do operador de incremento se aplica ao operador de decremento:

 deixe a=2;
console.log (a--);
//saída esperada: 2
console.log (a);
//saída esperada: 1
deixe b=2;
console.log (-b);
//saída esperada: 1
console.log (b);
//saída esperada: 1 

Operador mais unário +

O operador de adição unário + faz uma coisa simples: ele converte seu operando em um número (se ainda não for um):

 deixe a="2";
console.log (a);
//saída esperada:"2"
console.log (+ a);
//saída esperada: 2

Este truque é útil para converter uma string em um número. Você pode perguntar: e se ele não puder ser convertido em um número? Nesse caso, +"some_string" retorna NaN .

Operador de negação unário -

O operador de negação unário faz a mesma coisa que + (converte uma string em um número), mas vai além ao negar seu operando:

 deixe a="2";
console.log (a);
//saída esperada:"2"
console.log (-a);
//saída esperada:-2 

Operadores lógicos unários:

Um operador lógico é um operador usado com valores lógicos, ou como os conhecemos comumente: Booleanos (verdadeiro/falso). Portanto, segue-se que um operador lógico unário é um operador que só precisa de um operando booleano para gerar um valor.

Operador lógico NOT ! :

O operador ! retorna false quando aplicado a uma expressão verdadeira , e vice-versa.

 deixe a=2;
seja b=4;
console.log (a  b));
//saída esperada: verdadeiro
console.log (!"truthy");
//saída esperada: falso
console.log (!"truthy");
//saída esperada: falso 

Operadores unários bit a bit:

Como seres humanos, entendemos os números usando o sistema decimal (1, 4,5, 5000 e assim por diante). Os computadores, por outro lado, processam números em formato binário (uma combinação de zeros e uns).

O que o operador bit a bit faz é avaliar o operando, não com base em seu valor decimal, mas sim com base em sua representação binária de 32 bits:

 deixe decimal=9;
deixe binário=decimal.toString (2);
console.log (binário);
//saída esperada:"1001"
//inteiro de 32 bits:"00000000000000000000000000001001"

Felizmente, essa representação de 32 bits acontece por trás das cortinas. A saída do operador bit a bit ainda é uma saída JavaScript padrão, como veremos a seguir.

Operador NOT bit a bit ~

O operador NOT bit a bit unário ( ~ ) inverte os bits de seu operando.

 const a=3;
//inteiro de 32 bits: 00000000000000000000000000000011
console.log (~ a);
//saída esperada:-4
//inteiro de 32 bits: 11111111111111111111111111111100

O que acontece aqui é que o operador NOT pega a representação de 32 bits do nosso operando ( 3 ) 00000000000000000000000000000011 , reverte os zeros para uns e os reverte para zeros.

Para converter um decimal em um binário ou inteiro de 32 bits, verifique este útil ferramenta.

delete operador:

Você adivinhou: este operador remove o operando ao qual é aplicado, desde que a propriedade pertença a um objeto (incluindo matrizes):

 const programmer={
alias:"rosen",
idade: 30,
};
console.log (programador.alias);
//saída esperada:"rosen"
delete programmer.alias;
console.log (programador.alias);
//resultado esperado: indefinido

Observe, entretanto, que você não pode usar delete em uma variável comum.

 const programmer="rosen";
console.log (programador);
//saída esperada:"rosen"
excluir programador;
console.log (programador);
//resultado esperado:"rosen"

void operador:

Se, por algum motivo, você precisa de uma expressão para retornar indefinido (mesmo que ela deva retornar algo), o caminho a seguir é o operador void .

 function notVoid () {
return"Eu não estou vazio!";
}
console.log (notVoid ());
//resultado esperado:"Eu não sou vazio!"
console.log (void notVoid ());
//resultado esperado: indefinido

typeof operador:

Finalmente, como o próprio nome indica, o operador typeof nomeia o tipo de expressão a que se aplica:

 console.log (typeof 3);
//saída esperada:"número"
console.log (typeof"3");
//saída esperada:"string"
console.log (typeof (3>"3"));
//saída esperada:"string"
função três () {}
console.log (tipo três);
//saída esperada:"função"
array=[];
console.log (array typeof);
//saída esperada:"objeto"

o peradores binários

Em contraste com os operadores unários, os operadores binários requerem dois operandos para gerar um valor.

Por exemplo, o operador de comparação maior que (> ) só pode gerar um valor ( true ou false ) se for aplicado a duas expressões (neste caso, 2> 5 será avaliado como falso ).

Operadores ritméticos a padrão:

Operador de adição +

 seja a=4;
deixe b=2;
console.log (a + b);
//saída esperada: 6 

Operador de subtração -

 seja a=4;
deixe b=2;
console.log (a-b);
//saída esperada: 2

Operador de divisão /

 seja a=4;
deixe b=2;
console.log (a/b);
//saída esperada: 2 

Operador de multiplicação *

 seja a=4;
deixe b=2;
console.log (a * b);
//saída esperada: 8 

Operador de exponenciação **

O operador de exponenciação calcula o expoente para a base. No exemplo abaixo, você verá que 4 é a base e 2 é o expoente, resultando em uma saída esperada de 16.

 seja a=4;
deixe b=2;
console.log (a ** b);
//saída esperada: 16

Operador de resto %

Também chamado de módulo, o operador de resto (% ) retorna o “restante” da divisão de dois operandos.

 seja a=4;
deixe b=2;
console.log (a% b);
//saída esperada: 0
deixe c=3;
console.log (a% c);
//saída esperada: 1 

Operadores de comparação:

Como o nome sugere, os operadores de comparação comparam os operandos aos quais são aplicados e retornam um verdadeiro ou falso .

Observe que você pode comparar qualquer operando, seja um número, uma string, um booleano ou um objeto. Strings, por exemplo, são comparados com base em seus valores Unicode. Em situações em que estamos comparando operandos de tipos diferentes, o JavaScript converterá os operandos em tipos compatíveis para comparação.

 string="string";
console.log (string.charCodeAt ());//retorna um valor Unicode de string
//valor esperado: 115
console.log (string <3);
//valor esperado: falso
console.log (falso> verdadeiro);
//valor esperado: falso
console.log (verdadeiro> falso);
//valor esperado: verdadeiro
function operand1 () {
retornar"olá";
}
tchau=["zaijian","matta","besslama","tchao"];
console.log (operand1 ()!==tchau);
//valor esperado: verdadeiro 

Operadores de igualdade:

Existem quatro tipos diferentes de operadores de igualdade: ==, !=, === e !==. Nos exemplos a seguir, mostraremos exatamente como cada um funciona, mas para começar, aqui estão algumas notas a serem lembradas:

• Os operadores iguais == e não iguais != convertem os operandos antes de compará-los, então 3=="3" avalia para true , embora estejamos comparando um número e uma string.
• Por outro lado, os operadores estrito igual === e estrito não igual !== considerarão o tipo de operando que ele compara. Portanto, 3==="3" retornará false neste caso.

Operador igual ==

 console.log (3=="3");
//valor esperado: verdadeiro
console.log (3==3);
//valor esperado: verdadeiro 

Operador diferente !=

 console.log (3!="3");
//valor esperado: falso
console.log (3!=3);
//valor esperado: falso 

Operador de igual estrito ===

 console.log (3==="3");
//valor esperado: falso
console.log (3===3);
//valor esperado: verdadeiro 

Operador estrito não igual !==

 console.log (3==="3");
//valor esperado: verdadeiro
console.log (3===3);
//valor esperado: falso

Operadores relacionais:

Operador maior que ><✓:

 console.log (3> 1);
//valor esperado: verdadeiro 

Operador maior ou igual >=

 console.log (3>="3");
//valor esperado: verdadeiro 

Menor que o operador <

 console.log ("3"<1);
//valor esperado: falso 

Operador menor ou igual <=

 console.log (3 <=1);
//valor esperado: falso 

Operadores lógicos:

Operador AND lógico &&

O operador && deve avaliar ambos os operandos antes de retornar verdadeiro ou falso . Isso também significa que se apenas uma das expressões for false , o AND retornará false .

 console.log (3> 1 &&"3"> 0);
//valor esperado: verdadeiro

Operador lógico OR * ||

Por outro lado, o operador || retornará true se algum de seus operandos for true . Portanto, se o primeiro operando for avaliado como verdadeiro , o valor esperado retornará como verdadeiro sem a necessidade de verificar o segundo operando.

 console.log (3> 1 ||"3"==0);
//valor esperado: verdadeiro 

Operadores bit a bit:

Conforme discutido anteriormente neste guia, os operadores bit a bit avaliam seus operandos com base em sua representação de 32 bits; o valor é então retornado na saída JavaScript padrão.

Para uma discussão mais aprofundada dos casos de uso para operadores de bits JavaScript, recomendo a leitura de este artigo.

Operadores lógicos bit a bit:

Operador AND bit a bit & :

O operador AND bit a bit ( & ) coloca 0 em seu resultado de avaliação quando um dos 32 bits em cada uma das representações binárias dos dois operandos tem valores opostos (0 versus 1):

 const a=3;
//inteiro de 32 bits: 00000000000000000000000000000011
const b=7;
//inteiro de 32 bits: 00000000000000000000000000000111
console.log (a & b);
//saída esperada: 3
//inteiro de 32 bits: 00000000000000000000000000000011

Como você pode ver aqui, o 1 na representação binária de b , que está em conflito com o 0 em a na mesma posição foi invertida para 0 .

Operador XOR bit a bit ^ :

O operador bit a bit XOR ( ^ ) segue uma lógica bem diferente do operador bit a bit & . Ao contrário do último, ^ apenas reverte o 1 (na mesma posição) em cada um dos dois operandos binários para 0 :

 const a=3;
//inteiro de 32 bits: 00000000000000000000000000000011
const b=7;
//inteiro de 32 bits: 00000000000000000000000000000111
console.log (a ^ b);
//saída esperada: 4
//inteiro de 32 bits: 00000000000000000000000000000100

Operador OR bit a bit | :

O operador OR bit a bit ( | ) segue a mesma lógica de & EXCETO para reverter o bit para 1 (em vez de 0).

 const a=3;
//inteiro de 32 bits: 00000000000000000000000000000011
const b=7;
//inteiro de 32 bits: 00000000000000000000000000000111
console.log (a | b);
//saída esperada: 7
//inteiro de 32 bits: 00000000000000000000000000000111 

Operadores de deslocamento bit a bit:

Em nossos exemplos anteriores, vimos como os operadores lógicos bit a bit pegam os 32 bits de seus operandos, os avaliam e produzem um resultado no qual eles revertem o valor de algum bit.

Por outro lado, os operadores de deslocamento bit a bit pegam a representação binária de 32 bits de seu operando LHS e deslocam um bit para uma posição específica (especificada por seu operando RHS).

Para visualizar melhor como este e cada operador de turno funcionam, vejamos os exemplos abaixo:

Operador shift esquerdo <<:

Aqui, o operador de deslocamento para a esquerda pega a representação binária de 32 bits de a , muda 7 ( b ) posições para a esquerda e descarta o excesso (000000 ).

 const a=3;
//inteiro de 32 bits: 00000000000000000000000000000011
const b=7;
console.log (a <
 Operador de deslocamento para a direita >> : 
 O operador de deslocamento para a direita >>  faz o mesmo que o operador de deslocamento para a esquerda  <<, mas com duas diferenças: 

 Ele se move na direção oposta e 
 Preserva o sinal do operando 

 const a=5;
//inteiro de 32 bits: 00000000000000000000000000000101
const b=2;
console.log (a >> b);
//saída esperada: 1
//inteiro de 32 bits: 00000000000000000000000000000001
const c=-5;
//inteiro de 32 bits:-00000000000000000000000000000101
console.log (c >> b);
//saída esperada:-2
//inteiro de 32 bits:-00000000000000001111111111111110 
  Operador de deslocamento para a direita sem sinal (preenchimento com zero)  >>>
 Operador de deslocamento à direita sem sinal (preenchimento com zero) >>> , desloca a representação binária de 32 bits de  a  por  b  (1 posição) à direita, semelhante ao operador >> . A principal diferença aqui é que >>>  pode transformar números negativos em positivos, como: 
 const a=3;
//inteiro de 32 bits: 00000000000000000000000000000011
const b=1;
console.log (a >>> b);
//saída esperada: 1
//inteiro de 32 bits: 00000000000000000000000000000001
const c=-3;
//inteiro de 32 bits:-00000000000000000000000000000011
console.log (c >>> b);
//saída esperada: 2147483646
//inteiro de 32 bits: 01111111111111111111111111111110

 Operador de encadeamento opcional ?.
 Como muitos desenvolvedores, você provavelmente tentou obter um valor nas profundezas da cadeia de um objeto, mas, como era nulo ou indefinido, causou um erro. 
 Em vez de usar o operador de encadeamento .  em objetos intrincados, você pode escolher usar o operador de encadeamento opcional ?.  na próxima vez. Este operador permite que você pesquise um valor sem validar todas as referências na cadeia. 
 const feriado={
nome:"natal",
companheiros:"família",
viagem: {},
};
console.log (feriado.travel.country);
//resultado esperado: indefinido
//Causa erros
console.log (feriado?.travel.country);
//resultado esperado: indefinido
//Retorna apenas undefined

 Operador vírgula , : 
 Claro que todos nós conhecemos nosso querido operador , , mas não custa nada refrescar nossa memória! Os operadores vírgulas separam as declarações de variáveis ​​(por exemplo,  a=[6, 3, 1, 8] ) e expressões para que possam ser executadas em ordem (como em declarações de variáveis ​​de loop:  var i=0; i <100; i ++ ). 
  in  operador:
 O operador  in  retorna verdadeiro se o objeto tiver a propriedade fornecida que o operador está procurando. 
 const feriado={
nome:"natal",
companheiros:"família",
viagem: {},
};
console.log ("nome"em feriado);
//expected output: true

instanceof operator:
If you want to confirm that a property is an instance of a particular operator, you can use instanceof as so:
class ClothingItem {
constructor(type, season) {
this.type=type;
this.season=season;
}
}
const clothes=new ClothingItem("dress","winter");
console.log(clothes instanceof ClothingItem);
//expected output: true
console.log(clothes instanceof Object);
//expected output: true
Assignment operators:
As the name suggests, an assignment operator assigns a value (based on its RHS operand) to its LHS operand.
Primary assignment =:
The primary assignment operator consists of the equal sign that assigns b to a in a =b.
a=1;
b=4;
console.log(a);
//expected output: 1
a=b;
console.log(a);
//expected output: 4

Destructuring assignment ([a, b]=[1, 2], {a, b}={a:1, b:2}):
The destructuring assignment syntax makes it possible to first extract data from arrays or objects, and then assign that data to distinct variables:
const array=[6, 3, 1, 8];
const [a, b, c, d]=array;
console.log([a, b, c, d]);
//expected output: [6, 3, 1, 8]
console.log(a);
//expected output: 6
const object={
first: 6,
second: 3,
third: 1,
fourth: 8,
};
const { first, second, third: e, fourth }=object;
console.log({ first, second, e, fourth });
//expected output: Object {
// e: 1,
// first: 6,
// fourth: 8,
// second: 3
//}
console.log(e);
//expected output: 1

Logical assignment operators:
The logical operators that we discussed related to expressions only evaluate its operands and then returns a boolean. On the other hand, logical assignment operators evaluate their left side operand, and based on the boolean’s value, assign them a new value based on the right-side operand.
Logical AND &&=:
a=4;
b=0;
b &&=a;
console.log(b);
//expected value: 0
//As b=0 which evaluates to false, b isn't assigned a's value.
a &&=b;
console.log(a);
//expected value: 0
//As a=4 which evaluates to true, a is assigned b's value.

Logical OR ||=:
The ||= does the opposite work of &&=.
a=4;
b=0;
a ||=b;
console.log(a);
//expected value: 4
//As a=4 which evaluates to true, a isn't assigned b's value.
b ||=a;
console.log(b);
//expected value: 4
//As b=0 which evaluates to false, b is assigned a's value.

Logical nullish operator ??=:
If you’ve never heard of it, the ??= operator does two things: one, it checks if its left-hand operand has a value, and two, assigns a value to any operand that does not have a value.
In this example, the LHS operands are life.time and life.money). Since life.money does not have a value, the logical nullish operator will assign a value to it. Since life.time does have a value (50), it will not be affected by ??=.
const life={ time: 50, money: null };
console.log((a.time ??=10));
//expected output: 50
console.log((a.money ??=25));
//expected output: 25

Shorthand operators:
In the following section, we will take a look at shorthand binary operators for the arithmetic and bitwise operations that we’ve studied in the above sections.
For standard arithmetic operations:
Addition +=:
(a=4), (b=2);
a +=b;
console.log(a);
//expected output: 6

Subtraction -=:
(a=4), (b=2);
a-=b;
console.log(a);
//expected output: 2

Division /=:
(a=4), (b=2);
a/=b;
console.log(a);
//expected output: 2

Multiplication *=:
(a=4), (b=2);
a *=b;
console.log(a);
//expected output: 8

Exponentiation **=:
(a=4), (b=2);
a **=b;
console.log(a);
//expected output: 16

Remainder %=:
(a=4), (b=2);
a %=b;
console.log(a);
//expected output: 0

For bitwise operations:
Bitwise logical AND &=:
(a=4), (b=2);
a &=b;
console.log(a);
//expected output: 0

Bitwise logical OR ^=:
(a=4), (b=2);
a ^=b;
console.log(a);
//expected output: 6

Bitwise logical XOR |=:
(a=4), (b=2);
a |=b;
console.log(a);
//expected output: 6

Bitwise left shift <<=:
(a=4), (b=2);
a <<=b;
console.log(a);
//expected output: 16

Bitwise sign propagating right shift >>=:
(a=4), (b=2);
a >>=b;
console.log(a);
//expected output: 1

Bitwise zero-fill right shift >>>=:
(a=4), (b=2);
a >>>=b;
console.log(a);
//expected output: 1

Conditional operator (condition ? ifTrue: ifFalse):
Finally, we would be remiss to not discuss the only operator that takes three operands; ladies and gentleman: the conditional operator.
a=6;
console.log(a > 5 ?"bigger":"smaller");
//expected output:"bigger"
console.log(a <5 ?"bigger":"smaller");
//expected output:"smaller"

As you will notice, the conditional (a.k.a. ternary) operator checks if the condition is true or false (hence the question mark ?), then execute one of the two expressions (placed between the colon :) based on whether the condition is true or false.
Summary
Congratulations! You have made it through this comprehensive guide to expressions and operators in JavaScript. For future reference, it may be useful to bookmark the summary table below, which recaps all of the material we have covered in this article (just open the image in a new tab and zoom in!).

Thank you for reading, and please check out my work at NadaRifki.com. I am also always happy to read your comments or your messages on Twitter (@RifkiNada). 
The post A comprehensive guide to JavaScript expressions and operators appeared first on LogRocket Blog.
 Source link