JavaScript Objects

Javascript objects are the collection of key-value pairs where key refers to either a string or symbol value and value refers to any Javascript valid data types.

Remember the following points regarding the Javascript object.

Javascript object is a collection of properties.
An object property is a key-value pair that contains a key name and its value.
Please keep in mind that, the property name will be the unique value that points to the valid data types value.
Property value can be a valid Javascript data type value.

General Syntax

      var objectName = {
 property1 : value1,
property2 : value2,
//...,
propertyN : valueN 
};

Try it now

Source Code

          
            var person = {
  name: "Smith",
  job: "designer",
  salary: 45000,
};

Try it now

Code Explanation

objectName : It denotes the name of the object.

Object Property Name/Key:It refers to object property name such as property_1, property_2, .....property_n. It will be either string of text or symbols.

Object Property Value:It specifies object property values such as value1, value2,..,valueN.This value will be any valid javascript data types.

Accessing Object Properties

Javascript object property can be accesses using two ways:

1 Using Dot Notation
2 Using Bracket Notation

1. Using Dot Notation

You can access object property by following ways: objectName.key

General Syntax

      objectName.propertyName;

Try it now

Source Code

          
            const person = {
  name: "John Doe",
  salary: 20000,
};
// accessing property
console.log(person.name); // John

Try it now

2. Using bracket Notation

Javascript object property can be accessed by bracket notation.

General Syntax

      objectName["propertyName"];

Try it now

Source Code

          
            const person = { 
    name: 'John', 
    salary: 200000, 
};

// accessing property
document.write(person["name"]); // John

Try it now

JavaScript Nested Objects

Javascript objects can also contain another object. Let us understand it with the help of an example.

Source Code

          
            const person = {
  name: "John Doe",
  salry: 200000,
  workHistory: {
    php: 7,
    node: 4,
  },
};
// accessing property of person object
document.write(person.workHistory);
//output: {php: 7, node: 4}
// accessing property of marks object
document.write("output: " + person.workHistory.php);
//output:  7

Try it now

Adding or Deleting Object Properties

Javascript provides flexibility to add and remove the property to the existing object.

The following example creates a new object i.e person. Later, we will add a new property getInfo which is actually a function.

Source Code

          
            let person = {
  name: "John Doe",
  age: 32,
  job: "web developer",
};
console.log(person);
//Adding a new property
person.getInfo = function () {
  return "My name is " + this.name + " and my age is " + this.age + " and my salary is " + this.job;
};
console.log(person.getInfo());
console.log(person);

Try it now

Deleting Object Property

Javascript property can be deleted using the delete statement. Let us delete the job property from the person object.

Source Code

          
            let person = {
  name: "John Doe",
  age: 32,
  job: "web developer",
};

console.log(person);
//Deleting age
delete person.job;
console.log(person);

Try it now

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4