JavascriptHow-ToBeginner · 3 min read

How to Destructure Function Parameters in JavaScript Easily

In JavaScript, you can destructure function parameters by using {} for objects or [] for arrays directly in the parameter list. This lets you extract specific values from passed arguments without extra lines of code.

📐

Syntax

You can destructure objects or arrays directly in the function parameters to access their values easily.

Object destructuring: Use curly braces {} with property names.
Array destructuring: Use square brackets [] with positions.

javascript

function example({name, age}) {
  console.log(name, age);
}

function exampleArray([first, second]) {
  console.log(first, second);
}

💻

Example

This example shows how to destructure an object and an array passed as function parameters to get their values directly.

javascript

function greetUser({name, age}) {
  console.log(`Hello, ${name}! You are ${age} years old.`);
}

greetUser({name: 'Alice', age: 30});

function printColors([firstColor, secondColor]) {
  console.log(`First color: ${firstColor}, Second color: ${secondColor}`);
}

printColors(['red', 'blue']);

Output

Hello, Alice! You are 30 years old. First color: red, Second color: blue

⚠️

Common Pitfalls

Common mistakes include:

Not passing an object or array when destructuring expects one, causing errors.
Using wrong property names or positions that don't exist in the argument.
Forgetting to provide default values when parameters might be missing.

Always ensure the argument matches the destructuring pattern.

javascript

function show({name, age}) {
  console.log(name, age);
}

// Wrong: passing undefined or no argument causes error
// show(); // TypeError

// Correct with default empty object
function showSafe({name, age} = {}) {
  console.log(name, age);
}

showSafe(); // undefined undefined

Output

undefined undefined

📊

Quick Reference

Destructuring Type	Syntax in Parameters	Description
Object	function fn({prop1, prop2})	Extracts named properties from an object argument
Array	function fn([item1, item2])	Extracts items by position from an array argument
Default Values	function fn({prop = defaultVal} = {})	Sets default values and avoids errors if argument missing

✅

Key Takeaways

Use curly braces {} to destructure objects and square brackets [] for arrays in function parameters.

Always match the argument structure to the destructuring pattern to avoid errors.

Provide default values or default empty objects/arrays to handle missing arguments safely.

Destructuring in parameters makes code cleaner by removing the need for extra variable assignments.

Check property names and array positions carefully to get the expected values.