Yes. You can use "defaults" in destructuring as well:

(function test({a = "foo", b = "bar"} = {}) {
  console.log(a + " " + b);
})();

This is not restricted to function parameters, but works in every destructuring expression.

Answer from Bergi on Stack Overflow
🌐
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › JavaScript › Reference › Functions › Default_parameters
Default parameters - JavaScript - MDN Web Docs
A common way of doing that is to set an empty object/array as the default value for the destructured parameter; for example: [x = 1, y = 2] = []. This makes it possible to pass nothing to the function and still have those values prefilled:
🌐
David Walsh
davidwalsh.name › destructuring-function-arguments
Destructuring and Function Arguments
April 3, 2018 - Setting a default with = { } is important; with no default the following example would error: TypeError: Cannot destructure property `key` of 'undefined' or 'null' Destructuring is an awesome language feature but can lead to confusion and even ...
Discussions

javascript - ES6 Object Destructuring Default Parameters - Stack Overflow
I'm trying to figure out if there's a way to use object destructuring of default parameters without worrying about the object being partially defined. Consider the following: (function test({a... More on stackoverflow.com
🌐 stackoverflow.com
Workaround for missing ES6 feature: default values for function parameters (combined with object destructuring)
This is not as elegant, but javascript existed for a long time without destructuring assignments and function parameters with defaults. More on github.com
🌐 github.com
3
1
April 16, 2021
ecmascript 6 - Javascript Object destructuring and default parameters combined - Stack Overflow
Could you explain please, in this ... 3} how javascript sets value of b to 5? Whether it sets b to undefined first and then assigns b=5 or does it work in another way? How does it work under the hood? 2021-08-04T13:27:19.733Z+00:00 ... Your code is using both Object Destructuring and default function ... More on stackoverflow.com
🌐 stackoverflow.com
javascript - ES6 destructuring object assignment function parameter default value - Stack Overflow
The destructuring with defaults only does its thing when you pass an object which doesn't have the respective properties. The = {} default for the whole parameter allows to not pass an (empty) object at all. More on stackoverflow.com
🌐 stackoverflow.com
🌐
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › JavaScript › Reference › Operators › Destructuring
Destructuring - JavaScript - MDN Web Docs - Mozilla
Assigned a default value in case the unpacked value is undefined. ... Objects passed into function parameters can also be unpacked into variables, which may then be accessed within the function body. As for object assignment, the destructuring syntax allows for the new variable to have the ...
🌐
SamanthaMing
samanthaming.com › tidbits › 11-setting-default-parameters
Setting Default Parameters | SamanthaMing.com
Now let's apply this knowledge in our function world where we are destructuring our argument. function beverage({ name }) { return name; } beverage(); // ❌ TypeError · That's why you will see a lot of functions setting a default parameter to avoid this crash. function beverage({ name } = {}) { return name; } beverage(); // ✅ undefined (no crash) You bet! Default parameters can also be applied to arrow functions. const beverage = (drink = '🍵') => drink; In JavaScript, arrow functions have implicit and explicit returns.
🌐
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › JavaScript › Reference › Operators › Destructuring_assignment
Destructuring - JavaScript | MDN
Assigned a default value in case the unpacked value is undefined. ... Objects passed into function parameters can also be unpacked into variables, which may then be accessed within the function body. As for object assignment, the destructuring syntax allows for the new variable to have the ...
Find elsewhere
🌐
Medium
medium.com › swlh › javascript-use-destructuring-assignment-over-function-parameters-7d22b9f9b851
JavaScript: Use Destructuring Assignment over Function Parameters | by Kris Guzman | The Startup | Medium
July 16, 2019 - Destructuring Assignment with objects is just a way to take any JavaScript object: And pull out the parameters we want into its own variable: If we aren’t sure a variable exists, we can easily provide a default value:
🌐
HTML Goodies
htmlgoodies.com › home › javascript
Destructuring Mixed Objects and Function Arguments in ES6 | HTML Goodies
July 21, 2022 - Object destructuring is a useful JavaScript (ECMAScript 6) feature to extract properties from objects and bind them to variables. As we saw in the ES6 Object Destructuring tutorial, object destructuring can extract multiple properties in one statement, access properties from nested objects, and can set a default value if the property does not exist. In today’s follow-up, we will be taking a look at mixed (Object and Array) destructuring, as well as how to destructure function and method arguments.
🌐
JavaScript.info
javascript.info › tutorial › the javascript language › data types
Destructuring assignment
February 26, 2026 - The full syntax is the same as ... = defaultValue ... }) Then, for an object of parameters, there will be a variable varName for the property incomingProperty, with defaultValue by default....
🌐
Simonsmith
simonsmith.io › destructuring-objects-as-function-parameters-in-es6
Destructuring objects as function parameters in ES6 | simonsmith.io
July 28, 2015 - This syntax looked a bit odd to me at first but when you think the object on the left side of the = operator might be undefined then it makes sense that we can also set a default value for that too. ... function myFunc() { var opts = arguments[0] === undefined ?
🌐
Wes Bos
wesbos.com › destructuring-default-values
Setting Default Values with JavaScript’s Destructuring - Wes Bos
November 15, 2016 - One thing to note here is that ... mySpeed || 760; console.log(speed); // 760! Why? Because ES6 destructuring default values only kick in if the value is undefined; null, false and 0 are all still values!...
🌐
Xah Lee
xahlee.info › js › js_func_arg_destructure.html
JS: Function Argument Destructure (Pattern Matching)
May 18, 2019 - // destructure of array with default values for each slot. // hh take 1 array arg. First slot is assigned to var x, and second is y. If the arg has length less than 2, they get default values function hh([x = 8, y = 9]) { console.log(x, y); } hh([3, 4]); // 3 4 hh([3]); // 3 9
Top answer
1 of 3
3

That syntax indeed uses Object Destructuring in order to extract default values from the parameter object. There are some examples in the Mozilla documentation that helps us understand the trick, check this out:

var {a = 10, b = 5} = {a: 3};
console.log(a); // 3
console.log(b); // 5

A possible disadvantage of your example is that the createUser method ignores all other values of the parameter object and always returns an object that contains only age and name. If you want to make this more flexible, we could use Object.assign() like this:

const createUser = (o) => Object.assign({ age: 1, name: 'Anonymous' }, o);

In this case, the user created will be an object that merges the parameter object with the default values. Note now that the default values are in the method body. With this method we can create users that contain other properties, example:

const superman = createUser({ name: 'Superman', type: 'superhero' });
console.log(superman);
// output: {age: 1, name: "Superman", type: "Superhero"}
2 of 3
2

Your code is using both Object Destructuring and default function props.

const createUser = ({
  age = 1,
  name = 'Anonymous',
}) => ({
  age,
  name,
});

Here function createUser is accepting single argument of type Object. Function is returing same object, if you have both object properties defined in your argument, then it will return your passed object. Otherwise it will replace it with default values, which are 1 and Anonymous respectively.

You can further read about it here:

https://wesbos.com/destructuring-renaming/

https://wesbos.com/destructuring-default-values/

🌐
DEV Community
dev.to › varundey › destructuring-javascript-objects-with-default-value-2765
Destructuring JavaScript objects with default value - DEV Community
December 30, 2019 - Please note that destructuring with default value only works when there is no property to unpack in the object i.e. the property is undefined. This means that JavaScript treats null, false, 0 or other falsy values as a valid property and will ...
🌐
GeeksforGeeks
geeksforgeeks.org › parameter-destructuring
Parameter Destructuring | GeeksforGeeks
June 12, 2022 - The properties to be accessed can be assigned a different name using an alias and can also be given default values. In case an object property or a certain array element is not present in the argument passed.
🌐
Reddit
reddit.com › r/javascript › can someone explain the destructured parameter with default value assignment?
r/javascript on Reddit: Can someone explain the Destructured parameter with default value assignment?
February 3, 2026 -

I'm trying to understand this pattern

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters#destructured_parameter_with_default_value_assignment

function preFilledArray([x = 1, y = 2] = []) {
  return x + y;
}  
preFilledArray(); // 3
preFilledArray([]); // 3
preFilledArray([2]); // 4
preFilledArray([2, 3]); // 5

I'm not sure if its possible to be understood logically based on development principles, or if its something you must learn by heart

I've been asking AI, looking in the docs and reviewing some example, but the more I read the less I understand this, I can't grasp a pinch of logic.

From what I read, theoretically this structure follows two sections:

  1. Destructuring with default: [x = 1, y = 2] = arr

  2. Parameter defaults function fn(param = defaultValue

Theoretically param equals arr. So [] is the defaultValue But the reality is that [x = 1, y = 2] is both the defaultValue and the param

So I'm trying to grasp why is not somthing like:

function preFilledArray([x = 1, y = 2] = arr)

Or simply something like:

function preFilledArray([x = 1, y = 2])

I have a hunch that I will probably need to end learning this by heart, but I have a hope someone will give me a different perspective I haven't been looking at.

=== Conclusion

Thanks everyone for the ideas. I think I've got to a conclusion to simplify this in my mind. I'm copy/pasting from a comment below:

The idea follows this kind of weird structure:

fn ([ x=a, y=b, ... , n=i ] = [])
  • If the function receives undefined, default it to empty array

  • If the first parameter of the array is undefined, then default it to the first default value

  • If the n parameter of the array is undefined, then default it to the n default value.

🌐
Go Make Things
gomakethings.com › destructuring-function-parameters-with-vanilla-js-for-better-developer-ergonomics
Destructuring function parameters with vanilla JS for better developer ergonomics | Go Make Things
February 22, 2021 - 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 ...
Top answer
1 of 3
2

Arguments vs. Parameters

For this question, it's important to distinguish between arguments and parameters. Arguments are what is passed to the function when it's invoked, without consideration for how the function destructures or sets defaults to those values. So when you call getConfig() with no arguments, and log arguments.length, it should be 0, regardless of how getConfig destructures or sets defaults.

Parameters on the other hand are the variables in the function definition, that it uses. They can be assigned defaults or they can be derived from a destructured argument.

It's a little unclear what you're looking for, whether it's an object that reflects the parameters that the function uses or whether it's an object that reflects the values passed to the function (including destructured undefined variables). I'll go over both cases.

Parameters

To reconstitute the parameters, a rather clunky way is to use the destructured variables into a new object:

import {defaultOptions} from "../defaults.js"

export function getConfig({
  width = defaultOptions.width,
  height = defaultOptions.height,
  fontsize = defaultOptions.fontsize
} = {}) {
  // just assign them to parameters
  var parameters = { width, height, fontsize };
  console.log(parameters); 
}

Alternatively, if defaultOptions represents all of and only the parameters passed to the function (i.e. it only has width, height, fontsize), you can assign them with spread syntax:

import {defaultOptions} from "../defaults.js"

export function getConfig(options = {}) {
   var calculatedParameters = { ...defaultOptions, ...options };
   var { width, height, fontsize } = calculatedParameters;
   console.log(calculatedParameters); 
}

Values passed to the function (including destructured undefined variables)

To reconstitute the values passed, you can destructure the argument and then assign it again to a variable. This variable is nearly identical to the argument itself. In the below example calculatedArguments is almost identical to options, except now it will have properties for width, height, and fontsize, even if they represent undefined values:

import {defaultOptions} from "../defaults.js"

export function getConfig(options = {}) {
   var { width, height, fontsize } = options;
   var calculatedArguments = { width, height, fontsize };
   console.log(calculatedArguments); 

   // can also assign width, height, fontsize with default values
   ({
      width = defaultOptions.width,
      height = defaultOptions.height,
      fontsize = defaultOptions.fontSize
    } = options);
}
2 of 3
1
let defaults = {
  width: 300,
  height: 500,
  symbsize: 25,
  margin: {
    top: 10,
    bottom: 10
  }
}

class Config {
    constructor({
      width = defaults.width, 
      height = defaults.height, 
      symbsize = defaults.symbsize, 
      margin = defaults.margin
    } = defaults) {
      this.width = width
      this.height = height
      this.symbsize = symbsize
      this.margin = margin
    }
  
  getConfig() {
    return {
      width: this.width,
      height: this.height,
      symbsize: this.symbsize,
      margin: this.margin
    }
  }
}

const config = new Config({height: 1})

console.log(config.getConfig());

using class should do the work, or i prefer using it