Javascript Object destructuring and default parameters combined

javascript destructuring function arguments
object destructuring javascript
js destructuring rename
javascript destructuring default value
typescript destructuring default value
javascript object default value
set default object destructuring
defaults destructuring

Today I came across the following syntax which I didn't recognize:

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

const defaultP = createUser({
  age: 5

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' });
// output: {age: 1, name: "Superman", type: "Superhero"}

Destructuring and parameter handling in ECMAScript 6, Chapter “Destructuring” of “JavaScript for impatient programmers” · Section “​Parameter handling” of You can also use default values in object patterns: You can also combine property value shorthands with default values: Array and Object destructuring can be combined. Say you want the third element in the array props below, and then you want the name property in the object, you can do the following: const props = [ { id: 1, name: 'Fizz'}, { id: 2, name: 'Buzz'}, { id: 3, name: 'FizzBuzz'} ]; const [,, { name }] = props; console.log(name); // "FizzBuzz"

If you use babel and transpile your code to ES5, it will look like this:

function createUser(params) {
  return {
    age: typeof params.age === 'undefined' ? 1 : params.age,
    name: typeof === 'undefined' ? 'Anonymous' :,

Just a note: default values for function arguments works the same way:

const multiply = (a, optionalB) => {
  const b = typeof optionalB !== 'undefined' ? optionalB : 2;
  return a * b;

Is same as:

const multiply = (a, b = 2) => {
  return a * b;

It increases a readability, mostly in cases when argument is used several times.

Destructuring assignment, It is also possible to set default values when using destructuring assignment. array or of an object and assign it to a variable in a more convenient way. You can combine default values with renaming in the destructuring  Destructuring assignment is a special syntax that allows us to “unpack” arrays or objects into a bunch of variables, as sometimes that’s more convenient. Destructuring also works great with complex functions that have a lot of parameters, default values, and so on.

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

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

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:

JavaScript · Destructuring Assignment with Default Values ·, Setting Default Values with JavaScript's Destructuring. November 15, 2016 When you destructure an object, what happens if that value isn't there? const settings Combining with Destructuring Renaming. In my last post  Object destructuring using default parameter in javascript Object destructuring is another great feature of ES6, but while combined with es6 default parameters, it gives us deeper control over the code.

Setting Default Values with JavaScript's Destructuring, Destructuring objects as function parameters in ES6 The point of using an object in this way is usually to allow default values so that the user only has to pass in the And of course this can be combined with default values:. Replacing elements in an HTML file with JSON objects javascript , json , replace obj.roles[0] is a object {"name":"with whom"}. you cant replace string with object. you need to refer to property "name" in the object obj.roles[0].name Another problem is that var finalXML get a new value every line. you need to add a new value to the variable

Destructuring objects as function parameters in ES6, The destructuring assignment also works with objects. Just like with arrays or function parameters, default values can be any expressions or even We also can combine both the colon and equality:. Setting Default Values with JavaScript’s Destructuring. There’s one last thing we need to know about destructuring objects, and that is the ability to set defaults. This one’s a little bit confusing, so bear with me here and we’re going to circle back for another example later on in a couple of videos over at

Destructuring assignment, Clean Code with ES6 Default Parameters & Property Shorthands. By Moritz Kröger. JavaScript. April 18, 2018. Share: Ever felt a little embarassed sharing  ES6 Object Destructuring Default Parameters. 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, b} = {a: "foo", b: "bar"}) { console.log(a + " " + b); })();

  • Those are just default values for destructured properties. Works the same way as (x = 1) => {}, just nested within another object: ({a = 1}) => {}.
  • Okay after looking at it a bit more and asking this question I think I got it now but it looked pretty strange in the beginning
  • maybe you have a look here: [object property assignment pattern [YDKJS: ES6 & Beyond]](…)