JavaScript is a versatile programming language widely used in web development for creating interactive and dynamic websites. One of its fundamental features is the ability to work with objects, which are collections of key-value pairs that allow developers to organize and manipulate data. In this article, we will explore JavaScript objects and delve into their methods, which enable powerful operations and functionality.
In JavaScript, an object is an unordered collection of properties, where each property consists of a key (also known as a property name) and a corresponding value. Objects are flexible data structures that can contain various data types, including strings, numbers, arrays, and even other objects. This versatility makes them a fundamental part of JavaScript programming.
Creating Objects:
There are several ways to create objects in JavaScript. The most common method is using object literal notation, which involves enclosing key-value pairs within curly braces {}. For example:
const person = {
name: "John Doe",
age: 30,
profession: "Web Developer"
};
In this example, we have created a person object with three properties: name, age, and profession.
Accessing Object Properties:
To access the properties of an object, we can use dot notation or square bracket notation. For instance:
console.log(person.name); // Output: John Doe
console.log(person["age"]); // Output: 30
Both notations provide the same result, but square bracket notation allows us to use variables or property names containing special characters.
JavaScript Object Methods:
Methods in JavaScript objects are functions that are stored as object properties. These functions enable objects to perform specific actions or computations. Let's explore a few built-in methods commonly used with JavaScript objects.
- Object.create():
The Object.create() method is used to create a new object with the specified prototype object and properties. It allows you to create objects based on a prototype. Here's an example:
const personPrototype = {
greetings: function() {
console.log(`Hello, ${this.name}!`);
}
};
const john = Object.create(personPrototype);
john.name = "John Doe";
john.age = 30;
john.greetings(); // Output: Hello, John Doe!
In this example, Object.create() creates a new object john with the personPrototype object set as its prototype. The john object inherits the greetings method from the prototype and adds additional properties name and age.
- Object.assign():
The Object.assign() method is used to copy enumerable and own properties from one or more source objects to a target object. It merges the properties into the target object. Here's an example:
const target = {};
const source = { name: "John", age: 30 };
Object.assign(target, source);
console.log(target); // Output: { name: "John", age: 30 }
In this example, Object.assign() copies the properties from the source object to the target object, resulting in the target object containing the properties name and age.
- Object.keys():
The Object.keys() method returns an array containing the property names (keys) of an object. It allows us to iterate over the properties of an object. Consider the following example:
const person = {
name: "John Doe",
age: 30,
profession: "Web Developer"
};
const keys = Object.keys(person);
console.log(keys); // Output: ["name", "age", "profession"]
- Object.values():
The Object.values() method returns an array containing the property values of an object. It complements the Object.keys() method by allowing us to access the values associated with each property. Take a look at this example:
const person = {
name: "John Doe",
age: 30,
profession: "Web Developer"
};
const values = Object.values(person);
console.log(values); // Output: ["John Doe", 30, "Web Developer"]
- Object.entries():
The Object.entries() method returns an array of arrays, where each inner array contains both the property name and its corresponding value. This method is useful when we need to iterate over both keys and values simultaneously. Consider the following example:
const person = {
name: "John Doe",
age: 30,
profession: "Web Developer"
};
const entries = Object.entries(person);
console.log(entries);
/*
Output:
[
["name", "John Doe"],
["age", 30],
["profession", "Web Developer"]
]
*/
- Object.defineProperty():
The Object.defineProperty() method is used to describe some behavioral attributes of a property within an object. It allows you to define new properties or modify existing properties with custom attributes. Here's an example:
const person = {};
Object.defineProperty(person, "name", {
value: "John Doe",
writable: false,
enumerable: true
});
console.log(person.name); // Output: John Doe
person.name = "Jane Smith";
console.log(person.name); // Output: John Doe
In this example, Object.defineProperty() defines a new property name within the person object. The property is set to "John Doe" and is marked as non-writable (writable: false). Therefore, any attempt to modify the name property will have no effect.
It is used to determine whether two values are the same value. It compares two values and returns a boolean indicating whether they are strictly equal or not. Here's an explanation and example:
console.log(Object.is(5, 5)); // Output: true
console.log(Object.is("hello", "hello")); // Output: true
console.log(Object.is(true, true)); // Output: true
console.log(Object.is(5, "5")); // Output: false
console.log(Object.is({}, {})); // Output: false
console.log(Object.is(+0, -0)); // Output: false
- Object.isExtensible()
The Object.isExtensible() method is used to determine if an object is extensible, meaning if new properties can be added to it. It checks whether it's possible to add new properties to the object or modify the existing properties. Here's an explanation and example:
const person = { name: "John Doe" };
console.log(Object.isExtensible(person)); // Output: true
Object.preventExtensions(person);
console.log(Object.isExtensible(person)); // Output: false
In this example, we first create an object person with an initial property name. We then use Object.isExtensible() to check if the object is extensible, which returns true by default.
Next, we use Object.preventExtensions() to make the person object non-extensible, preventing the addition of new properties. After that, we again use Object.isExtensible() to check its extensibility, which now returns false.
By using Object.isExtensible(), you can determine if an object can be extended or if it has reached its limit in terms of adding new properties. This method is useful for controlling the mutability and behavior of objects in your JavaScript code.
- Object.entries()
This method returns an array with arrays of the key, value pairs. For example:
const person = { name: 'John', age: 30 };
const entries = Object.entries(person);
console.log(entries); // Output: [ ['name', 'John'], ['age', 30] ]
Object.getOwnPropertyDescriptor()
This method returns a property descriptor for a specified property of an object. It provides information about the configuration of a property, such as its value, writability, enumerable status, and configurability. For example:
const person = { name: 'John', age: 30 };
const descriptor = Object.getOwnPropertyDescriptor(person, 'name');
console.log(descriptor); // Output: { value: 'John', writable: true, enumerable: true, configurable: true }
Object.getOwnPropertyDescriptors()
This method returns an object containing all property descriptors for the properties of a given object, including both own and inherited properties. It provides a complete snapshot of all property configurations in the object. For example:
const person = { name: 'John', age: 30 };
const descriptors = Object.getOwnPropertyDescriptors(person);
console.log(descriptors.name); // Output: { value: 'John', writable: true, enumerable: true, configurable: true }
Object.getOwnPropertyNames()
This method returns an array of all property names (enumerable or non-enumerable) of an object, including both own and inherited properties. It provides a way to access all property names, regardless of their enumerability.
const person = { name: 'John', age: 30 };
const propertyNames = Object.getOwnPropertyNames(person);
console.log(propertyNames); // Output: [ 'name', 'age' ]
Object.getPrototypeOf()
In JavaScript, every object has an internal property called [[Prototype]], which refers to its prototype object. The prototype object serves as a blueprint for the object, defining the shared properties and methods that the object can access.
The Object.getPrototypeOf() method is a built-in function in JavaScript that allows you to retrieve the prototype object of a given object. It provides a way to access and work with the prototype chain.
Here's the syntax for using Object.getPrototypeOf():
Object.getPrototypeOf(obj)
Here, obj is the object for which you want to retrieve the prototype. The method returns the prototype object of the specified object.
// Create an object
const person = {
name: 'John',
age: 30
};
// Get the prototype of the object
const prototype = Object.getPrototypeOf(person);
console.log(prototype); // Output: {}
console.log(prototype === Object.prototype); // Output: true
In this example, we have an object called person with properties name and age. By calling Object.getPrototypeOf(person), we get an empty object {} as the prototype of person. In JavaScript, Object.prototype is the default prototype object for most objects, and in this case, it matches the returned prototype.
You can also use the __proto__ property to achieve the same result, although it is not recommended for production code:
const prototype = person.__proto__;
console.log(prototype === Object.prototype); // Output: true
It's important to note that Object.getPrototypeOf() is different from the __proto__ property. The __proto__ property is a getter/setter property that provides direct access to an object's prototype. In contrast, Object.getPrototypeOf() is a method that retrieves the prototype without directly accessing the __proto__ property.
Object.getPrototypeOf() is particularly useful when you want to access or manipulate the prototype object of an object, such as checking for certain properties or methods defined in the prototype chain. It allows you to work with the inheritance mechanism and leverage the shared functionality provided by prototypes in JavaScript.
- Object.setPrototypeOf()
The Object.setPrototypeOf() method is a built-in function in JavaScript that allows you to set the prototype (i.e., the internal [[Prototype]] property) of an object to another object ornull. It enables you to change the prototype object of an existing object, effectively altering its inheritance hierarchy.
const person = {
name: 'John',
age: 30,
};
const employee = {
position: 'Developer',
};
Object.setPrototypeOf(employee, person);
console.log(employee.name); // Output: 'John'
console.log(employee.age); // Output: 30
console.log(employee.position); // Output: 'Developer'
In this example, we have two objects, person and employee. The person object has properties name and age, while the employee object has a position property.
By calling Object.setPrototypeOf(employee, person), we set the prototype of employee to be the person object. After setting the prototype, the employee object inherits properties from the person object.
As a result, when we access employee.name, it returns 'John', because name is a property inherited from the prototype object person. Similarly, employee. age returns 30 , and employee.position returns Developer.
It's important to note that modifying the prototype of an object can have implications on performance and maintainability. Changing an object's prototype at runtime can lead to slower property access and potentially unexpected behavior.
Additionally, it's generally recommended to avoid using Object.setPrototypeOf() and instead favor object composition and delegation patterns to achieve desired behavior. Modifying the prototype chain of an object is a powerful but potentially risky feature that should be used judiciously.
- Object.preventExtensions()
The Object.preventExtensions() method is a built-in function in JavaScript that prevents the addition of new properties to an object. Once an object is marked as non-extensible, you cannot add new properties to it, although you can still modify or delete existing properties.
const obj = { name: 'John', age: 30 };
console.log(Object.isExtensible(obj)); // Output: true
Object.preventExtensions(obj);
console.log(Object.isExtensible(obj)); // Output: false
obj.gender = 'male';
console.log(obj.gender); // Output: undefined
In this example, we start with an object called obj that has properties name and age. We first use the Object.isExtensible() method to check if the object is extensible, and it returns true.
Next, we apply Object.preventExtensions(obj) to make the object non-extensible. After applying the method, we call Object.isExtensible(obj) again, and this time it returns false, indicating that the object is no longer extensible.
When we try to add a new property gender to the object using obj.gender = 'male' it doesn't take effect because the object is non-extensible. Thus, when we log obj.gender, it returns undefined.
It's important to note that Object.preventExtensions() only affects the object itself and does not prevent changes to the properties of its prototype chain. The properties of prototype objects can still be added, modified, or deleted.
const obj = { name: 'John', age: 30 };
const sealedObj = Object.preventExtensions(obj);
console.log(Object.isExtensible(sealedObj)); // Output: false
console.log(Object.isExtensible(obj)); // Output: false
sealedObj.__proto__.gender = 'male';
console.log(obj.gender); // Output: 'male'
In this example, we apply Object.preventExtensions() to obj and store the resulting object in sealedObj . Both sealedObj and obj are non-extensible, as confirmed by Object.isExtensible().
Even though the non-extensible object sealedObj doesn't have a gender property, we can still modify the prototype object's property using the __proto__ property. As a result, accessing the gender property on obj returns the value male.
The Object.preventExtensions() method is useful when you want to freeze the structure of an object and prevent further additions of properties. It provides control over the extensibility of an object and can be used for enforcing immutability or stability in certain scenarios.
- Object.isSealed()
A sealed object is one whose properties cannot be added, deleted, or reconfigured. In other words, once an object is sealed, you cannot change its property descriptors or modify its existing properties. For example:
const obj1 = { name: 'John', age: 30 };
console.log(Object.isSealed(obj1)); // Output: false
Object.seal(obj1);
console.log(Object.isSealed(obj1)); // Output: true
Sealing an object does not make its properties immutable. You can still modify the values of the existing properties, but you cannot change their descriptors or add new properties.
const obj2 = { name: 'Jane', age: 25 };
Object.seal(obj2);
obj2.name = 'Alice'; // Modifying existing property is allowed
obj2.gender = 'female'; // Adding new property is not allowed
console.log(obj2); // Output: { name: 'Alice', age: 25 }
Object.seal()
When an object is sealed, it prevents the addition, deletion, or reconfiguration of properties. In other words, the structure of the object becomes fixed, and existing properties can still be modified, but no new properties can be added or existing ones changed in terms of their configurability.
const obj = { name: 'John', age: 30 };
console.log(obj); // Output: { name: 'John', age: 30 }
Object.seal(obj);
obj.name = 'Jane';
obj.gender = 'female';
console.log(obj); // Output: { name: 'Jane', age: 30 }
console.log(Object.isSealed(obj)); // Output: true
In this example, we have an object called obj with properties name and age. We first log the object to the console, and it displays { name: 'John', age: 30 }.
Next, we use the Object.seal()method to sealobj. After sealing the object, we modify the name property by assigning it a new value Jane. This modification is allowed because sealing an object does not make its properties immutable.
However, when we try to add a new property gender to the object, it doesn't take effect because the object is sealed. The resulting object, when logged to the console, displays { name: 'Jane', age: 30 }, where the name property has been successfully modified, but the gender property is not present.
- Object.freeze()
This method prevents the modification and deletion of existing properties in an object. It makes the object read-only, and any attempt to modify its properties will have no effect. Example:
const person = { name: 'John', age: 30 };
Object.freeze(person);
person.age = 40;
console.log(person.age);
// Output: 30