Manipulating objects in array of objects in JavaScript

In JavaScript, manipulating objects within an array of objects is a common task. JavaScript provides several built-in array methods like map(), filter(), find(), and slice() to efficiently handle these operations.

What is Object Manipulation in Arrays?

Object manipulation in arrays involves three main operations:

• Updating - Modifying existing object properties
• Filtering - Selecting objects based on criteria
• Adding - Creating new objects or properties

JavaScript provides methods like map(), filter(), find(), slice(), sort(), reduce(), and others to perform these manipulations efficiently.

Using map() Function

The map() method creates a new array by transforming each element. It's perfect for adding new properties or modifying existing ones.

Example

// Define users array with two properties
const users = [
  { name: 'Neha', age: 32 },
  { name: 'Ankit', age: 24 },
  { name: 'Babita', age: 41 },
];

// Add new property to each object
const updatedUsers = users.map(user => ({ ...user, isActive: true }));

console.log("Updated array with new property:");
console.log(updatedUsers);

Updated array with new property:
[
  { name: 'Neha', age: 32, isActive: true },
  { name: 'Ankit', age: 24, isActive: true },
  { name: 'Babita', age: 41, isActive: true }
]

Using filter() Function

The filter() method creates a new array containing only elements that pass a test condition.

Example

// Define users array
const users = [
  { name: 'Neha', age: 32 },
  { name: 'Ankit', age: 24 },
  { name: 'Babita', age: 41 },
];

// Filter users younger than 30
const youngUsers = users.filter(user => user.age 

Users younger than 30:
[ { name: 'Ankit', age: 24 } ]


Using find() Function

The find() method returns the first element that matches a condition. It's useful for locating and updating specific objects.

Example

// Define users array
const users = [
  { name: 'Neha', age: 32 },
  { name: 'Ankit', age: 24 },
  { name: 'Babita', age: 41 },
];

// Find and update a specific user
const targetUser = users.find(user => user.name === 'Neha');

if (targetUser) {
  targetUser.age = 35;
}

console.log("After updating Neha's age:");
console.log(users);


After updating Neha's age:
[
  { name: 'Neha', age: 35 },
  { name: 'Ankit', age: 24 },
  { name: 'Babita', age: 41 }
]


Using slice() Function

The slice() method returns a portion of an array without modifying the original array.

Example

// Define users array
const users = ['Neha', 'Ankit', 'Babita', 'Anmol'];

console.log('Original array:', users);
console.log('From index 2:', users.slice(2));
console.log('From 0 to 2:', users.slice(0, 2));
console.log('From 1 to 2:', users.slice(1, 2));


Original array: [ 'Neha', 'Ankit', 'Babita', 'Anmol' ]
From index 2: [ 'Babita', 'Anmol' ]
From 0 to 2: [ 'Neha', 'Ankit' ]
From 1 to 2: [ 'Ankit' ]


Method Comparison

Performance Considerations

All these methods have O(n) time complexity, where n is the number of array elements. For large datasets, consider:

• Using findIndex() with direct array access for single updates
• Combining operations to reduce iterations
• Using for loops for performance-critical operations

Conclusion

JavaScript's array methods provide powerful tools for object manipulation. Use map() for transformations, filter() for selections, and find() for targeted updates. These methods create clean, readable code while maintaining immutability principles.