JavaScript Objects (With Examples)

A JavaScript object is a variable that can store multiple data values in the form of key-value pairs.

Visual Representation

Visual Representation of JavaScript ObjectsCreating an Object

There are several ways to create objects:

1)Object Literals

let student = {
 firstName: "David",
 lastName: "Warner",
 age: 20
 };

console.log(typeof student);

Output

Object

2)Using the new Object() Constructor

You can use the new keyword and the Object() function to create an empty object and then add properties using dot notation.

let student = new Object();
student.firstName = "David";
student.lastName = "Warner";
student.age = 20;

console.log(typeof student);

Output

Object

Accessing Object Properties

You can access properties of an object using dot notation or bracket notation:

1)Dot Notation

Syntax

objectName.propertyName

Example

let student = {
 firstName: "David",
 lastName: "Warner",
 age: 20
 };
 
console.log(student.firstName);
console.log(student.lastName);
console.log(student.age);

Output

David
Warner
20 

2)Bracket Notation

It is useful when property names are dynamic or not valid identifiers.

Syntax

objectName["propertyName"]

Example

let student = {
 firstName: "David",
 lastName: "Warner",
 age: 20
 };
 
console.log(student['firstName']);
console.log(student['lastName']);
console.log(student['age']);

Output

David
Warner
20 

Adding and Modifying Properties

JavaScript objects are dynamic, meaning properties can be added or changed after an object is created.

let student = {
 firstName: "David",
 lastName: "Warner",
 age: 20
 };
 
 console.log(student.firstName);
 console.log(student.lastName);
 console.log(student.age);

 student.gender = "male"; // Adding the gender property
 student.age = 30; // Modifying the age property

 console.log(student.gender);
 console.log(student.age);

Output

David
Warner
20
male
30

Deleting a property of an Object

To delete a property of an object, you use the delete operator:

delete objectName.propertyName;

Example

let student = {
 firstName: "David",
 lastName: "Warner",
 age: 20
 };

 console.log("BEFORE DELETE : ", student);

 delete student.age
 
 console.log("AFTER DELETE : ", student);

Output

BEFORE DELETE : { firstName: 'David', lastName: 'Warner', age: 20 }
AFTER DELETE : { firstName: 'David', lastName: 'Warner' }

Checking if a property exists in an Object

The in operator is used to check whether a property exists in an object. It returns true if the specified property is found in the object or in its prototype chain; otherwise, it returns false.

propertyName in objectName

Example

let student = {
 firstName: "David",
 lastName: "Warner",
 age: 20
 };

 console.log('country' in student); 
 console.log('age' in student);

Output

false
true

Object Methods

A method is a function that is associated with an object, or put differently, a method is a property of an object where the property value is a function. Methods are defined in the same way as normal functions, but they are assigned as properties of an object.

let student = {
 firstName: "David",
 lastName: "Warner",
 age: 20,
 message: function() { console.log('Hello, my name is ' + this.firstName) }
 };
 
 student.message();

Output

Hello, my name is David

That’s it.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.