Object Creation using Object Literal
An object is a standalone entity that stores multiple values as properties and methods. JavaScript objects are used to represent real-world entities such as Employee, Student, Product, Customer, etc.
What you'll cover
Learning objectives
- Understand JavaScript Objects
- Create objects using Object Literal
- Access object properties
- Create object methods
- Create nested objects
- Use Object.keys()
- Use Object.values()
- Check property existence using hasOwnProperty()
Prerequisites
Related topics
Concept breakdown
What is an Object?
An object is a standalone entity that stores multiple values in the form of properties and methods.
Properties
Properties are key-value pairs that store data.
Methods
Methods are functions stored inside an object.
Nested Objects
Objects can contain other objects as properties.
Object Creation using Object Literal
Step by step
- 1
Create Object
Create an employee object using curly braces.
- 2
Add Properties
Add firstName and lastName properties.
- 3
Add Method
Create getFullName() method to return the employee's full name.
- 4
Nested Object
Create an address object inside the employee object.
- 5
Check Property
Use hasOwnProperty() to determine whether mobile exists.
- 6
Add New Property
If mobile does not exist, add it dynamically.
- 7
Display Object
Print the object, keys, values and employee details.
Key takeaways
Key points
- Object Literal is the simplest way to create objects.
- Properties are stored as key-value pairs.
- Objects can contain methods.
- Objects can contain nested objects.
- Properties can be added dynamically.
- Object.keys() returns property names.
- Object.values() returns property values.
- The this keyword refers to the current object.
Advantages
- Easy to read
- Easy to write
- Fast object creation
- Supports nested objects
- Supports methods
- Most commonly used approach
Disadvantages
- Not suitable when creating many similar objects.
- Constructor functions or classes are better for reusable object blueprints.
Employee Management System
Every employee can be represented as an object containing personal information, address, salary, department, and methods such as getFullName() or calculateSalary().
Frequently asked questions
An Object Literal is the simplest way to create an object using curly braces.
Object Literal uses {}, whereas Object Constructor uses new Object(). Object Literal is shorter and more commonly used.
It returns an array containing all property names.
It returns an array containing all property values.
It checks whether a property exists directly on the object.
Quick MCQ practice
1. Which is the simplest way to create an object?
2. Which method returns property names?
3. Which method checks whether a property exists?
Practice on your own
Coding exercise
Student Object
Create a Student object using Object Literal with name, age, course, marks, address, and getDetails() method.
Assignment
- Create a Product object.
- Add Product ID, Name, Price, Category.
- Create a Manufacturer nested object.
- Create getProductInfo() method.
- Display all details using document.write().
Tags
References
