Mastering or Operator in no JavaScript

Discover how to Check Object Properties

If you program in JavaScript, you may have come across situations where you needed to know whether a certain property exists in an object, and that's where the in operator comes in. I'll show you how it works, how to use it and why it can be more efficient than other ways of checking properties on an object.

What is the in operator?

The in operator is used in JavaScript to check whether a property exists on an object. The cool thing is that it not only checks the properties directly defined in the object, but also those inherited from the prototypes.

The syntax is very simple:

'propriedade' in objeto;

If the property exists, it returns true and if it does not exist, false. It seems simple, right? But its usefulness goes beyond a simple check. Would you like to see some examples?

Example 1: Direct Ownership in the Object

To begin with, let's see a basic example of using the in operator to check a direct property.

const carro = {
  marca: 'Toyota',
  ano: 2020
};

console.log('marca' in carro);  // true
console.log('modelo' in carro);  // false

Here, we have a car object with the brand and year properties. When we use 'brand' in car, the result is true, as the brand property exists directly in the object. 'model' in carro returns false, since this property has not been defined.

This type of check is great for avoiding errors when trying to access properties that don't exist. Ever tried to access a non-existent property and broken the code? I already! ?

Example 2: Properties Inherited from the Prototype

Now, look how the in operator also detects properties inherited from the prototype

const pessoa = {
  nome: 'Ana'
};

console.log('toString' in pessoa);  // true

In this case, the person object does not have the toString property directly, but this function is inherited from Object.prototype. The in operator can see this and returns true.

Why is this useful?

Sometimes you may want to check if any inherited functionality is available in the object. This can save you in some more complex situations.

Example 3: Comparing with hasOwnProperty

Now let's make a comparison with another way to check properties, the hasOwnProperty method. It only checks if the property was defined directly on the object, ignoring inherited ones.

const pessoa = {
  nome: 'Ana'
};
console.log(pessoa.hasOwnProperty('toString'));  // false
console.log('toString' in pessoa);               // true

The hasOwnProperty method returns false for toString, as this property is not directly on the person object. Meanwhile, the in operator returns true, as it also considers inherited properties.

When to use ine when to use hasOwnProperty?

The answer is the most talked about when asking a senior developer anything, it depends.

• Use in if you want to check any property, whether direct or inherited.
• Use hasOwnProperty if you need to ensure that the property was defined directly on the object, ignoring those inherited from the prototype. The in operator is much more practical when you don't need to worry about the origin of the property, but both have their place in the playground so you just need to know in which place and for what purpose you need it.

The above is the detailed content of Mastering or Operator in no JavaScript. For more information, please follow other related articles on the PHP Chinese website!