Destructuring in Function Parameters

Parameter Destructuring

Destructuring function parameters is idiomatic for options objects and React props — it documents the expected shape at the call site.

Example

function createUser({ name, email, role = "user", active = true } = {}) {
  return { name, email, role, active };
}
createUser({ name: "Alice", email: "alice@example.com" });
// React-style
const Button = ({ label, onClick, disabled = false, className = "" }) => (
  `<button class="${className}" disabled="${disabled}">${label}</button>`
);

JAVASCRIPT

Full Editor

Pro Tip

Default the whole parameter to {} so calling with no arguments does not throw.

Related Resources

JavaScript Reference

Complete tag & property list

JavaScript How-To Guides

Step-by-step practical guides

JavaScript Exercises

Practice what you've learned