In this tutorial, we will explore the in operator in JavaScript. While arithmetic, logical, and comparison operators are commonly discussed, the in operator is often overlooked. Let's delve into the workings of JavaScript's in operator.
What exactly the JavaScript's 'in' operator?
In JavaScript, the in operator is utilized to verify the presence of a specified property or any of its inherited properties (also known as the prototype chain) within an object. When the specified property is found, the operator will yield a boolean value of true; otherwise, it will yield false.
Now, let's examine the syntax of the in operator in JavaScript.
Syntax
prop in object
The values of the parameters specified in the syntax above are described as follows:
Definition: The parameter value being referred to is the property name. It stores either a symbol or a string that denotes the array index or the property name.
Parameter Description: The parameter in question refers to the name assigned to an object. It serves the purpose of verifying the presence of a specific property within the said object.
The in operator evaluates to a Boolean value of either true or false. It checks if a specified property exists within an object. When the property is found, the operator yields true; otherwise, it returns false.
When to use the JavaScript's in operator?
We can use the JavaScript's in operator in the below-listed places -
- We can use it to verify whether a property exists on an object or not.
- It can be used to verify if a property is inherited by an object or not.
- It can also be used to verify if an index/key exists on the array or not.
- The JavaScript in operator can be used to verify if a property exists on an HTML element.
Next, let's explore a few examples to gain a better understanding of how the JavaScript in operator works.
Example1
In this instance, we demonstrate the utilization of the JavaScript in-built in operator to verify the presence of specific values within an array. The array 'fruits' comprises various elements. Initially, we examine the existence of values v1 and v3 within the array. The in operator yields a true result since both values are found in the array. Subsequently, we remove the value v3 from the array. Upon reevaluation, we verify if v3 persists within the 'fruits' array using the in operator, which now returns false due to the deletion of the value from the array.
<!DOCTYPE html>
<html>
<head>
<script>
function fun(){
const fruits = { v1: 'Apple', v2: 'Banana', v3: 'Watermelon', v4: 'Papaya' };
document.write(" <b> Is the value 'v1' in fruits array? </b> ", 'v1' in fruits, "<br>");
document.write(" <b> Is the value 'v3' in fruits array? </b> ", 'v3' in fruits, "<br> <br>");
document.write("After applying <i> <b> delete fruits.v3; </b> </i> <br> <br> ");
delete fruits.v3;
document.write(" <b> Now, Is the value 'v3' in fruits array? </b> ", 'v3' in fruits, "<br><br>");
}
</script>
</head>
<body>
<p> It is an example of using the JavaScript <b> in </b> operator. </p>
<h4> Click the below button to see the output. </h4>
<button onclick = "fun()"> Click me </button>
</body>
</html>
Output
Upon running the code provided above, the resulting output will be:
Upon selecting the provided button, the resulting output will be -
Example2
In this instance, we are employing the array's position to verify the presence of an element at that specific location, akin to the preceding demonstration.
<!DOCTYPE html>
<html>
<head>
<script>
function fun(){
const fruits = [ 'Apple', 'Banana', 'Watermelon','Papaya' ];
document.write(" <b> Is the value 0 in fruits array? </b> ", 0 in fruits, "<br>");
document.write(" <b> Is the value '2' in fruits array? </b> ", 1 in fruits, "<br><br>");
document.write(" <b> Is the value '4' in fruits array? </b> ", 4 in fruits, "<br><br>");
}
</script>
</head>
<body>
<p> It is an example of using the JavaScript <b> in </b> operator. </p>
<h4> Click the below button to see the output. </h4>
<button onclick = "fun()"> Click me </button>
</body>
</html>
Output
Once the code provided above is executed, the resulting output will be:
Upon selecting the designated button, the result will be -
The array provided consists of four elements, indexed from 0 to 3. Therefore, the result shown above is false as there is no element at the 4th index position within the array.
This tutorial has covered the concept of the in operator in JavaScript. While not widely known, this operator is utilized to confirm the existence of properties within an object or instances of object types.