JavaScript Objects Tutorial
Objects are a fundamental concept in JavaScript that allow you to group related data and functionality together. They are used to model real-world entities and their properties. Objects consist of key-value pairs, where each key is a property name and each value can be of any data type, including other objects.
The object type is a compound value where you can set properties (named locations) that each hold their own values of any type. This is perhaps one of the most useful value types in all of JavaScript.
Creating Objects
There are multiple ways to create objects in JavaScript:
// Object Literal
const person = {
firstName: "John",
lastName: "Doe",
age: 30,
isStudent: false
};
// Constructor Function
// Industries use this version most because they take the data object they
// read from the database and pass it to the function Person.
// The function then reads appropriate values and assigns
// them to the properties of the object dynamically
function Person(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
const john = new Person("John", "Doe", 30);
// ES6 Class
class Person {
constructor(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
}
const jane = new Person("Jane", "Smith", 25);
Pictorially, here is the representation of the object in memory/behind the hood:
Accessing and Modifying Object Properties
You can access and modify object properties using dot notation or square brackets:
console.log(person.firstName); // John
console.log(person.lastName); // Doe
console.log(person.age); // 30
console.log(person.isStudent); // false
console.log(person["firstName"]); // John
console.log(person["lastName"]); // Doe
console.log(person["age"]); // 30
console.log(person["isStudent"]); // false
console.log(john["lastName"]); // Doe
console.log(john["age"]); // 30
person.age = 31;
john["age"] = 31;
Note: Perperties can be assessed with dot notation and bracket notation,
but dot notation is shorter and hence is the most preferred method.
Bracket notations are useful when the property being assessed
has special characters in it. eg: person["john doe!"]
Adding and Deleting Properties
You can add new properties to an object and delete existing ones:
person.nationality = "American";
delete john.age;
Object Methods
Objects can also contain functions, known as methods, to perform actions:
const calculator = {
add: function(a, b) {
return a + b;
},
subtract: function(a, b) {
return a - b;
}
};
console.log(calculator.add(5, 3)); // 8
//Extending the person object to add functions
const person = {
firstName: "John",
lastName: "Doe",
age: 30,
isStudent: false,
getFullName: function() {
return `${this.firstName} ${this.lastName}`;
},
greet: function() {
if (this.isStudent) {
return `Hello, I'm ${this.getFullName()}, and I'm a student.`;
} else {
return `Hello, I'm ${this.getFullName()}.`;
}
},
celebrateBirthday: function() {
this.age++;
return `Happy birthday! Now I'm ${this.age} years old.`;
}
};
console.log(person.getFullName()); // John Doe
console.log(person.greet()); // Hello, I'm John Doe.
console.log(person.celebrateBirthday()); // Happy birthday! Now I'm 31 years old.
Nested Objects
Objects can contain other objects as properties, creating a hierarchical structure:
const car = {
make: "Toyota",
model: "Camry",
year: 2022,
owner: {
firstName: "Alice",
lastName: "Johnson"
}
};
console.log(car.owner.firstName); // Alice
Iterating Through Object Properties
You can loop through object properties using for...in
loops:
for (const key in person) {
console.log(`${key}: ${person[key]}`);
}
Object Destructuring
Destructuring allows you to extract properties from an object into individual variables:
const { firstName, lastName } = person;
console.log(firstName); // John