search

Home >Web Front-end >JS Tutorial >Explain the purpose of the 'in' operator in JavaScript

Explain the purpose of the 'in' operator in JavaScript

WBOY
WBOYforward
2023-08-24 14:25:091220browse

解释 JavaScript 中“in”运算符的用途

This tutorial will teach you about the "in" operator in JavaScript. There are many operators available in JavaScript, such as arithmetic operators, assignment operators, equality operators, etc. for performing mathematical operations. The “in” operator is also one of them and we can use it to find properties from an object.

Before I begin, let me ask you a question. When coding in JavaScript, have you ever needed to check if an object property exists? If so, how did you handle it? The answer is simple, you can use the "in" operator, which returns a boolean value based on whether the object contains the property.

Use the "in" operator to check if an object property exists

The "in" operator works like other operators. It requires two operands. The object properties serve as the left operand, and the object itself serves as the right operand.

grammar

You can check if an object property exists using the "in" operator as per the following syntax. 

let object = {
   property: value,
}
let ifExist = "property" in object;

In the above syntax, you can see how an object contains properties and their values. Values ​​can be numbers, strings, booleans, etc. The ifExist variable stores a true or false boolean value based on whether the property exists in the object.

Example 1

In this example, we create objects containing different properties and values. Additionally, the object contains methods. After that, we use "in" operator to check if the attribute exists in the object.

In the example output, the user can observe that the "in" operator returns true for property1 and property4, but returns false for property7 since it does not exist in the object. 

<html>
<body>
   <h3>Using the <i> in operator </i> to check for the existence of the property in the object.</h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById("output");
      let object = {
         property1: "value",
         property2: 20,
         property3: false,
         property4: () => {
            console.log("This is a sample function.");
         },
      };
      let ifExist = "property1" in object;
      output.innerHTML +=
         "The property1 exist in the object " + ifExist + "<br/>";
      ifExist = "property4" in object;
      output.innerHTML +=
         "The property4 exist in the object " + ifExist + "<br/>";
      ifExist = "property7" in object;
      output.innerHTML +=
         "The property7 exist in the object " + ifExist + "<br/>";
   </script>
</body>
</html>

In JavaScript, every object has its prototype. The prototype chain object actually contains some methods and properties in the object. However, we haven't added these properties to the object yet, but JavaScript adds them by default. For example, the array and string prototypes contain a "length" property, and the object prototype contains a "toString" property.

Example 2

In the following example, we create a class and define a constructor in it to initialize object properties. Additionally, we have defined the getSize() method in the table class.

After that, we use the constructor to create an object of the table class. We use the "in" operator to check if the property exists in the object prototype. In JavaScript, every object has a toString() method in its prototype, which is why it returns true. 

<html>
<body>
   <h3>Using the <i> in operator </i> to check for the existence of the property in the object prototype</h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById("output");
      // creating the table class
      class table {
         //  constructor function
         constructor(prop1, prop2, prop3) {
            this.prop1 = prop1;
            this.prop2 = prop2;
            this.prop3 = prop3;
         }
         getSize() {
            return 10;
         }
      }
      //  creating the object of the table class
      let tableObjet = new table("blue", "wood", "four drawers");
      // check if a property exists in the object
      let ifExist = "prop1" in tableObjet;
      output.innerHTML +=
         "The prop1 exists in the constructor properties of tableObject: " +
         ifExist + "</br>";
      // some properties also exist in the object prototype chain.
      ifExist = "length" in tableObjet;
      output.innerHTML +=
      "The length property exists in the constructor properties of tableObject: " 
         + ifExist + "</br>";
      ifExist = "toString" in tableObjet;
      output.innerHTML +=
         "The toString Property exists in the constructor properties of tableObject: " 
         + ifExist + "</br>";
   </script>
</body>
</html>

Use the in operator to check whether the index exists in the array

We can only use the "in" operator on objects. An array is also an instance of an object. User can use instanceOf or typeOf operator to check array type, it returns "Object". Therefore, the keys in the array are the array indices and the values ​​of the keys are the array values.

Here, we can use the "in" operator to check whether the index exists in the array. If present, we can access the array value to avoid arrayOutOfBound exception.

grammar

Users can check whether the index exists in the array by following the following syntax -

let array = [10, 20, 30];
let ifExist = 2 in array;

In the above syntax, the 2 written before the operator is the array index, not the value.

Example 3

In the following example, we create an array and check the type of the array using the typeOf operator, which returns "Object".

In addition, we also used the "in" operator to check whether the array index and length properties exist in the array prototype. 

<html>
<body>
   <h2>Using the <i> in operator </i> to check whether the array index exists.</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById("output");
      let array = [10, 20, "Hello", "Hi", true];
      output.innerHTML += "The type of the array is " + typeof array + "<br/>";
      let ifExist = 2 in array;
      output.innerHTML +=
         "The index 2 exist in the array is " + ifExist + "<br/>";
      ifExist = 7 in array;
      output.innerHTML +=
         "The index 7 exist in the array is " + ifExist + "<br/>";
      ifExist = "length" in array;
      output.innerHTML +=
         "The length property exist in the array is " + ifExist + "<br/>";
   </script>
</body>
</html>

This tutorial teaches us how to use the "in" operator with objects and arrays. In an object, the user can check if a property exists, and in an array, the user can check if an index exists using the "in" operator.

The above is the detailed content of Explain the purpose of the 'in' operator in JavaScript. For more information, please follow other related articles on the PHP Chinese website!

JavaScript Object 运算符 算术运算符 赋值运算符 构造函数 字符串 Length 对象 typeof
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：JavaScript program deletes spare nodes of linked listNext article：JavaScript program deletes spare nodes of linked list

Related articles

See more