Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
5 views

A Comprehensive Guide to JavaScript Objects - Part 1

JavaScript Objects

Uploaded by

xubairacca
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

A Comprehensive Guide to JavaScript Objects - Part 1

JavaScript Objects

Uploaded by

xubairacca
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

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

You might also like