JavaScript destructuring function arguments

In JavaScript, you can use destructuring to extract values from objects or arrays. This concept can also be applied to function arguments, allowing you to destructure an object or an array directly within the function parameter declaration.

The syntax for destructuring function arguments in JavaScript is as follows:

Object Destructuring:

When using object destructuring for function arguments, you enclose the properties you want to extract from the object within curly braces {}. Each property name corresponds to a variable that will hold the extracted value.

function functionName({ prop1, prop2, ... }) {
  // Function body
}

Array Destructuring:

If you want to destructure an array as function arguments, you enclose the elements you want to extract from the array within square brackets []. Each element position corresponds to a variable that will store the extracted value.

function functionName([ elem1, elem2, ... ]) {
  // Function body
}

In both cases, you can specify default values for variables by using the assignment operator =. If a property or element is missing in the passed object or array, the corresponding variable will take the default value. For example:

function functionName({ prop1 = defaultValue1, prop2 = defaultValue2 }) {
  // Function body
}

function functionName([ elem1 = defaultValue1, elem2 = defaultValue2 ]) {
  // Function body
}

JavaScript destructuring function arguments example

Here’s a more comprehensive example that demonstrates the usage of destructuring for function arguments in JavaScript:

// Destructuring an object as a function parameter
function printPersonInfo({ name, age, city }) {
  console.log(`Name: ${name}`);
  console.log(`Age: ${age}`);
  console.log(`City: ${city}`);
}

const person = { name: 'John Doe', age: 30, city: 'New York' };
printPersonInfo(person);


// Destructuring an array as a function parameter
function printNames([firstName, lastName]) {
  console.log(`First Name: ${firstName}`);
  console.log(`Last Name: ${lastName}`);
}

const names = ['John', 'Doe'];
printNames(names);


// Using default values with destructuring
function printUser({ name = 'Unknown', age = 0, city = 'Unknown City' }) {
  console.log(`Name: ${name}`);
  console.log(`Age: ${age}`);
  console.log(`City: ${city}`);
}

const user = { age: 25 };
printUser(user);

Output:

Destructuring an Object:

function printUser({ name, age }) {
  console.log(`Name: ${name}, Age: ${age}`);
}

const user = { name: 'John Doe', age: 25 };
printUser(user); // Output: Name: John Doe, Age: 25

Destructuring an Array:

function printNames([firstName, lastName]) {
  console.log(`First Name: ${firstName}, Last Name: ${lastName}`);
}

const names = ['John', 'Doe'];
printNames(names); // Output: First Name: John, Last Name: Doe

You can also use default values

function printUser({ name = 'Unknown', age = 0 }) {
  console.log(`Name: ${name}, Age: ${age}`);
}

const user = { age: 25 };
printUser(user); // Output: Name: Unknown, Age: 25

Comment if you have any doubts or suggestions on this Js function topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version