CODEWITHSUNDEEP
javascriptecmascript-6
Willem van der Veen
Willem van der Veen

Reputation: 36680

Javascript Object destructuring and default parameters combined

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

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


const defaultP = createUser({
  age: 5
});
console.log(defaultP);

I think it uses Object destructuring and default parameters in order to set defaults of the object which is send as an argument.

The syntax threw me a bit off because normally I see object destructuring only in the following manner:

let obj = {
   prop1: 1
}

const {prop1} = obj;

console.log(prop1);

Question:

How does this syntax work exactly?

Upvotes: 4

Views: 2230

Answers (3)

Sandip Nirmal
Sandip Nirmal

Reputation: 2459

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/

Upvotes: 2

Yuriy Yakym
Yuriy Yakym

Reputation: 3931

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 params.name === 'undefined' ? 'Anonymous' : params.name,
  };
}

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.

Upvotes: 1

HugoTeixeira
HugoTeixeira

Reputation: 4884

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"}

Upvotes: 3

Related Questions