Web development and Tech news Blog site. WEBISFREE.com

HOME > js

[JavaScript] Usage and Application of the 'in' Operator

Last Modified : 07 Mar, 2023 / Created : 07 Mar, 2023
585
View Count

I want to briefly look into the usage and application of the 'in' operator in JavaScript.



# Understanding the 'in' operator in JavaScript


Firstly, the 'in' operator is used as shown below:

in operator
// Returns the existence of properties and methods that an object has as a Boolean value.


When used on an object, the 'in' operator allows for easy and simple checking of the existence of its properties and functions. Let's learn how to check for it below.


! Example of using the in operator with an object



For example, let's create the myObj object below and test it.
myObj = {
  no: 1,
  name: 'webisfree',
  getName: function() { return this.name; }
}

'Now, let's test whether no, name, and getName exist as follows.'
'no' in myObj;
'name' in myObj;
'getName' in myObj;
'url' in myObj;

// true
// true
// true
// false

Looking at the result, since the URL does not exist in the corresponding object, the result using the in operator will return false.

By the way, since arrays are also objects, it is possible to use in. So when should in be used?


@ When is in frequently used...
While the usage of in may vary, it is often used to verify the existence of specific methods or properties. That is because if a non-existent method or property is executed, an error may occur. Therefore, the purpose of in is mainly to verify the existence beforehand. For example, if you create a function to calculate the square value, you can use the in operator to verify it beforehand.
objA = {
  num: 2
};
doubleNum = function(objA) {
  if (!('num' in objA)) return 0;
  return objA.num * objA.num;
};

doubleNum(objA);
// Return 4 value

Looking at the function doubleNum() above, there is the following code.
if (!('num' in objA)) return 0;

This code checks if 'num' exists in 'objA' and uses an exclamation mark to get its opposite value. In other words, if 'num' is not present, it will always return 0. Now, let's create an empty object 'objB' and perform the same function. As 'objB' does not contain 'num', it will also return 0.
objB = {
};

doubleNum(objB);
// Return value 0

As expected, it has returned 0. By adding code that checks the availability of a value using 'in', we can prevent errors. This means that if a certain value does not exist in an object, we can stop the code to prevent unexpected errors in the function. Additionally, using a return type of number can also be used for type error purposes.


! In conclusion


while we can use 'in', we can also use 'hasOwnProperty()'. Although they can be used in a similar way, there is a significant difference between the two. 'hasOwnProperty()' returns a different result for inherited properties that follow the prototype chain, as the name suggests. In other words, different results can be obtained as shown below.
'toString' in objA
// Return
true


objA.hasOwnProperty('toString')
// Return
false

objA can use toString(), but it does not own the object. For this reason, the 'in' operator returns true, while 'hasOwnProperty()' returns false.

In other words, 'hasOwnProperty()' checks only the properties and method values of the actual object and returns true or false accordingly.


That's everything we've learned about the 'in' operator.

Previous

How to smoothly scroll to a specific element

Previous

How to download a file with the desired filename in JavaScript