ecmascript 6 - Javascript Object destructuring and default parameters combined - Stack Overflow

admin管理员组

文章数量:1026989

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);

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?

• javascript
• ecmascript-6

Share Improve this question Follow asked Aug 5, 2018 at 19:50 Willem van der VeenWillem van der Veen 36.8k1818 gold badges206206 silver badges176176 bronze badges 3

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

Add a ment  | 

3 Answers 3

Sorted by: 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"}

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./destructuring-renaming/

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

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.

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);

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?

• javascript
• ecmascript-6

Share Improve this question Follow asked Aug 5, 2018 at 19:50 Willem van der VeenWillem van der Veen 36.8k1818 gold badges206206 silver badges176176 bronze badges 3

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

Add a ment  | 

3 Answers 3

Sorted by: 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"}

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./destructuring-renaming/

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

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.

本文标签： ecmascript 6Javascript Object destructuring and default parameters combinedStack Overflow