JS Object's 10 Utility Methods

30 Mar 2023  Amiya pattanaik  5 mins read.

An object in JavaScript is a collection of properties. This article will cover the most important utility functions that you may need dealing with objects in JavaScript.

JavaScript Objects

An object in JavaScript is a collection of properties, where each property is a key-value pair. The keys are strings that represent the names of the properties, and the values can be of any data type, including other objects.

Lets take an example of an object in JavaScript:

const employee = {
  name: 'John Smith',
  age: 45,
  address: {
    street: '2020 Caravan Street',
    city: 'San Jose',
    state: 'California',
    zip: '12345'
  }
};

Here the employee object has three properties: name, age, and address. The address property is itself an object, with four properties of its own. We can access the properties of an object using either dot notation or bracket notation.

console.log(employee.name); // Output: 'John Smith'
console.log(employee['age']); // Output: 45
console.log(employee.address.city); // Output: 'San Jose'

1. Object.keys()

The Object.keys() static method returns an array of a given object’s own enumerable string-keyed property names.

"use strict";
const employee = {
  name: 'John Smith',
  age: 45,
};
console.log(Object.keys(employee)); // [ 'name', 'age' ]

2. Object.values()

The Object.values() static method returns an array of a given object’s own enumerable string-keyed property values.

const employee = {
  name: 'John Smith',
  age: 45,
};
console.log(Object.values(employee)); // [ 'John Smith', 45 ]

3. Object.entries()

The Object.entries() static method returns an array of a given object’s own enumerable string-keyed property key-value pairs.

const employee = {
  name: 'John Smith',
  age: 45,
};
console.log(Object.entries(employee));  // [ [ 'name', 'John Smith' ], [ 'age', 45 ] ]

4. Object.freeze()

Object.freeze() freezes an object. A frozen object can no longer be changed: new properties cannot be added, existing properties cannot be removed, their enumerability, configurability, writability, or value cannot be changed, and the object’s prototype cannot be re-assigned. freeze() returns the same object that was passed in. This is the simplest way to achieve immutability in JavaScript by freezing the object at creation.

"use strict";
const employee = Object.freeze({
  name: 'John Smith',
  age: 45,
});

// Throws an error in strict mode.
employee.dept = 'IT'  // TypeError: Cannot add property dept, object is not extensible
delete employee.name; // TypeError: Cannot delete property 'name' of #<Object>

5. Object.seal()

The Object.seal() static method seals an object. The new changes have no effect on the frozen object. However, the seal() method allows modifying existing properties. This means that while you cannot add new properties or remove existing ones, you can make changes.

"use strict";

const employee = {
  name: 'John Smith',
  age: 45
};

Object.seal(employee);
employee.age = 50;
console.log(employee.age); //
console.log(Object.isSealed(employee)); //  true
employee.dept = "IT"; // TypeError: Cannot add property dept, object is not extensible

6. Converting Objects into Maps()

We can use the Object.entries together with the Map constructor to transform an object into a map.

const employee = {
  name: 'John Smith',
  age: 45,
};

const map = new Map(Object.entries(employee));
console.log(map); // Map(2) { 'name' => 'John Smith', 'age' => 45 }

7. Object.fromEntries()

The Object.fromEntries() static method transforms a list of array of [key, value] into an object.

const employee = [
  ['name', 'John Smith'],
  ['age', 45],
];

const employeeObj = Object.fromEntries(employee);
console.log(employeeObj); // { name: 'John Smith', age: 45 }

8. Object.create()

The Object.create() static method creates a new object, using an existing object as the prototype of the newly created object.

const employee = {
  dept: 'global',
  printIntroduction: function() {
    console.log(`My name is ${this.name}, Now I am part of ${this.dept} department`);
  }
};
const me = Object.create(employee);
me.name = 'John'; // "name" is a property set on "me", but not on "employee"
me.dept = 'IT'; // Inherited properties can be overwritten

me.printIntroduction(); // My name is John, Now I am part of IT department

9. Object.hasOwn()

The Object.hasOwn() static method returns true if the specified object has the indicated property (key) as its own property. If the property is inherited, or does not exist, the method returns false.

const employee = {
  name: 'John Smith',
  age: 45,
  dept: 'IT'
};

console.log(Object.hasOwn(employee, 'name')); // true
console.log(Object.hasOwn(employee, 'address')); // false
console.log(Object.hasOwn(employee, 'gender')); // false

10. Object.assign()

The Object.assign() static method copies all enumerable own properties from one or more source objects to a target object. It returns the modified target object.

Object.assign(target, …sources)

target - The target object — what to apply the sources’ properties to, which is returned after it is modified.

sources - The source object(s) — objects containing the properties you want to apply.

"use strict";

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);

console.log(returnedTarget); // { a: 1, b: 4, c: 5 }

Conclusion

These were some of the most important utility functions for working with objects in JavaScript. I hope it will help you to deal with object. Happy reading.

We encourage our readers to treat each other respectfully and constructively. Thank you for taking the time to read this blog post to the end. We look forward to your contributions. Let’s make something great together! What do you think? Please vote and post your comments.

Amiya Pattanaik
Amiya Pattanaik

Amiya is a Product Engineering Director focus on Product Development, Quality Engineering & User Experience. He writes his experiences here.