4

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?

Improve this question
3
  • 2
    Those are just default values for destructured properties. Works the same way as (x = 1) => {}, just nested within another object: ({a = 1}) => {}. Commented Aug 5, 2018 at 19:54
  • 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 Commented Aug 5, 2018 at 19:56
  • maybe you have a look here: [object property assignment pattern [YDKJS: ES6 & Beyond]](github.com/getify/You-Dont-Know-JS/blob/master/…) Commented Aug 5, 2018 at 19:59

3 Answers 3

Reset to default
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"}
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Could you explain please, in this example var {a = 10, b = 5} = {a: 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?
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/

Improve this answer

Comments

1

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.