DX
last updated: October 13, 2021

Better Developer Experience with function arguments as an object

Write more readable code and help your colleagues and yourself

Guess the meaning

What does this mean?

createCar('VW', 'blue', 4, 5)

You can probably guess that the brand is VW and the color is blue. It has 4 seats and 5 doors. But this is just a guess. Maybe the 4 is for number of wheels. To know for sure we have to go back to where we declared the function.

Passing an object instead

This causes a lot of headaches. What if we could just understand what the function does with the arguments we have to pass.

createCar({
  brand: 'VW',
  color: 'blue',
  numberOfSeats: 4,
  numberOfDoors: 5,
})

Now there's no confusion about the arguments we're passing to the function. So whenever you declare a function, use an object as parameter. And as an extra benefit the order in which you declare the car features doesn't matter anymore.

Declaring the function

// Not so smart way
const createCar = (brand, color, numberOfSeats, numberOfDoors) => {
  // createCar logic
}

// Super smart way
const createCar = ({ brand, color, numberOfSeats, numberOfDoors }) => {
  // createCar logic
}

Conclusion

Passing an object as an argument is easier to read when you use the function in other places. The function also gets the added benefit of more flexibility when editing as the order of the arguments doesn't matter anymore.