JavaScript Objects

Javascript Objects

Are you familiar with arrays? An array is a collection of data that is arranged in a specific order. Likewise, an object is a collection of data that is unordered

In JavaScript, an object is a collection of key-value pairs. A property is the name given to each key-value pair. A property can be a function, an array, an object, or any primitive data type, such as an integer, string, or a number. Methods are the names given to the functions that make up an object.

var human = {
	Name: "Ram",
	age: 30,
	fullName: function(){
		return this.firstName + " " + this.age		
	}
}

Properties of JavaScript Object

🚀 Strings or digits can be used as property names. If the property names are numbers, they must be accessed using "bracket notation," which is as follows:

let school = {
    name: 'DPS',
    location : 'Kolkata',
    20 : 1000,
    displayInfo : function(){
        console.log(`The value of the key 20 is ${school['20']}`);
    }
}
school.displayInfo();  

🚀 Using dot Notation

Here's the syntax of the dot notation.

objectName.key

Let's take an example for better understanding

const persons = { 
    name: 'Ram', 
    age: 20, 
};

// accessing property
console.log(persons.age); // 20

🚀 Properties of Inheritance

The attributes of an object that have been inherited from the object's prototype, as opposed to being defined for the object itself, which is known as the object's Own property, are known as inherited properties. The function hasOwnProperty() { [native code] } method can be used to check if a property is an object's own property.

// hasOwnProperty code in js
const obj1 = new Object();
obj1.val1 = 42;
  
console.log(obj1.hasOwnProperty('val1')); // true

Creating Objects

🚀 Constructor notation

The "Object" function Object() is another technique to build objects in JavaScript. For the provided value, the Object function Object() generates an object wrapper. We can use this in conjunction with the "new" keyword to create new objects.

After creating a blank object we can add properties and methods using the dot notation.

var motel = new Object();
motel.name = "Savvy";
motel.rooms = 20;
motel.booked = 20;
motel.gym = true;
motel.available_room = function(){
  return this.rooms - this.booked;
};

💡But why we need a constructor method?

If you were to create a website that contains a list of all the motels in the city of 'Delhi,' it would take a long time and violate the programming concept of DRY (don't repeat yourself). It is in this context that the function Object() method appears.

Object constructors can utilise a function to create objects as a template. Create a template using the object's properties and methods first.

🚀 Object literal syntax:

The {...} notation is used in object literal syntax to immediately initialise an object and its methods/properties.

Let's take an example for better understanding

var obj = {
    mem1 : v1,
    mem2 : v2,
};

The members can be of any datatype. This is different from other methods of object creation

🚀 Prototypes

Prototypes are another method for creating objects. By default, every JavaScript function has a prototype object property (it is empty by default). This property can have methods or properties connected to it. The scope of this introduction to objects does not allow for a detailed description of prototypes.

Let's take an example of object.create() method

let fieldset = {
    position: "long on"
}
   
let cric1 = Object.create(fieldset);
   
    // Output : long on    
console.log(cric1.position); 

Delete a property from an object

The delete operator can be used to remove a property from an object. You can't delete properties that were inherited, and you can't delete properties that have customizable characteristics.

If the remove was successful, the 'delete' operator returns true. It also returns true if the property to be deleted was not found or could not be deleted.

let obj1 = {
    name : "Name"
} 
  
// Output : Name
console.log(obj1.name); 
delete obj1.name
  
// Output : undefined
console.log(obj1.name);     

Conclusion: At this point, you should have a better understanding of JavaScript Objects. As you work on JavaScript programming projects, each of these will become more important.