previous post
This tutorial is designed to provide you with a thorough understanding of object methods in JavaScript and how to use them effectively in your code.
We will start by introducing objects and object methods, and explore how to access object properties using dot notation and bracket notation.
We will cover then advanced topics like freezing and sealing objects, combining objects with Object.assign()
, and checking object properties with Object.hasOwnProperty()
.
We’ll also explore more advanced object methods like Proxies
and Symbols
and provide best practices and tips for using object methods in your code.
In JavaScript, an object is a collection of properties, where each property has a name and a value.
Properties can be raw values, such as strings
or numbers
, or they can be functions
, called object methods.
For example, here’s an object that represents a person:
let person = {
name: 'Aouidane',
age: 33,
sayHello: function() {
console.log('Hello!');
}
};
This object has three properties: name
, age
, and sayHello
.
The sayHello
property is a function that can be called using dot notation like this: person.sayHello()
.
In JavaScript, there are two ways to access object properties: dot notation and bracket notation.
Dot notation is used to access object properties by specifying the object name followed by a dot (.) and the property name
For example:
let person = {
name: 'Aouidane',
age: 33
};
console.log(person.name); // Output: Aouidane
Here, we’re using dot notation to access the name
property of the person
object.
We can use Bracket notation to access object properties by specifying the object name followed by square brackets [] and the property name as a string
For example:
let person = {
name: 'Aouidane',
age: 30
};
console.log(person['name']); // Output: Aouidane
In general, dot notation is preferred for accessing properties that have valid identifier names, while bracket notation is useful for accessing properties with dynamic or computed names.
For example:
let propertyName = 'Aouidane';
console.log(person[propertyName]); // Output: Aouidane
In JavaScript, objects have several methods that allow us to perform multiple operations on them.
These methods include Object.keys()
, Object.values()
, Object.entries()
, and for...in
loops.
Object.keys()
is a method that returns an array of the object’s property names.
For example:
let person = {
name: 'Aouidane',
age: 33
};
let keys = Object.keys(person);
console.log(keys); // Output: ['name', 'age']
Object.values()
is a method that returns an array of the object’s property values.
For example:
let person = {
name: 'Aouidane',
age: 33
};
let values = Object.values(person);
console.log(values); // Output: ['Aouidane', 33]
Object.entries()
is a method that returns an array of arrays, where each inner array contains a property name and its corresponding value.
For example:
let person = {
name: 'Aouidane',
age: 33
};
let entries = Object.entries(person);
console.log(entries); // Output: [['name', 'Aouidane'], ['age', 33]]
for...in
loops allow us to loop through all the properties of an object and perform some operation on each one.
For example:
let person = {
name: 'Aouidane',
age: 33
};
for (let property in person) {
console.log(`${property}: ${person[property]}`);
}
// Output:
// name: Aouidane
// age: 33
In JavaScript, we can modify objects using multiple methods. These methods allow us to add new properties, delete existing ones, and update the values of existing properties.
To add a new property to an object, we can simply assign a value to a new property name.
For example:
let person = {
name: 'Aouidane',
age: 33
};
person.city = 'Paris';
console.log(person);
// Output: { name: 'Aouidane', age: 33, city: 'Paris' }
To delete an existing property from an object, we can use the delete
operator followed by the property name.
For example:
let person = {
name: 'Aouidane',
age: 33,
city: 'Paris'
};
delete person.city;
console.log(person);
// Output: { name: 'Aouidane', age: 33 }
To update the value of an existing property, we can simply assign a new value to the property name.
For example:
let person = {
name: 'Aouidane',
age: 33
};
person.age = 34;
console.log(person);
// Output: { name: 'Aouidane', age: 34 }
In JavaScript, we can make objects immutable using the Object.freeze()
and Object.seal()
methods.
Object.freeze()
is a method that prevents any modifications to an object’s properties. Once an object is frozen, its properties cannot be added, deleted, or updated.
For example:
let person = {
name: 'Aouidane',
age: 33
};
Object.freeze(person);
person.age = 34;
console.log(person); // Output: { name: 'Aouidane', age: 33 }
Object.seal()
is a method that prevents any additions or deletions of an object’s properties. However, the values of existing properties can still be updated.
For example:
let person = {
name: 'Aouidane',
age: 33
};
Object.seal(person);
person.city = 'Aouidane';
delete person.age;
person.age = 34;
console.log(person);
// Output: { name: 'Aouidane', age: 34 }
In JavaScript, we can combine objects using the Object.assign()
method.
This method allows us to copy the values of all properties from one or more source objects to a target object.
For example:
let person = {
name: 'Aouidane',
age: 33
};
let job = {
title: 'Software Engineer',
company: 'Harmonie.'
};
let newPerson = Object.assign({}, person, job);
console.log(newPerson);
// Output: { name: 'Aouidane', age: 33,
// title: 'Software Engineer', company: 'Harmonie' }
Here, we are using Object.assign()
to combine the person
and job
objects into a new object called newPerson
.
In JavaScript, there are two advanced object methods that allow us to extend and customize object behavior: Proxy
and Symbol
.
Proxy
allows us to intercept and customize operations on objects, such as property access, assignment, deletion, and more.
Example:
let person = {
name: 'Aouidane',
age: 33
};
let personProxy = new Proxy(person, {
get(target, prop) {
console.log(`Getting property "${prop}"`);
return target[prop];
},
set(target, prop, value) {
console.log(`Setting property "${prop}" to value "${value}"`);
target[prop] = value;
return true;
}
});
console.log(personProxy.name);
// Output: Getting property "name"; Aouidane
personProxy.age = 34;
// Output: Setting property "age" to value "34"
console.log(person.age);
// Output: 34
Symbol
allows us to create unique value that can be used as property keys in objects.
Example:
const firstName = Symbol('first-name');
const lastName = Symbol('last-name');
let person = {
[firstName]: 'Aouidane',
[lastName]: 'Amine'
};
console.log(person[firstName]); // Output: Aouidane
console.log(person[lastName]); // Output: Amine
console.log(Object.keys(person)); // Output: []
As you see, Object.keys()
doesn’t include the symbol properties, since they are not enumerable.
Generally, Symbol
are used when the property name is not a valid identifier (when it contains spaces or special characters).