JavaScript Object Properties and Methods

JavaScript objects are used to store related data and functionality in a single structure. An object can contain properties, which store information, and methods, which are functions that perform actions.

Understanding object properties and methods is important when working with real-world data, such as user accounts, products, employees, and shopping carts.

What Are JavaScript Object Properties?

Object properties are key-value pairs that store information about an object. A property has a name, also called a key, and a value.

For example, a student object can contain properties such as name, age, and course.

const student = {
    name: "Rahul",
    age: 21,
    course: "JavaScript"
};

console.log(student);

Output:

{ name: 'Rahul', age: 21, course: 'JavaScript' }

In this example:

name is a property with the value "Rahul".
age is a property with the value 21.
course is a property with the value "JavaScript".

If you are new to objects, first understand how to create JavaScript objects and how they group related information.

How to Access Object Properties

JavaScript provides two common ways to access object properties: dot notation and bracket notation.

Using Dot Notation

Dot notation uses a period (.) between the object name and the property name.

const student = {
    name: "Rahul",
    age: 21,
    course: "JavaScript"
};

console.log(student.name);
console.log(student.age);
console.log(student.course);

Output:

Rahul
21
JavaScript

Dot notation is simple and is commonly used when the property name is known in advance.

Using Bracket Notation

Bracket notation uses square brackets ([]) to access a property. The property name is usually written as a string.

const student = {
    name: "Rahul",
    age: 21,
    course: "JavaScript"
};

console.log(student["name"]);
console.log(student["age"]);

Output:

Rahul
21

Bracket notation is useful when a property name contains spaces or when the property name is stored in a variable.

const student = {
    name: "Rahul",
    "favorite subject": "JavaScript"
};

const propertyName = "name";

console.log(student[propertyName]);
console.log(student["favorite subject"]);

Output:

Rahul
JavaScript

The following example demonstrates why dot notation and bracket notation behave differently when using a variable.

const student = {
    name: "Rahul",
    age: 21
};

const propertyName = "age";

console.log(student.propertyName);
console.log(student[propertyName]);

Output:

undefined
21

student.propertyName looks for a property literally named propertyName. In contrast, student[propertyName] uses the variable’s value, which is "age".

How to Add Object Properties

You can add a new property to an existing object by assigning a value to a property name that does not already exist.

const student = {
    name: "Rahul",
    age: 21
};

student.course = "JavaScript";
student.city = "Hyderabad";

console.log(student);

Output:

{
    name: 'Rahul',
    age: 21,
    course: 'JavaScript',
    city: 'Hyderabad'
}

You can also add properties using bracket notation.

const student = {};

student["name"] = "Rahul";
student["age"] = 21;

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

Output:

Rahul
21

Adding properties allows you to update an object as your program runs.

How to Update Object Properties

To update an existing property, assign it a new value.

const student = {
    name: "Rahul",
    age: 21,
    course: "HTML"
};

student.course = "JavaScript";
student.age = 22;

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

Output:

JavaScript
22

The existing values are replaced with the new values. This is different from adding a property, which creates a property that was not previously present.

How to Delete Object Properties

Use the delete operator to remove a property from an object.

const student = {
    name: "Rahul",
    age: 21,
    course: "JavaScript"
};

delete student.age;

console.log(student);

Output:

{ name: 'Rahul', course: 'JavaScript' }

The age property is removed from the object.

Use delete when you need to remove a specific property, rather than simply assigning it a value such as undefined.

What Are JavaScript Object Methods?

An object method is a function stored as a property of an object. Methods allow objects to perform actions using their own data.

For example, a user object can have properties such as name and age, along with a method that displays a greeting.

const user = {
    name: "Rahul",
    age: 21,

    greet: function() {
        console.log("Hello, my name is " + this.name);
    }
};

user.greet();

Output:

Hello, my name is Rahul

In this example, greet is a method because its value is a function. The expression user.greet() calls that method.

The this keyword refers to the object that the method is called on in this example. Therefore, this.name accesses the name property of user.

To understand how functions work before using them as methods, see the JavaScript functions tutorial.

How to Create Object Methods

There are multiple ways to define methods inside an object.

Using Function Expressions

You can assign a function expression to an object property.

const calculator = {
    add: function(a, b) {
        return a + b;
    },

    subtract: function(a, b) {
        return a - b;
    }
};

console.log(calculator.add(10, 5));
console.log(calculator.subtract(10, 5));

Output:

15
5

Here, add and subtract are methods that perform calculations.

Using Method Shorthand

JavaScript also supports a shorter syntax for defining methods.

const calculator = {
    add(a, b) {
        return a + b;
    },

    multiply(a, b) {
        return a * b;
    }
};

console.log(calculator.add(4, 6));
console.log(calculator.multiply(4, 6));

Output:

10
24

Method shorthand is commonly used because it makes object definitions shorter and easier to read.

Using Arrow Functions

You can also assign an arrow function to an object property.

const calculator = {
    add: (a, b) => {
        return a + b;
    }
};

console.log(calculator.add(5, 3));

Output:

However, arrow functions do not have their own this value. If a method needs to access other properties of the same object using this, a regular method or function is generally the better choice.

Using the `this` Keyword in Object Methods

The this keyword allows a method to access properties of the object it is called on.

const employee = {
    name: "Anjali",
    salary: 30000,

    displayDetails() {
        console.log("Employee: " + this.name);
        console.log("Salary: " + this.salary);
    }
};

employee.displayDetails();

Output:

Employee: Anjali
Salary: 30000

Here, this.name refers to employee.name, and this.salary refers to employee.salary.

Consider another example that updates a property through a method.

const product = {
    name: "Laptop",
    price: 50000,

    updatePrice(newPrice) {
        this.price = newPrice;
    }
};

product.updatePrice(45000);

console.log(product.price);

Output:

The updatePrice() method changes the object’s price property.

Remember that the value of this depends on how a function is called. For example, storing a method in a separate variable and calling it independently may produce a different this value.

Difference Between Object Properties and Methods

Feature	Properties	Methods
Purpose	Store information	Perform actions
Value	Can be a string, number, boolean, object, or other value	Usually a function
Access	`student.name`	`student.greet()`
Example	`age: 21`	`greet() { ... }`

Consider this example:

const car = {
    brand: "Toyota",
    speed: 80,

    accelerate() {
        this.speed += 10;
    }
};

console.log(car.brand);
console.log(car.speed);

car.accelerate();

console.log(car.speed);

Output:

Toyota
80
90

In this example, brand and speed are properties. The accelerate() method changes the car’s speed.

Checking Whether an Object Has a Property

You can use the in operator to check whether a property exists in an object or its prototype chain.

const student = {
    name: "Rahul",
    age: 21
};

console.log("name" in student);
console.log("course" in student);

Output:

true
false

You can also use Object.hasOwn() to check whether a property belongs directly to the object.

const student = {
    name: "Rahul",
    age: 21
};

console.log(Object.hasOwn(student, "name"));
console.log(Object.hasOwn(student, "course"));

Output:

true
false

This is useful when working with objects whose properties may vary.

What Are JavaScript Object Properties?

How to Access Object Properties

Using Dot Notation

Using Bracket Notation

How to Add Object Properties

How to Update Object Properties

How to Delete Object Properties

What Are JavaScript Object Methods?

How to Create Object Methods

Using Function Expressions

Using Method Shorthand

Using Arrow Functions

Using the this Keyword in Object Methods

Difference Between Object Properties and Methods

Checking Whether an Object Has a Property

Important Things to Remember

Using the `this` Keyword in Object Methods