Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to use the "in" operator in JavaScript?
In this article, we are going to explore the 'in' operator and how to use it in JavaScript. The in operator is an inbuilt operator in JavaScript that is used for checking whether a particular property exists in an object or not. It will return true if the property exists, else false is returned.
Syntax
prop in object
Parameters
This operator accepts the following parameters as described below ?
-
prop ? This parameter holds the string or symbol that represents a property name or the array index.
-
object ? This object will be checked if it contains the prop or not.
Return Value
This operator will return either true or false if the specified property is found in the object or not.
Example 1: Using 'in' operator with Arrays
In the below example, we are going to find if the property exists or not by using the 'in' operator in JavaScript with arrays.
<html>
<head>
<title>IN operator</title>
</head>
<body>
<h1 style="color: red;">
Welcome To Tutorials Point
</h1>
<script>
// Illustration of in operator with arrays
const array = ['key', 'value', 'title', 'TutorialsPoint']
// Output of the indexed number
console.log(0 in array) //true
console.log(2 in array) //true
console.log(5 in array) //false
// Output of the Value
// you must specify the index number, not the value at that index
console.log('key' in array) //false
console.log('TutorialsPoint' in array) // false
// output of the Array property
console.log('length' in array)
</script>
</body>
</html>
true true false false false true
Example 2: Using 'in' operator with Objects
In the below example, we illustrate the in operator with objects and demonstrate how it behaves when properties are deleted.
<html>
<head>
<title>IN operator</title>
</head>
<body>
<h1 style="color: red;">
Welcome To Tutorials Point
</h1>
<script>
// Illustration of in operator with objects
const student = { name: 'Bill', class: 'IX', subjects: 'PCM', age: '16' };
console.log('name' in student);
delete student.name;
console.log('name' in student);
if ('name' in student === false) {
student.name = 'Steve';
}
console.log(student.name);
</script>
</body>
</html>
true false Steve
Example 3: Checking Inherited Properties
The 'in' operator also checks for inherited properties from the prototype chain.
<html>
<head>
<title>IN operator - Inheritance</title>
</head>
<body>
<h1 style="color: red;">
Welcome To Tutorials Point
</h1>
<script>
// Creating an object
const car = { brand: 'Toyota', model: 'Camry' };
// Check own properties
console.log('brand' in car); // true
console.log('model' in car); // true
// Check inherited properties
console.log('toString' in car); // true (inherited from Object.prototype)
console.log('hasOwnProperty' in car); // true (inherited)
// Check non-existent property
console.log('color' in car); // false
</script>
</body>
</html>
true true true true false
Key Points
-
For arrays, use numeric indices (0, 1, 2) not the actual values
-
The 'in' operator checks both own and inherited properties
-
Use 'hasOwnProperty()' if you only want to check own properties
-
Works with both objects and arrays
Conclusion
The 'in' operator is a powerful tool for checking property existence in JavaScript objects and arrays. Remember that it checks the entire prototype chain, making it useful for comprehensive property detection.
244 Views
