JavaScript objects are used to store related information in a single structure. They allow you to represent real-world entities such as students, employees, products, and cars using properties and values.
For example, a student has a name, age, and marks. Instead of storing these details in separate variables, you can group them inside a single JavaScript object.
In this tutorial, you will learn what JavaScript objects are, how object properties work, and how to create objects using different methods.
What Is an Object in JavaScript?
An object in JavaScript is a collection of properties, where each property has a key and a value. A value can be a string, number, Boolean, array, function, another object, or another JavaScript value.
For example:
let student = {
name: "Karim",
age: 22,
marks: 85
};
console.log(student);
Output:
{ name: "Karim", age: 22, marks: 85 }
In this example, student is an object containing three properties:
namestores the student’s name.agestores the student’s age.marksstores the student’s marks.
The property names are called keys, and their associated data is called values.
If you are learning how JavaScript stores collections of data, you can also explore JavaScript Arrays, which are commonly used to store ordered lists of values.
Why Are Objects Used in JavaScript?
Objects help you organize related data and represent entities in a meaningful way.
Without an object, you might create separate variables for a student’s details:
let studentName = "Karim";
let studentAge = 22;
let studentMarks = 85;
With an object, you can group the same information together:
let student = {
name: "Karim",
age: 22,
marks: 85
};
console.log(student.name);
console.log(student.age);
console.log(student.marks);
Output:
Karim
22
85
Objects make it easier to manage related information, pass data between functions, and build larger applications.
Understanding Object Properties and Values
Each object property consists of a key and a value separated by a colon. Properties are separated by commas.
let product = {
name: "Laptop",
price: 45000,
inStock: true
};
Here is what each property represents:
| Property key | Value | Data type |
|---|---|---|
name | "Laptop" | String |
price | 45000 | Number |
inStock | true | Boolean |
JavaScript objects can contain different data types in the same object.
You can learn more about JavaScript’s built-in data types in JavaScript Data Types.
Creating Objects Using Object Literals
The simplest and most common way to create an object in JavaScript is by using an object literal.
An object literal uses curly braces {} to define properties and their values.
Syntax:
let objectName = {
key1: value1,
key2: value2
};
Example:
let car = {
brand: "Toyota",
model: "Camry",
year: 2025
};
console.log(car);
Output:
{ brand: "Toyota", model: "Camry", year: 2025 }
The car object stores information about a vehicle. Each property describes one of its characteristics.
Object literals are recommended for creating individual objects because they are concise and easy to read.
Creating an Empty Object
You can create an empty object using empty curly braces.
let person = {};
console.log(person);
Output:
{}
An empty object contains no own properties initially. You can add properties later using dot notation or bracket notation.
let person = {};
person.name = "Arun";
person.age = 25;
console.log(person);
Output:
{ name: "Arun", age: 25 }
The properties name and age are added after the object is created.
Creating Objects Using the new Object() Syntax
JavaScript also allows you to create an object using the Object() constructor with the new keyword.
let person = new Object();
person.name = "Priya";
person.age = 24;
person.city = "Hyderabad";
console.log(person);
Output:
{ name: "Priya", age: 24, city: "Hyderabad" }
The new Object() expression creates an object, and the properties are assigned afterward.
However, using {} is generally preferred because it is shorter and more readable.
Creating Objects with Properties and Methods
An object can contain both data and functions. A function stored as an object property is commonly called a method.
let person = {
name: "Karim",
age: 22,
greet: function() {
console.log("Hello, my name is " + this.name);
}
};
person.greet();
Output:
Hello, my name is Karim
In this example:
nameandageare properties.greetis a method.this.nameaccesses thenameproperty of the object when the method is called asperson.greet().
You can also write methods using the concise method syntax:
let person = {
name: "Karim",
greet() {
console.log("Hello, my name is " + this.name);
}
};
person.greet();
Output:
Hello, my name is Karim
To understand how functions work in JavaScript, read JavaScript Functions.
Creating Objects Using Constructor Functions
A constructor function can be used to create multiple objects with the same general structure. By convention, constructor function names begin with a capital letter, and the function is called with new.
function Student(name, age, marks) {
this.name = name;
this.age = age;
this.marks = marks;
}
let student1 = new Student("Arun", 21, 85);
let student2 = new Student("Priya", 22, 92);
console.log(student1.name);
console.log(student2.name);
Output:
Arun
Priya
The Student constructor defines the properties that each new student object will have.
When you call new Student(...), JavaScript creates a new object and uses this to assign the supplied values to that object.
Constructor functions are useful when you need to create multiple objects with similar properties.
Creating Objects Using Classes
JavaScript also supports classes, which provide syntax for creating objects with shared properties and methods.
class Student {
constructor(name, age) {
this.name = name;
this.age = age;
}
display() {
console.log(this.name + " is " + this.age + " years old.");
}
}
let student = new Student("Karim", 22);
student.display();
Output:
Karim is 22 years old.
The constructor() method initializes each new instance. The display() method defines behavior shared by instances of the class.
Classes are especially useful when building applications with multiple related objects.
Creating Objects Using Object.create()
The Object.create() method creates a new object with a specified prototype.
let personDetails = {
greet() {
console.log("Hello!");
}
};
let person = Object.create(personDetails);
person.name = "Karim";
console.log(person.name);
person.greet();
Output:
Karim
Hello!
The person object has its own name property. Its prototype is personDetails, so it can also access the inherited greet() method.
This method is useful when you want to control the prototype of a newly created object.
Creating Objects with Nested Objects
An object can contain another object as a property. This structure is called a nested object.
let employee = {
name: "Arun",
position: "Developer",
address: {
city: "Hyderabad",
country: "India"
}
};
console.log(employee.name);
console.log(employee.address.city);
Output:
Arun
Hyderabad
The address property contains another object with city and country properties.
You can access nested properties by chaining property names with dot notation.
Creating an Array of Objects
JavaScript arrays can store multiple objects. This is useful when working with collections of products, students, employees, or other records.
let students = [
{ name: "Arun", marks: 85 },
{ name: "Priya", marks: 92 },
{ name: "Rahul", marks: 78 }
];
console.log(students[0].name);
console.log(students[1].marks);
Output:
Arun
92
The expression students[0].name accesses the first object’s name property.
To learn more about storing collections, see JavaScript Array Length and Nested Arrays.
Object Literal vs. Constructor Function vs. Class
| Method | Best use |
|---|---|
Object literal {} | Creating a single object |
new Object() | Creating an object using the built-in constructor |
| Constructor function | Creating multiple objects with a similar structure |
class | Defining reusable object structures and methods |
Object.create() | Creating an object with a specific prototype |
For a single object, an object literal is usually the simplest option. Constructor functions and classes are useful when you need multiple instances with shared structure and behavior.
Frequently Asked Questions
What is an object in JavaScript?
An object is a collection of properties that associate keys with values. It can represent entities such as people, products, or employees.
How do you create an object in JavaScript?
You can create an object using an object literal:
let person = {
name: "Karim",
age: 22
};
Can a JavaScript object contain different data types?
Yes. An object can contain strings, numbers, Boolean values, arrays, other objects, and functions.
What is the difference between an object and an array?
An object stores data using named properties, while an array is designed for an ordered collection of elements accessed primarily by numeric indexes.
What is a method in a JavaScript object?
A method is a function stored as an object property. It defines behavior associated with the object.
What is the difference between an object literal and a class?
An object literal creates an individual object directly. A class defines a reusable structure from which you can create multiple instances.
Can you add properties after creating an object?
Yes. You can add properties using dot notation or bracket notation, provided the object allows the property to be added.
10 thoughts on “JavaScript Objects”
Comments are closed.