11/19/24, 4:39 AM A Comprehensive Guide to JavaScript Objects - Part 1
A Comprehensive Guide to JavaScript Objects -
Part 1
JavaScript objects are one of the core building blocks of the language. They are versatile and allow for dynamic, structured
data manipulation. This chapter covers the fundamentals of objects, including their declaration, mutation, properties,
methods, and advanced use cases.
What Are Objects in JavaScript?
An object in JavaScript is a standalone entity that holds properties and methods. Properties are key-value pairs, and methods
are functions stored as values of object properties. Objects are used extensively in JavaScript for storing and manipulating
structured data.
Example
let car = {
make: 'Toyota',
model: 'Corolla',
year: 2020,
drive: function() {
console.log('The car is driving.');
}
};
Declaring Objects
There are multiple ways to declare objects in JavaScript. The most common methods include:
Using Object Literals
This is the simplest and most common way to create objects.
let person = {
firstName: 'John',
lastName: 'Doe',
age: 30
};
Using the new Object() Constructor
The constructor approach can be useful in certain scenarios, but it is less commonly used.
let book = new Object();
book.title = 'JavaScript Basics';
book.author = 'Jane Doe';
file:///home/zub/Desktop/A Comprehensive Guide to JavaScript Objects - Part 1.html 1/4
11/19/24, 4:39 AM A Comprehensive Guide to JavaScript Objects - Part 1
book.pages = 200;
Using Object.create()
Objects can also be created using a prototype object.
let proto = {greet: function() { console.log('Hello!'); }};
let obj = Object.create(proto);
obj.name = 'Alice';
console.log(obj.name); // Output: Alice
obj.greet(); // Output: Hello!
Accessing Object Properties
Properties in JavaScript objects can be accessed in two ways:
Dot Notation
console.log(person.firstName); // Output: John
person.age = 31; // Modify age property
Bracket Notation
Useful when property names include spaces or special characters, or when they are dynamic.
let propName = 'lastName';
console.log(person[propName]); // Output: Doe
person['age'] = 32; // Modify using bracket notation
Mutating Objects
Objects in JavaScript are mutable. You can add, modify, or delete properties dynamically.
Adding New Properties
person.gender = 'Male';
console.log(person.gender); // Output: Male
Deleting Properties
delete person.age;
console.log(person.age); // Output: undefined
file:///home/zub/Desktop/A Comprehensive Guide to JavaScript Objects - Part 1.html 2/4
11/19/24, 4:39 AM A Comprehensive Guide to JavaScript Objects - Part 1
Object Methods
JavaScript provides a variety of built-in methods to work with objects.
Object.keys()
Returns an array of the object’s keys.
console.log(Object.keys(person)); // Output: ['firstName', 'lastName', 'gender']
Object.values()
Returns an array of the object’s values.
console.log(Object.values(person)); // Output: ['John', 'Doe', 'Male']
Object.entries()
Returns an array of key-value pairs.
console.log(Object.entries(person));
// Output: [['firstName', 'John'], ['lastName', 'Doe'], ['gender', 'Male']]
Object.assign()
Copies properties from one object to another.
let target = {};
Object.assign(target, person);
console.log(target);
// Output: {firstName: 'John', lastName: 'Doe', gender: 'Male'}
Looping Through Objects
Since objects are not inherently iterable, you need to use specific methods or loops to iterate over them.
Using for...in
for (let key in person) {
console.log(key + ': ' + person[key]);
}
// Output:
// firstName: John
// lastName: Doe
// gender: Male
file:///home/zub/Desktop/A Comprehensive Guide to JavaScript Objects - Part 1.html 3/4
11/19/24, 4:39 AM A Comprehensive Guide to JavaScript Objects - Part 1
Using Object.entries() with for...of
for (let [key, value] of Object.entries(person)) {
console.log(key + ': ' + value);
}
// Output:
// firstName: John
// lastName: Doe
// gender: Male
Nested Objects
Objects can contain other objects, enabling you to model complex data structures.
Example
let company = {
name: 'Tech Corp',
location: {
city: 'San Francisco',
country: 'USA'
},
employees: 500
};
console.log(company.location.city); // Output: San Francisco
Accessing Nested Properties
Use dot or bracket notation to access nested properties.
company.location.state = 'California'; // Add a new nested property
console.log(company.location);
// Output: {city: 'San Francisco', country: 'USA', state: 'California'}
file:///home/zub/Desktop/A Comprehensive Guide to JavaScript Objects - Part 1.html 4/4
