Skip to main content Accessibility Feedback

Destructuring function parameters with vanilla JS for better developer ergonomics

Last month, we learned about array and object destructuring in vanilla JS. Today, I want to show you how you can use destructuring with function parameters for a better developer experience.

Let’s dig in!

Creating a simple function

Let’s imagine you have a simple function, greet(), that you use to create greeting messages.

It accepts a greeting, name, and time of day as parameters, and returns a string with a greeting message.

function greet (greeting, name, time) {
	return `${greeting} ${name}! How are you ${time}?`;
}

// returns "Hello George! How are you this evening?"
let message = greet('Hello', 'George', 'this evening');

This works great, but it also requires you to know the correct order for your arguments to work correctly.

For example, if you reversed the greeting and name by accident, it would return the wrong message.

// returns "George Hello! How are you this evening?"
let message = greet('George', 'Hello', 'this evening');

Object destructuring provides us with a way to address this.

Using object destructuring for function parameters

With this approach, we still pass in the same parameter names. But, we use object destructuring to accept an object of values and destructure them into parameters while assigning them.

function greet ({greeting, name, time}) {
	return `${greeting} ${name}! How are you ${time}?`;
}

Now, when we go to use our function, we can pass in an object of values, and the order in which we pass them in doesn’t matter.

// returns "Hello George! How are you this evening?"
let message = greet({
	name: 'George',
	greeting: 'Hello',
	time: 'this evening'
});

If you prefer, you can also use the ES6 object property shorthand approach (which I haven’t written about yet but will soon).

// Arguments
let name = 'George';
let greeting = 'Hello';
let time = 'this evening';

// returns "Hello George! How are you this evening?"
let message = greet({name, greeting, time});

Default parameters with object destructuring

A few weeks ago, we learned about default function parameters. You can use them with this approach.

For example, if we wanted to make time option, we could do something like this.

function greet ({greeting, name, time = 'today'}) {
	return `${greeting} ${name}! How are you ${time}?`;
}

// returns "Hello George! How are you today?"
let message = greet({
	name: 'George',
	greeting: 'Hello'
});