JavaScript Object Properties

Introduction

JavaScript objects are one of the most important features of the language. They allow developers to store and organize related data in a structured manner. Every object contains properties, which represent the characteristics or attributes of that object.

In this article, you will learn what JavaScript object properties are, how to create and access them, common mistakes to avoid, real-life examples, and interview questions frequently asked during JavaScript interviews.

What are JavaScript Object Properties?

Object properties are the key-value pairs stored inside an object.

A property consists of:

1. Property Name (Key) – identifies the property.
2. Property Value – stores the data associated with the property.

Syntax

The basic syntax of an object property is:

let objectName = {
    propertyName: value
};

Example:

let employee = {
    name: "John",
    age: 35,
    designation: "Manager"
};

Accessing Object Properties

JavaScript provides two methods to access object properties.

1. Dot Notation

It is commonly used. It is easy to read and has short syntax.

let person = {
    name: "John",
    age: 35
};

console.log(person.name);

Output:

2. Bracket Notation

It works with spaces and special characters. It supports dynamic property names.

let employee = {
    "full name": "John Doe"
};

console.log(employee["full name"]);

Output:

Adding New Properties to the Object

New properties can be added at any time.

let user = {
    name: "John"
};

user.age = 38;

// Using bracket notation:

user["city"] = "Delhi";

console.log(user);

Output:

Updating Object Properties into the Object

Existing properties can be modified.

let product = {
    name: "Laptop",
    price: 50000
};

product.price = 55000;

console.log(product.price);

Output:

Deleting Object Properties from the Object

The delete keyword removes a property from an object.

let employee = {
    name: "John",
    age: 35
};

delete employee.age;
console.log(employee);

Output:

Checking Whether a Property Exists

Using the in Operator

let person = {
    name: "John"
};

console.log("name" in person);

Output:

Checking a missing property:

let person = {
    name: "John"
};

console.log("age" in person);

Output:

Object Property Methods

JavaScript provides several built-in methods for working with object properties.

Object.keys()

Returns all property names.

let person = {
    name: "John",
    age: 35
};

console.log(Object.keys(person));

Output:

Object.values()

Returns all property values.

let person = {
    name: "John",
    age: 35
};

console.log(Object.values(person));

Output:

Object.entries()

It returns both keys and values.

let person = {
    name: "John",
    age: 35
};

console.log(Object.entries(person));

Output:

Object.hasOwn()

Checks whether an object owns a specific property.

let person = {
    name: "John",
    age: 35
};

console.log(Object.hasOwn(person, "name"));

Output:

How to create Read-Only Properties?

We can make properties read-only through Object.defineProperty()

Note: The value remains unchanged because the property is not writable.

let user = {};

Object.defineProperty(user, "id", {
    value: 101,
    writable: false
});

user.id = 201;

console.log(user.id);

Output:

Get the Object Properties through Looping

The for…in loop is used to iterate through properties.

let person = {
    name: "John",
    age: 35,
    city: "Delhi"
};

for(let key in person){
    console.log(key, person[key]);
}

Output:

Common Mistakes

Many Beginners make some common mistakes, like below

1. Accessing a Property with an Incorrect Name

JavaScript is case-sensitive.

Wrong:

let person = {
    name: "John"
};

console.log(person.Name);

Output:

Correct:

let person = {
    name: "John"
};

console.log(person.name);

Output:

2. Forgetting Quotes for Special Characters

Wrong:

let user = {
    first-name: "John"
};

Correct:

let user = {
    "first-name": "John"
};

3. Using Dot Notation with Spaces

Wrong:

let user = {
    "full name": "John Doe"
};

console.log(user.full name);

Correct:

let user = {
    "full name": "John Doe"
};

console.log(user["full name"]);

Conclusion

JavaScript Object Properties are the foundation of working with objects in JavaScript. They allow developers to store, retrieve, update, and organize data efficiently. Understanding how to create properties, access them using dot and bracket notation, add new properties, delete existing ones, and work with built-in methods like Object.keys() and Object.values() is essential for every JavaScript developer.

Related JavaScript Tutorials