Destructuring Function Parameters in JavaScript

I recently published three posts on array destructuring, object destructuring, and destructuring from nested objects. Destructuring can be used inside the parentheses of a function definition (where you place the parameters) in order to pick out values from the arguments passed into a function. This is very useful when you only want to use certain properties from an object within the function. It does not make a difference what type of function you use but we will have a look at an example that uses an arrow function.

Destructuring an object

To destructure an object inside a function's parameters we place a set of curly braces inside the parentheses of the function. Inside the curly braces, we place the properties of the object which we wish to pick out. Below is an example using an arrow function.

const drinks = {
  cola: 2,
  lemonade: 1,
  milk: 3,
  tea: 2,
  coffee: 2,
  wine: 8,
};
const hotDrinksPrices = ({ tea, coffee }) => {
  return tea + coffee;
};
hotDrinksPrices(drinks); //Returns ---> 4

In the above example, we have an object called drinks which contains some drinks and prices. Next, we create an arrow function which is called hotDrinksPrices. Inside the function, we want to return the total sum of the values of the tea and coffee properties from the drinks object. To pick out the tea and coffee properties we use the curly braces within the function's parameters and pick out the tea and coffee properties. When the function is run we pass in the entire drinks object as the argument.

Destructuring an array

Whilst destructuring inside a function's parameters is most commonly used with objects we are also able to use the same approach when we pass in an array to a function. The only difference is that inside the function's parentheses we enclose the items we want to pick out inside an array. Order matters here just like when we perform array destructuring outside a function's parameters. If we want to skip an element then we can use a comma. Let’s look at an example.

const names = ["Frank", "Luke", "Ben", "Tony", "Pete"];
const printName = ([, secondName, thirdName]) => {
  return `${secondName} & ${thirdName}`;
};
printName(names); //Returns ---> 'Luke & Ben'

The above example starts by creating an array called names which contains strings of names. We create a function called printName which returns the second and third names from the names array using a template literal. Inside the function's parentheses, we start by using a comma as we want to skip to the second array element, next we declare variables for the second and third elements to be stored in, secondName and thirdName. When the printName function is called we pass in the entire names array. I hope you enjoyed this article, please feel free to post any comments, questions, or feedback, and follow me for more content!