Operador de ponto de interrogação JavaScript

Normalmente, em qualquer linguagem de programação, representamos as declarações condicionais com o tradicional “se ... else ...”, mas às vezes estes ocupam várias linhas de códigos, mesmo para as condições mais simples. Portanto, o JavaScript nos fornece o Ponto de interrogação(?) Operador usado para declarações condicionais em JavaScript.

O ponto de interrogação (?) O operador em JavaScript é um dos recursos mais poderosos que o JavaScript fornece declarações condicionais e quando usado junto: "pode ​​atuar como"Se ... mais .. ”. Mas essa não é a única maneira de esse operador ser usado em JavaScript. Neste artigo, discutiremos o operador do ponto de interrogação em JavaScript junto com seu uso com exemplos.

Maneiras de usar o ponto de interrogação (?) Operador em JavaScript

A maneira mais comum de usar o operador do ponto de interrogação é para declarações condicionais, mas esse não é o único uso dele em JavaScript. Existem três principais usos dos operadores do ponto de interrogação em JavaScript, como mostrado abaixo:

1. Operador ternário
2. Encadeamento opcional
3. Coalescante nulo

Um dos quais todos nós estamos familiarizados, mas os outros dois são aqueles que apenas poucos sabem, então vamos ver e entender cada um junto com exemplos.

Operador ternário

O termo ternário significa simplesmente composto por três partes e o operador do ponto de interrogação também é conhecido como operador ternário porque, diferentemente de outros operadores como "===" estritamente igual, é o único operador que recebe três partes.

No operador ternário, começamos com “?”Em que adicionamos uma declaração condicional no lado esquerdo do operador e um valor no lado direito do operador, caso a condição seja verdadeiro. É seguido por um cólon “:”, Que é seguido por um valor a ser retornado, caso a condição seja falso. Abaixo está a sintaxe fornecida:

Sintaxe:

Afirmação condicional ? Verdadeiro (valor se verdadeiro): falso (valor se false)

O operador ternário é usado para substituir as múltiplas linhas de código do IF Declaração. Abaixo está um exemplo da declaração IF, além de ser substituída por um operador ternário para mostrar como uma declaração condicional de se pode ser alterada para um único código de linha facilmente.

if (20> 12)
console.log ("sim")

outro
console.log ("não")

A linha de código acima pode ser convertida em um código único de linha:

const Biggernum = (20> 12) ? "Sim não";
console.log (Biggernum);

Você pode ver claramente a diferença entre várias linhas de condição IF-ELSE é transformada em um código único usando um operador ternário.

Encadeamento opcional

O recurso de encadeamento opcional foi introduzido em 2020 que ajuda o usuário a lidar com um erro de maneira mais eficiente. Digamos que você tenha um código que chama um objeto de propriedade que não existe e, portanto, quando o código é executado, ele gerará um erro que pode ser devido à falta de valor no seu banco de dados ou qualquer outro motivo. Por exemplo, veja o exemplo abaixo:

const funcionário =
Nome: "Mark",
Trabalho desde: 2015

funcionário.escrever.salário();

Aqui, não definimos as propriedades para o objeto e, portanto, quando executamos o código, ele gerará o erro abaixo:

Agora, para evitar esses erros, foi introduzido o encadeamento opcional através do qual simplesmente inserimos um operador de ponto de interrogação “?”Entre os nomes de propriedades, como mostrado abaixo:

const funcionário =
Nome: "Mark",
Trabalho desde: 2015

funcionário.escrever?.salário();

Saída:

Através do encadeamento opcional, simplesmente deu a saída “indefinido”Em vez de lançar erros e, portanto, é um dos melhores recursos para os desenvolvedores evitarem esses erros com mais eficiência.

Coalescante nulo

Às vezes, não temos um valor para uma propriedade ou não está disponível enquanto escrevia o código. Por exemplo, se estamos definindo vários usuários e temos uma imagem de propriedade para cada usuário e não temos a imagem disponível para esses usuários. Portanto, quando os dados forem exibidos, as imagens para usuários ficarão em branco, o que pode parecer feio e não profissional.

const funcionário =
Nome: "Mark",
Imagem: indefinido || "N / D"

console.log (funcionário);

Saída:

Mas enquanto lida com “||”O operador lógico ou, você pode encontrar alguns problemas se considerar alguns valores como utilizáveis, como“ “e“ 0 ”. Por exemplo, declaramos uma variável com valor 0 ou uma string vazia junto com “||” Lógico ou operador, portanto, o operador considerará o valor como nulo ou indefinido e, portanto, retornará algum valor padrão que corrigimos, conforme mostrado pelo exemplo abaixo:

const exemplo1 = 0 || 'String padrão';
console.log (exemplo1);
const exemplo2 = "|| 500;
console.log (exemplo2);

Saída:

Aqui no exemplo acima, embora tenhamos definido os valores de como 0 e a string vazia ainda está tomando -a como nula e indefinida e exibindo o valor padrão que definimos. Para resolver este problema, usamos Nulo coalescante ou pontos de interrogação duplos (??) como mostrado abaixo:

const exemplo1 = 0 ?? 'String padrão';
console.log (exemplo1);
const exemplo2 = " ?? 500;
console.log (exemplo2);

Saída:

Dessa forma, o coalescante nulo é usado, o que aceita apenas valores nulos e indefinidos, além disso, sempre exibe os valores do lado certo.

Conclusão

O operador do ponto de interrogação no JavaScript é extremamente útil, pois não é usado apenas para declarações condicionais, mas para outros fins úteis. Neste artigo, discutimos os operadores do ponto de interrogação em JavaScript, juntamente com várias maneiras de usá -lo. Primeiro, a maneira tradicional é substituir as condições if-else por ele, mas também existem outras maneiras de usá-lo que discutimos no artigo. Através de operadores de pontos de interrogação, podemos tornar nosso código mais compacto e lidar com erros de maneiras mais eficientes.