O JavaScript no operador explicado com exemplos

Anatomia de um objeto JavaScript simples.

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

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) 😁.

Quando usar o JavaScript in operador

Conclusão

Quando usar o JavaScript `in` operador