In this article, we are going to learn and master all the JavaScript Object methods with lots of code examples.
JavaScript objects are an essential data type in the language, used to store and organize data in a structured way. The language provides several built-in methods that you can use to manipulate objects in different ways.
In this article, we will explore some of the most commonly used JavaScript object methods with code examples to help you understand how they work and how to use them in your own projects.
From methods for adding and removing properties to methods for freezing and cloning objects, this guide will provide you with a comprehensive overview of what you can achieve with JavaScript object methods.
1. Object.keys()
The Object.keys() method returns an array of a given object’s own enumerable property names. It takes the object to get the property names from and returns an array of property names.
const obj = { name: "John", age: 30, city: "New York" };
const keys = Object.keys(obj);
console.log(keys); // ["name", "age", "city"]
2. Object.values()
The Object.values() method returns an array of a given object’s own enumerable property values. It takes the object to get the property values from and returns an array of property values.
const obj = { name: "John", age: 30, city: "New York" };
const values = Object.values(obj);
console.log(values); // ["John", 30, "New York"]
3. Object.entries()
The Object.entries() method returns an array of a given object’s own enumerable property [key, value] pairs. It takes the object to get the [key, value] pairs from and returns an array of [key, value] pairs.
const obj = { name: "John", age: 30, city: "New York" };
const entries = Object.entries(obj);
console.log(entries); // [["name", "John"], ["age", 30], ["city", "New York"]]
4. Object.assign()
The Object.assign() method copies the values of all enumerable own properties from one or more source objects to a target object. It takes the target object as the first parameter, followed by one or more source objects, and returns the target object.
const target = { name: "John" };
const source = { age: 30, city: "New York" };
const result = Object.assign(target, source);
console.log(result); // { name: "John", age: 30, city: "New York" }
5. Object.freeze()
The Object.freeze() method freezes an object, preventing new properties from being added to it and existing properties from being modified or deleted. It takes the object to freeze and returns the frozen object.
const obj = { name: "John", age: 30, city: "New York" };
const frozenObj = Object.freeze(obj);
frozenObj.age = 40; // Attempted modification
console.log(frozenObj); // { name: "John", age: 30, city: "New York" }
6. Object.is()
The Object.is() method compares two values for equality, similar to the === operator. However, it has some differences when it comes to comparing certain values like NaN, -0, and +0. It takes two values to compare and returns true if they are equal, false otherwise.
console.log(Object.is(1, 1)); // true
console.log(Object.is("hello", "hello")); // true
console.log(Object.is(null, null)); // true
console.log(Object.is(NaN, NaN)); // false
console.log(Object.is(-0, +0)); // false
7. Object.seal()
The Object.seal() method seals an object, preventing new properties from being added to it and existing properties from being deleted. However, existing properties can still be modified. It takes the object to seal and returns the sealed object.
const obj = { name: "John", age: 30, city: "New York" };
const sealedObj = Object.seal(obj);
sealedObj.age = 40; // Allowed modification
sealedObj.gender = "male"; // Attempted addition
delete sealedObj.city; // Attempted deletion
console.log(sealedObj); // { name: "John", age: 40, city: "New York" }
8. Object.getOwnPropertyNames()
The Object.getOwnPropertyNames() method returns an array of all property names (including non-enumerable properties) of a given object. It takes the object to get the property names from and returns an array of property names.
const obj = Object.create({}, {
name: { value: "John", enumerable: true },
age: { value: 30, enumerable: false }
});
const names = Object.getOwnPropertyNames(obj);
console.log(names); // ["name", "age"]
9. Object.hasOwnProperty()
The Object.hasOwnProperty() method returns a boolean indicating whether the object has the specified property as its own property (not inherited from its prototype chain). It takes the property name to check and returns true if the object has the property, false otherwise.
const obj = { name: "John", age: 30 };
console.log(obj.hasOwnProperty("name")); // true
console.log(obj.hasOwnProperty("gender")); // false
10. Object.create()
The Object.create() method creates a new object with the specified prototype object and properties. It takes the prototype object as the first parameter and an optional object containing property descriptors as the second parameter. It returns the newly created object.
const person = {
sayHello() {
console.log(`Hello, my name is ${this.name}`);
}
};
const john = Object.create(person, {
name: { value: "John", writable: true },
age: { value: 30, writable: true }
});
john.sayHello(); // Hello, my name is John
11. Object.isExtensible()
The Object.isExtensible() method determines if an object is extensible (i.e., new properties can be added to it). It takes the object to check and returns true if the object is extensible, false otherwise.
const obj = { name: "John", age: 30 };
console.log(Object.isExtensible(obj)); // true
Object.preventExtensions(obj);
console.log(Object.isExtensible(obj)); // false
12. Object.values()
The Object.values() method returns an array of a given object’s own enumerable property values. It takes the object to get the property values from and returns an array of property values.
const obj = { name: "John", age: 30, city: "New York" };
const values = Object.values(obj);
console.log(values); // ["John", 30, "New York"]
13. Object.freeze()
The Object.freeze() method freezes an object, preventing new properties from being added to it, existing properties from being deleted, and existing properties from being modified. It takes the object to freeze and returns the frozen object.
const obj = { name: "John", age: 30 };
const frozenObj = Object.freeze(obj);
frozenObj.age = 40; // Attempted modification
frozenObj.gender = "male"; // Attempted addition
delete frozenObj.name; // Attempted deletion
console.log(frozenObj); // { name: "John", age: 30 }
14. Object.getPrototypeOf()
The Object.getPrototypeOf() method returns the prototype of the specified object. It takes the object to get the prototype from and returns the prototype object.
const person = {
sayHello() {
console.log(`Hello, my name is ${this.name}`);
}
};
const john = Object.create(person, {
name: { value: "John", writable: true },
age: { value: 30, writable: true }
});
const proto = Object.getPrototypeOf(john);
console.log(proto); // { sayHello: [Function: sayHello] }
15. Object.is()
The Object.is() method compares two values for equality. It returns true if the values are equivalent, false otherwise. The values are equivalent if they are of the same type and have the same value, except for NaN and -0/+0.
console.log(Object.is(5, 5)); // true
console.log(Object.is(5, "5")); // false
console.log(Object.is(NaN, NaN)); // true
console.log(Object.is(-0, +0)); // false
16. Object.getOwnPropertyDescriptors()
The Object.getOwnPropertyDescriptors() method returns an object containing all own property descriptors (including non-enumerable descriptors) of a given object. It takes the object to get the descriptors from and returns an object containing property descriptors.
const obj = Object.create({}, {
name: { value: "John", enumerable: true },
age: { value: 30, enumerable: false }
});
const descriptors = Object.getOwnPropertyDescriptors(obj);
console.log(descriptors);
/* {
name: { value: "John", writable: false, enumerable: true, configurable: false },
age: { value: 30, writable: false, enumerable: false, configurable: false }
}
*/
17. Object.fromEntries()
The Object.fromEntries() method transforms a list of key-value pairs (as an array) into an object. It takes an iterable (e.g., an array) of key-value pairs and returns an object.
const entries = [
["name", "John"],
["age", 30],
["city", "New York"]
];
const obj = Object.fromEntries(entries);
console.log(obj); // { name: "John", age: 30, city: "New York" }