O JavaScript no operador explicado com exemplos

Um dos primeiros tópicos que você encontrará ao aprender JavaScript (ou qualquer outra linguagem de programação) são operadores.

Os operadores mais comuns são os operadores aritméticos, lógicos e de comparação. Mas você sabia que o JavaScript tem um in operador?

Se não o fez, não se preocupe. Eu o encontrei recentemente, enquanto procurava uma solução para um problema no Google.

Neste artigo, você aprenderá exatamente o que o JavaScript in operador faz, quando usá-lo e como usá-lo.

O que exatamente é o JavaScript in operador?

O JavaScript in O operador é usado para verificar se uma propriedade especificada existe em um objeto ou em suas propriedades herdadas (em outras palavras, sua cadeia de protótipos). o in operador retorna true se a propriedade especificada existir.

A cadeia de protótipos JavaScript é como os objetos ou instâncias de objetos têm acesso a propriedades e métodos que não eram originalmente deles. Esses objetos herdam propriedades e métodos definidos em seus construtores ou protótipos, que podem ser acessados ​​por meio de seus __proto__ propriedade.

Este artigo pressupõe que você tenha um entendimento básico sobre o que são objetos, como criá-los, para que são usados ​​e como funciona a herança do JavaScript. Se não, este artigo no MDN deve ajudar.

Quando usar o JavaScript in operador

1. Para verificar se existe uma propriedade em um objeto

const car = {  make: 'Toyota',  model:'Camry',  year: '2018',  start: function() {    console.log(`Starting ${this.make} ${this.model}, ${this.year}`);  }}'make' in car // Returns true.'start' in car // Returns true.'Toyota' in car // Returns false. 'Toyota' is not a property name, but a value.

2) Para verificar se uma propriedade é herdada por um objeto.

Vamos usar a sintaxe da classe ES6 para criar um construtor de objetos. Isso também se aplicaria aos construtores de funções:

class Car {  constructor(make, model, year) {    this.make = make;    this.model = model;    this.year = year;  }  start() {    console.log(`Starting ${this.make} ${this.model}, ${this.year}`);  }}const toyota = new Car('Toyota', 'Camry', '2018');'start' in toyota;/* Returns true as toyota is an instance of the Car object constructor. The toyota object therefore inherits all properties of the Car constructor. */'toString' in toyota;/* Returns true. toString is a method property of the Object type, of which the Car constructor is an instance of. */

3) Para verificar se existe um índice / chave em uma matriz.

Você pode estar se perguntando, desde que estabelecemos que o JavaScript in O operador pode ser usado com objetos, por que também podemos usá-lo com matrizes?

Bem, uma matriz é na verdade um protótipo (instância) do Object tipo. De fato, tudo em JavaScript é uma instância do Object tipo.

Isso pode parecer loucura, mas vamos executar um programa simples no console do navegador para confirmar.

Primeiro, defina uma matriz e confirme se é uma instância do Object digite usando o instanceof operador:

const number = [2, 3, 4, 5];number instanceof Object // Returns true

Ainda está em dúvida? Tipo number no console e pressione enter e abra a saída.

Você notará uma lista de propriedades, uma das quais é __proto__ que aponta para Array. Abrir isso também e descer essa lista nos levam a outra __proto__ propriedade com um valor de Object.

Isso mostra que o number matriz é uma instância do Array tipo que é uma instância do Object tipo.

Agora, voltando a usar o in operador:

const number = [2, 3, 4, 5];3 in number // Returns true.2 in number // Returns true.5 in number // Returns false because 5 is not an existing index on the array but a value;'filter' in number/* Returns true because filter is a method property on the Array type of which the number array is an instance of. The number array inherits the filter property.*/

4) Para verificar se existe uma propriedade em um elemento Html

No artigo de Kirupa, Verifique se você está em um dispositivo habilitado para toque, ele destaca esta função:

function isTouchSupported() {  var msTouchEnabled = window.navigator.msMaxTouchPoints;  var generalTouchEnabled = "ontouchstart" in document.createElement("div");  if (msTouchEnabled || generalTouchEnabled) {    return true;  }  return false;}

Esta função retorna true se você estiver em um dispositivo que suporte toque e retorne false se você estiver em um dispositivo que não suporta toque, verificando se as propriedades window.navigator.msMaxTouchPoints e ontouchstart estão presentes. Essas propriedades existem apenas em dispositivos habilitados para toque.

Bem direto!

Vamos focar na linha destacada. Lembre-se de como estabelecemos que o in operador retorna true se a propriedade especificada existir em um objeto? Os elementos HTML usados ​​no JavaScript realmente se tornam instâncias do Object tipo, daí o nome “Document Object Model” ou DOM.

Claro, você pode não acreditar em mim sem algum tipo de prova. Como antes, vamos digitar alguns comandos no console.

Crie um div elemento e liste suas propriedades usando console.dir():

const element = document.createElement('div');console.dir(element);

Você verá o div elemento com suas propriedades listadas no console.

Abra o menu suspenso e você notará que ele tem um __proto__ propriedade de HtmlDivElement. Abra isso e você encontrará outro __proto__ propriedade de HtmlElement, então Element, Node, Eventtarget, e finalmente Object.

Também execute:

element instanceof Object

Isso retornará true, mostrando que o div elemento é uma instância do Object tipo, razão pela qual o in operador pode ser usado nele.

Conclusão

Você aprendeu sobre o JavaScript não tão popular in operador, usado para verificar a presença de propriedades em um objeto ou Object instâncias de tipo. Isso deve ser útil ao escrever a lógica de verificação.

Se você gostou deste artigo, definitivamente gostará de outros artigos no meu blog codewithlinda.com. Publico artigos amigáveis ​​para iniciantes sobre desenvolvimento de front-end sem jargão técnico (tanto quanto possível) 😁.