Javascript used to be a frontend language used by developers mostly for DOM manipulation and doing some complex calculations while working with the UI. But with advancements in Javascript, its much broader adoption as a Backend language (NodeJs) in creating desktop applications (using Electron), or even developing cross-platform mobile applications (React Native), the language has come a long way. 

Hence, it becomes necessary for us to get some newer basics right while working with it. jQuery, Underscore, Lodash, and other similar libraries are used to fill in the gaps for a lot of utility features that were not initially present natively in the language. However, after the ES6 iteration of the language, JavaScript has introduced a lot of native utilities that can be used without downloading any external libraries. 

A subset of these native utilities is specifically designed for operations on JavaScript’s fundamental data structures — Objects and Arrays. In this blog, we’re going to dive into these essential utilities and explore how they simplify working with Objects and Arrays in JavaScript. Let’s get into it!

Working with Array methods

JavaScript provides several built-in methods for array manipulation. These methods help transform, access, and process arrays efficiently. Although looping through the array with for-loop as a workaround is most of the time enough to work with arrays, there are some complex operations where array methods help in a drastic reduction in the amount of code that needs to be put in.

Consider the below example array which will be our base for the demonstration of each array method:

let indiancars = [
  {
    make: 'Maruti Suzuki',
    model: 'Swift',
    year: 2023,
    fuel type: 'Petrol',
    transmission: 'Manual',
    engineCC: 1197,
    seatingCapacity: 5,
    mileage: 22,
    available: true,
  },
  {
    make: 'Hyundai',
    model: 'Creta',
    year: 2023,
    fuelType: 'Diesel',
    transmission: 'Automatic',
    engineCC: 1497,
    seatingCapacity: 5,
    mileage: 21,
    available: false,
  },
  {
    make: 'Tata',
    model: 'Nexon',
    year: 2024,
    fuelType: 'Electric',
    transmission: 'Automatic',
    engineCC: 1199,
    seatingCapacity: 5,
    mileage: 17,
    available: true,
  },

For the convenience of understanding, we will categorize the array methods as follows:

Single-element addition/removal operations

push()

This method is used to add one or more elements to the end of an array. It returns the array with the new element(s) added.

let len = indianCars.push({
  make: 'Toyota',
  model: 'Innova Crysta',
  year: 2023,
  fuelType: 'Diesel',
  transmission: 'Manual',
  engineCC: 2393,
  seatingCapacity: 7,
  mileage: 14,
  available: true
})
console.log(len)

Considering our initial array, A new element Toyota Innova is added at the end of the array.

The value of the len variable is the value returned by the function which is the total length of the array

pop()

This method removes the last element from an array and returns that element as the return value of the method.

let car = indianCars.pop()
console.log(car)

Considering our initial array, Tata Nexon is removed from the end of the array.

The car object gets returned which is the last element removed from the array

shift()

This method is used to remove the first element from an array. It returns the removed value as the return value.

let car = indianCars.shift()
console.log(car)

Considering our initial array, Maruti Suzuki element is removed from the beginning of array.

The car object gets returned which is the first element removed from the array

unshift()

This method adds one or more elements to the beginning of an array while returning the length of the array after the new array is added as the return value.

let len = indianCars.unshift({
  make: 'Toyota',
  model: 'Innova Crysta',
  year: 2023,
  fuelType: 'Diesel',
  transmission: 'Manual',
  engineCC: 2393,
  seatingCapacity: 7,
  mileage: 14,
  available: true
})
console.log(len)

Considering our initial array, A new element Toyota Innova is added at the beginning of the array.

Value of len variable is the value return by the function which is total length of the array

Multiple element addition/removal operations

splice()

This method is one of the most versatile methods used for changing the contents of an array by removing or replacing elements. It takes following parameters:

• start - The index of the element to begin with
• deleteCount - The number of elements to delete from the start index.
• items - New elements to add at the start index as comma separated elements.

let carArray = indianCars.splice(0, 2)
console.log(carArray)

Considering our initial array, Hyundai Creta & Tata Nexon are removed.

The elements which are removed are returned as return value of the function.

 

If we add a new element, it attaches a Toyota Innova  and removes  Hyundai Creta & Tata Nexon from the beginning of the array as the start index is 0.

let carArray = indianCars.splice(0, 2, {
  make: 'Toyota',
  model: 'Innova Crysta',
  year: 2023,
  fuelType: 'Diesel',
  transmission: 'Manual',
  engineCC: 2393,
  seatingCapacity: 7,
  mileage: 14,
  available: true
})
console.log(carArray)

Again, the elements which are removed are returned as return value of the function.

slice()

This method is used to return a copy (shallow) of a part of the original array into a new array. This is similar to splice but doesn’t modify the original array and is also not capable of adding a new element to the array. It takes in 2 parameters:

• start - This is the beginning index of the element from which the arrays get copied.
• count - Number of elements to copy from start.

let carArray = indianCars.slice(0, 2)
console.log(carArray)

Here we get a subset of original array with Maruti Suzuki & Hyundai Creta

The returned array is what the function returns.

Search operations

filter()

This method filters out the elements based on a condition and returns a new array with the filtered elements (provided as a function).

let car = indianCars.filter(car => car.transmission === "Automatic")
console.log(car)

Here we get all the cars having the Transmission key as Automatic.

The return value is the filtered Array

find()

This method is used to return the first element of the array that satisfies the provided function to find an element. This is similar to filter but just gives the first element instead of an array.

let car = indianCars.find(car => car.transmission === "Automatic")
console.log(car)

Here we get the first car having the Transmission key as Automatic.

The return value as we can see is the object which satisfies the condition inside the find method.

findIndex()

This method is the same as the find method but instead of returning the first found element, it returns the key for it.

let carIndex = indianCars.findIndex(car => car.transmission === "Automatic")
console.log(carIndex)

The index of Hyundai car gets returned.

some()

This method tests whether at least one element in the array passes the provided test and returns true or false

let isElectric = indianCars.some(car => car.fuelType === "Electric")
console.log('Electric:', isElectric)

let isCng = indianCars.some(car => car.fuelType === "CNG")
console.log('CNG:', isCng)

Considering the initial array, we have Tata Nixon having fuelType as Electric hence we get true for it. But we do not have any car having fuelType as CNG, hence we get a false value for it.

every()

This method is used to test whether all elements in the provided array pass the test condition in the provided method. Even if one element fails the test, the function returns false.

let isMake2023 = indianCars.every(car => car.year === 2023)
console.log('Are all cars\' make year 2023?:', isMake2023)

let isCap5 = indianCars.every(car => car.seatingCapacity === 5)
console.log('Are all cars\' seating capacity 5?:', isCap5)

As we can see not all cars are made in 2023 but all cars do have a seating capacity of 5.

Transformation operations

map()

This is one of the most versatile methods which is used to form a new array from the original array based on the provided modifier function. It returns the newly created array which is a transformed form of the original array.

let carMakes = indianCars.map(car => car.make)
console.log(carMakes)

Here the car object is transformed into a string of Car Make and returned in a different array.

reduce()

This is one of the most underrated methods to transform an array into another entity. It applies a function against an accumulator and each element to reduce it to a single value.

let totalSeatingCapacity = indianCars.reduce((accumulator, current) => {
 accumulator += current.seatingCapacity
 return accumulator
}, 0);

Considering the initial array, we get the total number of seats in each of the cars.

sort()

This method sorts the array as per given comparison criteria and returns the array. The default behavior of this method is to sort the array in alphabetical order or ascending order based on the content of the array.

let sortedArray = indianCars.sort((a, b) => a.engineCC - b.engineCC);
console.log(sortedArray);

Considering the initial array, we get the cars in ascending order of their Engine CC.

The original array is modified and a reference to that array is returned when we use the sort method.

reverse()

This is a simple method that is used to reverse the sequence of the elements in the array.

let reversedArray = indianCars.reverse()
console.log(reversedArray);

Considering the initial array, the cars are rendered in reversed order.

This method modifies the original array. The value that is returned is a reference to the modified original array.

Looping through operations

forEach()

This method is used to execute a function once for each of the elements present in the array. This is one of the rare array methods which returns nothing!

indianCars.forEach(car => {
  car.available = false
})

Considering the initial array, the availability of all the cars is modified and set to false.

As stated, this function doesn't return anything.

Working with Objects Methods

Object methods are generally used with the “Object” keyword as objects generally have their own methods either defined by their constructors functions or classes. These methods are more of utility methods.

Consider the below example object which will be our base for the demonstration for each Object method:

const indianCar = {
  make: 'Toyota',
  model: 'Innova Crysta',
  year: 2023,
  fuelType: 'Diesel',
  transmission: 'Manual',
  engineCC: 2393,
  seatingCapacity: 7,
  mileage: 14,
  available: true
}

keys()

This method is used to return an array of the provided object's property names (which in this case are the keys).

let objKeys = Object.keys(indianCar)
console.log(objKeys)

As we can see below, this method returns all the keys as an array in the order of their entry in the object.

values()

This method is used to return an array of all the values corresponding to each key in the object.

let objValues = Object.values(indianCar)
console.log(objValues)

All the values of the object are returned. One of the use cases for this method is to render the values in a tabular fashion.

entries()

This method is used to return an array of the object's own key-value pairs as a two dimensional array.

let objKeysValues = Object.entries(indianCar)
console.log(objKeysValues)

The returned array is itself composed of key and value inside an array. 

fromEntries()

This method is used to transform a list of key-value pairs into a new object. The values that can be passed to this method can be an array similar to what we get from the entries method or it can be a Map object.

const valueArray = [
  [
      "make",
      "Toyota"
  ],
  [
      "model",
      "Innova Crysta"
  ],
  [
      "year",
      2023
  ],
  [
      "fuelType",
      "Diesel"
  ],
  [
      "transmission",
      "Manual"
  ],
]

const newObj = Object.fromEntries(valueArray);
console.log(newObj);

As seen above, we created a subset of key-value pairs as an array and used it to get the new object.

Final thoughts

JavaScript has transformed from a simple front-end tool into a multi-purpose, full-stack powerhouse — and it’s only evolving further. As new updates continue to expand JavaScript’s capabilities, staying updated with native utilities and best practices will keep your code efficient, flexible, and future-ready. Looking to build cutting-edge, scalable applications? Our Drupal development company combines the best of JavaScript advancements with powerful Drupal solutions to deliver websites that perform. Let’s make it happen.