Objects are used to store keyed collections of various data and more complex entities. In JavaScript, objects penetrate almost every aspect of the language. So we must understand them first before going in-depth anywhere else.

An object can be created with figure brackets {…} with an optional list of properties. A property is a “key: value” pair, where key is a string (also called a “property name”), and value can be anything.

To understand this rather abstract definition, let us look at an example of a JavaScript Object :

let car = {
	make : "Toyota",
	wheels : "4",
	color : "Red"
}

In the above example “make”, “wheels”, “color” are all “keys” and “Toyota”, “4” and Red are values of these keys respectively.

Each of these keys is referred to as properties of the object. An object in JavaScript may also have a function as a member, in which case it will be known as a method of that object.

Let us see such an example :

let car = {
	make : "Toyota",
	wheels : "4",
	color : "Red",
	displayInfo : function(){ 
		console.log(`I have a ${car.color} ${car.make} that has ${car.wheels} wheels`); 
	} 
}
car.displayInfo(); 

I have a Red Toyota that has 4 wheels

In the above example, “displayinfo” is a method of the car object that is being used to work with the object’s data, stored in its properties.

The property names can be strings or numbers. In case the property names are numbers, they must be accessed using the “bracket notation” like this :

let car = {
	make : "Toyota",
	wheels : "4",
	color : "Red",
	10 : "1000",
	displayInfo : function(){ 
		console.log(`The value of the key 10 is ${car['10']}`); 
	} 
}
car.displayInfo(); 

The value of the key 10 is 1000

Property names can also be strings with more than one space separated words. In which case, these property names must be enclosed in quotes and Like property names which are numbers, they must also be accessed using the bracket notation.

There are 3 ways to create objects.

We already seen this in above examples

const car = new Object();
car.make = 'Toyota';
car.color = 'Red';
car.wheels = 4;
school.displayInfo = function(){
console.log(`I have a ${car.color} ${car.make} that has ${car.wheels} wheels`);
}
school.displayInfo();

I have a Red Toyota that has 4 wheels

The two methods mentioned above are not well suited to programs that require the creation of multiple objects of the same kind, as it would involve repeatedly writing the above lines of code for each such object. To deal with this problem, we can make use of the other methods of object creation in JavaScript that reduces this burden significantly,

Constructors in JavaScript, like in most other OOP languages, provides a template for creation of objects. In other words, it defines a set of properties and methods that would be common to all objects initialized using the constructor.
Lets see an example :

function Vehicle(name, maker) {
this.name = name;
this.maker = maker;
}

let car1 = new Vehicle('Fiesta', 'Ford');
let car2 = new Vehicle('Santa Fe', 'Hyundai')

console.log(car1.name); // Output: Fiesta
console.log(car2.name); // Output: Santa Fe

Fiesta
Santa Fe

To remove a property, we can use delete operator:

delete car1.name;

A notable feature of objects in JavaScript, compared to many other languages, is that it’s possible to access any property. There will be no error if the property doesn’t exist!

Reading a non-existing property just returns undefined. So we can easily test whether the property exists:

let user =  {};
alert( user.noSuchProperty ===  undefined  );  // true means "no such property"

There’s also a special operator "in" for that.

The syntax is:

"key" in object

let user =  {name:  "Umair", age:  19  };
alert("age" in user );  // true, 
user.age exists  alert(  "blabla"  in user );  // false, user.blabla doesn't exist

Please note that on the left side of in there must be a property name. That’s usually a quoted string.

If we omit quotes, that means a variable, it should contain the actual name to be tested. For instance:

let user = { age: 30 };

let key = "age";
alert( key in user ); // true, property "age" exists

Why does the in operator exist? Isn’t it enough to compare against undefined?

Well, most of the time the comparison with undefined works fine. But there’s a special case when it fails, but "in" works correctly.

It’s when an object property exists, but stores undefined:

let obj =  { test:  undefined  };  
alert( obj.test );  // it's undefined, so - no such property?  
alert(  "test"  in obj );  // true, the property does exist!

n the code above, the property obj.test technically exists. So the in operator works right.

Situations like this happen very rarely, because undefined should not be explicitly assigned. We mostly use null for “unknown” or “empty” values. So the in operator is an exotic guest in the code.

To walk over all keys of an object, there exists a special form of the loop: for..in. This is a completely different thing from the for(;;) construct that we studied before.

The syntax:

for (key in object) {
  // executes the body for each key among object properties
}

For instance, let’s output all properties of user:

let user = {
  name: "John",
  age: 30,
  isAdmin: true
};

for (let key in user) {
  // keys
  alert( key );  // name, age, isAdmin
  // values for the keys
  alert( user[key] ); // John, 30, true
}

Note that all “for” constructs allow us to declare the looping variable inside the loop, like let key here.

Also, we could use another variable name here instead of key. For instance, "for (let prop in obj)" is also widely used.

Objects are associative arrays with several special features.

They store properties (key-value pairs), where:

• Property keys must be strings or symbols (usually strings).
• Values can be of any type.

To access a property, we can use:

• The dot notation: obj.property.
• Square brackets notation obj["property"]. Square brackets allow to take the key from a variable, like obj[varWithKey].

Additional operators:

• To delete a property: delete obj.prop.
• To check if a property with the given key exists: "key" in obj.
• To iterate over an object: for (let key in obj) loop.

What we’ve studied in this chapter is called a “plain object”, or just Object.

There are many other kinds of objects in JavaScript:

• Array to store ordered data collections,
• Date to store the information about the date and time,
• Error to store the information about an error.
• …And so on.

They have their special features . Sometimes people say something like “Array type” or “Date type”, but formally they are not types of their own, but belong to a single “object” data type. And they extend it in various ways.

Objects in JavaScript are very powerful. Here we’ve just scratched the surface of a topic that is really huge.