Objects in JavaScript – Learn with Simple Examples

JavaScript is one of the most popular programming languages in the world. However, to use JavaScript effectively, you must understand objects in JavaScript. Objects are a very important part of the language. In fact, almost everything in JavaScript is related to objects.

In simple words, objects help us store and organize data in a structured way. Therefore, if you want to build websites, apps, or any interactive feature, you must know how objects work.

In this article, you will learn what objects are, why they are useful, how to create them, and how to use object methods with simple examples.

What Is an Object in JavaScript?

An object in JavaScript is a collection of related data. This data is stored in the form of key-value pairs.

In simple words, a key is like a name, and a value is the information stored under that name.

For example:

const person = {
  name: "John",
  age: 25,
  city: "New York"
};

Here, name, age, and city are keys. On the other hand, “John”, 25, and “New York” are values.

You can think of an object like a real-life object. For example, a car has properties like color, brand, and model. Similarly, a JavaScript object stores related details together.

Why Use Objects in JavaScript?

Now you may wonder why we need objects. After all, we can store values in variables too.

However, variables store only one value at a time. On the other hand, objects can store multiple related values in one place. Therefore, objects help keep data organized.

For example, instead of writing:

let name = "John";
let age = 25;
let city = "New York";

You can write:

const person = {
  name: "John",
  age: 25,
  city: "New York"
};

As a result, your code becomes cleaner and easier to manage.

How to Create Objects in JavaScript

There are multiple ways to create objects in JavaScript. Let’s understand the most common methods.

1. Using Object Literal (Most Common Method)

This is the simplest and most popular way.

const student = {
  name: "Rahul",
  class: 10,
  marks: 85
};

Here, we directly define the object using curly braces {}. Therefore, this method is best for beginners.

2. Using Constructor Function

Sometimes, we need to create many similar objects. In that case, constructor functions are useful.

function Person(name, age) {
  this.name = name;
  this.age = age;
}
const person1 = new Person("Aman", 22);

Here, this refers to the new object being created. As a result, we can create multiple objects easily.

3. Using Object.create()

Another way to create objects is by using Object.create().

const user = {
  greet: function() {
    return "Hello!";
  }
};
const newUser = Object.create(user);

Although this method is less common for beginners, it is useful for advanced concepts like prototypes.

Object Properties in JavaScript

Object properties are simply the key-value pairs inside an object. However, we also need to know how to access them.

There are two main ways to access properties.

1. Dot Notation

console.log(person.name);

This is the most common and simple method. Therefore, it is recommended for regular use.

2. Bracket Notation

console.log(person["age"]);

This method is useful when the property name is dynamic. For example:

let key = "city";
console.log(person[key]);

As you can see, bracket notation provides flexibility.

Object Methods in JavaScript

So far, we have discussed properties. However, objects can also contain functions. These functions are called methods.

In simple words, when a function is stored inside an object, it becomes a method.

A. Custom Object Methods

Let’s understand this with an example:

const person = {
  name: "John",
  greet: function() {
    return "Hello " + this.name;
  }
};
console.log(person.greet());

Here, greet is a method. The keyword this refers to the current object. Therefore, this.name means the name property of the same object.

As a result, the output will be:

Hello John

This makes objects more powerful because they can store both data and behavior.

B. Built-in Object Methods

JavaScript also provides some built-in object methods. These methods help us work with objects easily.

1. Object.keys()

This method returns all the keys of an object.

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

2. Object.values()

This method returns all the values.

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

3. Object.entries()

This method returns both keys and values.

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

4. Object.assign()

This method is used to copy properties from one object to another.

const obj1 = { a: 1 };
const obj2 = { b: 2 };

const combined = Object.assign({}, obj1, obj2);

5. Object.freeze()

This method prevents changes to an object.

const car = { brand: "BMW" };
Object.freeze(car);

After freezing, you cannot modify the object. Therefore, it increases data security.

Nested Objects in JavaScript

Sometimes, an object can contain another object. This is called a nested object.

For example:

const user = {
  name: "Aman",
  address: {
    city: "Delhi",
    pin: 110001
  }
};

To access nested values:

console.log(user.address.city);

Similarly, nested objects help organize complex data.

Objects vs Arrays

Many beginners get confused between objects and arrays. However, they are different.

For example, if you want to store student details, objects are better. On the other hand, if you want to store a list of marks, arrays are better.

Practical Example of Objects in JavaScript

Let’s create a small real-world example.

const product = {
  name: "Laptop",
  price: 50000,
  discount: 10,
  finalPrice: function() {
    return this.price - (this.price * this.discount / 100);
  }
};
console.log(product.finalPrice());

Here, the object stores both data and logic. As a result, the calculation becomes easy and organized.

Conclusion

To summarize, objects in JavaScript are used to store related data in the form of key-value pairs. Moreover, objects can also include methods, which makes them very powerful.

We learned how to create objects using different methods. In addition, we explored object properties, object methods, nested objects, and built-in methods.

Therefore, if you want to become good at JavaScript, you must practice working with objects daily. Once you understand objects clearly, many advanced concepts will become easier.

Overall, objects are one of the most important concepts in JavaScript, and mastering them will improve your coding skills significantly.

Read Also –
1- Data Types in JavaScript
2- JavaScript Arrow Function