Introduction to the JavaScript objects

In JavaScript, an object is an unordered collection of KEY-VALUE pairs. They can be seen as a collection of properties.

The** key** can be a string and the value can be of any data-type eg: a string, an array, a number or even a function.

Creating objects

JavaScript provides us various ways to create an object.The most commonly used is the using an object literal.
An object literal uses { } to create an object directly. We write multiple properties using comma(,) operator.
We can also add , to the last property , however it's optional to do so.

The following example illustrates the following:

 const person = {
// Key: value pair
  name: "Jay Gupta",
  age: 21,
  country: 'India',
};
console.log(person);
Output:
{ name: "Jay Gupta", age: 21,  country: 'India',}

Here we are creating an object person with the properties as :
name: "Jay Gupta" age: 21, country: 'India'.

Accessing properties of objects

We can access the properties in two ways:

1.Dot notation:

Syntax: objectName.propertyName
Example: person.name

From the above person object we can access the properties as:

console.log(person.name); 
console.log(person.age);  
Output:  
Jay Gupta  
21

But when a property name contains spaces, we cannot use the Dot operator. We use the array-like notation.

2.Array-like notation:

Syntax: objectName['propertyName']
The string inside the square brackets should be** properly quoted**(any type of quotes).

Example: person['Date of birth']

 const person = {
  name: "Jay Gupta",
  age: 21,
  country:'India',
 'Date of birth': '20/11/2001',
};
console.log(person['Date of birth']);  
Output:
20/11/2001

We cannot access the 'Date of birth': '20/11/2001' using the Dot operator.

console.log(person.'Date of birth');  //SyntaxError

The Array-like notation also provides a way to obtain the property name as the result of any expression.
Example: If we want to take input from the user?Then we can use this notation.

const input = prompt('What do you want to know?');
console.log(person[input]); //let input = name
Output:  
Jay Gupta

Example for having an array and a function as key in the object.

const person = {
  name: "Jay Gupta",
//function 
  age: function (birthYear,currentYear) {
    return currentYear - birthYear ;
  },
//Array
  friends: ['Janhvi','Kushal','Aman'],
};

console.log(person.age(2001,2022));
console.log(person.friends);

Output:
21  
(3) ['Janhvi','Kushal','Aman']

Modifying object property

We can modify the value of a property by the assignment operator(=), by accessing the property and assigning the new value to it.
**Syntax: ** objectName.propertyName =' newValue'
Example: If we need to change the name of the object person we can do this:

person.name = 'Jay';

Adding new property

We can add new property to an object by the following syntax:
**Syntax: ** objectName.newPropertyName =' Value'
For example if we need to add the 'city' property to the object person:

person.city = 'Durg';

Deleting a property

We can delete a property by using the delete operator.
Syntax: delete objectName.propertyName
For example if we have to delete the 'city'property which we added before.

delete person.city;

Thanks for reading 😃
I hope you got to learn something from this article. You can find me on Twitter | LinkedIn , I would love to connect with you.
Let me know in the comment section if you have any doubt or feedback.

JavaScript Objects