Top 6 In operator examples in Javascript|Typescript|Angular

Top 6 In operator examples in Javascript|Typescript|Angular

In operator is an inbuilt operator provided in javascript language. This covers the usage of In operator in the following cases.

Javascript In operator

in the operator in javascript is used to check whether the property exists in an object or object hierarchy.

syntax:

name in objects;

Syntax contains two operands

The left-hand operand is a property string name or array index. The right-hand operand is an object to check

This operator returns true for the following cases

  • if the left-hand operator or name is a property of an object.
  • if an array index exists in an array or an object

Return false for the below cases

  • Not valid property of an objects
  • Not a valid array index of a given right-hand array object

How to check valid index exists in an array using operators

In operator checks valid index exists in a given array of values. Please note that this operator checks only the index, not its values.

In the given below example, Created an array of three elements, so valid indexes are 0,1,2

in operator returns true for index=0,1,2, and false for array index>=3

let array = [43, 1, 21];
console.log(0 in array); // true
console.log(1 in array); // true
console.log(2 in array); // true
console.log(3 in array); // false

This will be very useful to check invalid index validation against arrays to avoid undefined values.

How do I check if an object has a key in JavaScript?

in operator checks whether property or key exists in an object or not, It does not check property value.

Let’s see a simple object property check example

const emp = { id: "1", name: "Franc" };
console.log("id" in emp); //true
console.log("name" in emp); //true
console.log("Franc" in emp); //false

How to check a key exists in an Object inherited object in typescript?

Let’s see an example of class extend checking property check example

  • Declared Animal with a name property
  • Declared Lion with legs property by extending Animal
  • Created object for Lion, name, and legs on lion object returns true property value animal returns false.
class Animal {
  constructor() {
    this.name = "animal";
  }
}
class Lion extends Animal {
  constructor() {
    super();
    this.legs = "2";
  }
}
const lion = new Lion();
console.log("name" in lion); //true
console.log("legs" in lion); //true
console.log("animal" in lion); //false

In operator enum in Typescript with an example

There is no enum constants support in Javascript. let’s declare an Enum in Typescript

export enum HttpResponseStatus {
    SUCCESS = 200,
    NOTFOUND=404,
    SERVERERROR = 500
}

An operator used in enum data type for following use cases

How to Check string exists in Enum typescript?

In the below example, This operator is used to check the string and value presented in Enum data. returned false if there is no property or its value exists in the Enum typescript.

console.log(200 in HttpResponseStatus); // true
console.log("SUCCESS" in HttpResponseStatus); // true
console.log("600" in HttpResponseStatus); // false

How to iterate Enum objects using an operator in Angular?

An operator can also use in for loop to iterate the enumerated object types.

These also are used to iterate the enum properties when used in for loop. The following example prints only string properties, not their values

for (let element in HttpResponseStatus) {
  if (isNaN(Number(element))) {
    console.log(element);
  }
}

And the output is

SUCCESS
NOTFOUND
SERVERERROR

What is the difference between In Operator and hasOwnProperty in javascript?

In operator checks key exists in Object as well as to object prototype and inheritance hierarchy. It returns true if the key exists in the object, object prototype inheritance hasOwnProperty in the object checks key exists in the object only not checks against the object prototype.

It returns true if the key exists in the object and returns false if the key does not exist in the object

In Operator vs Object.hasOwnProperty example:

Let’s see an example below

Let’s create an employee class function with properties name initially.

function employee() {
  this.name = "john";
}

let’s add one more property via prototype inheritance

employee.prototype.role = "admin";

Create an object instance of an employee class

var obj = new employee();

With In operator, Checks for two properties(name, role) exist in an object and both outputs are true.

console.log("name" in obj); // true
console.log("role" in obj); // true

With hasOwnProperty method,

property(name) returns true and It contains the own property of an employee object. key(role) check returns false, It is not the own property of an employee object and is derived from object prototype syntax.

console.log(obj.hasOwnProperty("name")); // true
console.log(obj.hasOwnProperty("role")); // false

Hence, Conclusion In checks for instance and prototype and hasOwnProperty not checks for object prototype.

Conclusion

Learned In Operator used in multiple ways, Following things are discussed for Angular and javascript with examples

  • Find the Key or property that exists in the Object or Enum
  • Check for the Index exists or not in the Array
  • How to iterate object keys
  • In Operator vs Object.hasOwnProperty Comparision