DEV Community

김영민
김영민

Posted on

Unlocking JavaScript's Built-in Object Power

Mastering JavaScript's Built-in Object Methods

JavaScript provides a plethora of built-in object methods that can be used to create, manipulate, and interact with objects. In this article, we'll delve into the most commonly used object methods, exploring their use cases, examples, and practical tips for implementing them in your daily coding routine.

1. Object.keys(obj)

Retrieving an Object's Keys

Object.keys(obj) is a method used to retrieve an array of a given object's own enumerable property names. This method is particularly useful when you need to iterate over an object's properties or check if a specific key exists.

Example:

const user = { name: "Alice", age: 25 };
console.log(Object.keys(user)); // ["name", "age"]
Enter fullscreen mode Exit fullscreen mode

2. Object.values(obj)

Retrieving an Object's Values

Object.values(obj) returns an array of a given object's own enumerable property values. This method is useful when you need to perform value-based operations, such as filtering or summing.

Example:

const user = { name: "Alice", age: 25 };
console.log(Object.values(user)); // ["Alice", 25]
Enter fullscreen mode Exit fullscreen mode

3. Object.entries(obj)

Retrieving an Object's Key-Value Pairs

Object.entries(obj) returns an array of a given object's own enumerable string-keyed property pairs. This method is useful when you need to iterate over an object's properties and access both the key and value simultaneously.

Example:

const user = { name: "Alice", age: 25 };
for (const [key, value] of Object.entries(user)) {
  console.log(`${key}: ${value}`);
}
// name: Alice
// age: 25
Enter fullscreen mode Exit fullscreen mode

4. Object.assign(target, ...sources)

Merging Objects

Object.assign(target, ...sources) is a method used to copy the values of all enumerable own properties from one or more source objects to a target object. This method is useful when you need to merge objects or create a new object with the properties of an existing object.

Example:

const user = { name: "Alice" };
const updates = { age: 25, city: "Seoul" };
const merged = Object.assign({}, user, updates);
console.log(merged); // { name: "Alice", age: 25, city: "Seoul" }
Enter fullscreen mode Exit fullscreen mode

5. Object.fromEntries(array)

Creating an Object from an Array

Object.fromEntries(array) is a method used to create a new object from an array of key-value pairs. This method is useful when you need to convert an array of data into an object.

Example:

const entries = [["name", "Alice"], ["age", 25]];
const obj = Object.fromEntries(entries);
console.log(obj); // { name: "Alice", age: 25 }
Enter fullscreen mode Exit fullscreen mode

6. Object.freeze(obj)

Freezing an Object

Object.freeze(obj) is a method used to freeze an object, making it immutable. This method is useful when you need to ensure that an object's properties cannot be modified.

Example:

const config = Object.freeze({ theme: "dark", version: 1 });
config.theme = "light"; // ignored
console.log(config.theme); // "dark"
Enter fullscreen mode Exit fullscreen mode

7. Object.hasOwn(obj, key)

Checking if an Object has a Property

Object.hasOwn(obj, key) is a method used to check if an object has a specific property. This method is useful when you need to ensure that an object has a certain property before attempting to access it.

Example:

const user = { name: "Alice" };
console.log(Object.hasOwn(user, "name")); // true
console.log(Object.hasOwn(user, "toString")); // false
Enter fullscreen mode Exit fullscreen mode

8. Object.getPrototypeOf(obj)

Retrieving an Object's Prototype

Object.getPrototypeOf(obj) is a method used to retrieve an object's prototype. This method is useful when you need to inspect an object's inheritance chain.

Example:

const obj = {};
console.log(Object.getPrototypeOf(obj) === Object.prototype); // true
Enter fullscreen mode Exit fullscreen mode

9. Object.defineProperty(obj, key, descriptor)

Defining a Property

Object.defineProperty(obj, key, descriptor) is a method used to define a property on an object. This method is useful when you need to create a property with specific attributes, such as making it read-only or hidden.

Example:

const user = {};
Object.defineProperty(user, "name", {
  value: "Alice",
  writable: false, // non-configurable
  enumerable: true, // enumerable
});
console.log(user.name); // "Alice"
user.name = "Bob"; // ignored
Enter fullscreen mode Exit fullscreen mode

10. Object.seal(obj)

Sealing an Object

Object.seal(obj) is a method used to seal an object, making it impossible to add or remove properties. This method is useful when you need to ensure that an object's structure remains intact.

Example:

const user = { name: "Alice" };
Object.seal(user);
user.age = 25; // ignored (cannot add new properties)
user.name = "Bob"; // allowed (can modify existing properties)
console.log(user); // { name: "Bob" }
Enter fullscreen mode Exit fullscreen mode

Practical Applications

These built-in object methods are essential in various real-world scenarios:

  • Object.keys/values/entries: frequently used for iterating over objects or converting them to arrays.
  • Object.assign: commonly used for merging objects or creating new objects with existing properties.
  • Object.freeze: used to ensure immutability in state management and other applications.
  • Object.hasOwn: useful for safely checking if an object has a specific property.
  • Object.fromEntries: handy for converting array data into objects.

By mastering these built-in object methods, you'll become more proficient in handling objects and writing more efficient, readable code. Remember to explore and practice each method to get the most out of JavaScript's built-in functionality.

Top comments (0)