Can someone please explain me this: 'create({email: emailArg} = {}) {}'?

Question

I'm still learning JS. Doing Apollo GraphQL tutorial: https://www.apollographql.com/docs/tutorial/introduction/

And I don't quite understand this part: findOrCreateUser({ email: emailArg } = {})

Full code below:

   /**
   * User can be called with an argument that includes email, but it doesn't
   * have to be. If the user is already on the context, it will use that user
   * instead
   */
  async findOrCreateUser({ email: emailArg } = {}) {
    const email =
      this.context && this.context.user ? this.context.user.email : emailArg;
    if (!email || !isEmail.validate(email)) return null;

    const users = await this.store.users.findOrCreate({ where: { email } });
    return users && users[0] ? users[0] : null;
  }

  async bookTrips({ launchIds }) {
    const userId = this.context.user.id;
    if (!userId) return;

    let results = [];

    // for each launch id, try to book the trip and add it to the results array
    // if successful
    for (const launchId of launchIds) {
      const res = await this.bookTrip({ launchId });
      if (res) results.push(res);
    }

    return results;
  }

Please educate me or a link to explanation will be fine. Thanks.

Possible duplicate of [What is destructuring assignment and its uses?](https://stackoverflow.com/questions/54605286/what-is-destructuring-assignment-and-its-uses) — adiga, Jul 19 '19 at 07:37
From MDN: [Setting a function parameter's default value](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Setting_a_function_parameter's_default_value) — adiga, Jul 19 '19 at 07:38
So, it basically does like `findOrCreateUser({ email: emailArg })`? Then what's the point of adding `= {}`? — Swix, Jul 19 '19 at 07:55

score 4 · Accepted Answer · answered Jul 19 '19 at 07:56

findOrCreateUser({ email: emailArg } = {})

is the combination of several principles

1) Object destructuring

const { prop } = obj;

is equivalent to:

const prop = obj.prop;

2) Function Arguments destructuring

Same thing but for the arguments of a function

function fun({ prop }) {
  console.log(prop);
}

is equivalent to

function fun(obj) {
  console.log(obj.prop);
}

3) Renaming variable when destructuring

function fun({ prop: newPropName }) {
  console.log(newPropName);
}

is equivalent to

function fun(obj) {
  const newPropName = obj.prop;
  console.log(newPropName);
}

4) Default function parameter

function fun(arg = 5) {
  console.log(arg); 
}

fun(10); // prints 10
fun(); // prints 5 since no value was passed to fun

Conclusion:

findOrCreateUser({ email: emailArg } = {}) {
 // [...]
}

is the equivalent of

findOrCreateUser(args) {
  const emailArg = args ? args.email : {};
  // [...]
}

In other words, it renames the email property of the object passed to the method to emailArg and makes it directly available. It also intializes the arguments to an empty object if nothing is passed to the function. This is to avoid provoking a Cannot read email of undefined if nothing is passed.

Here are the docs if you need more context:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Assigning_to_new_variable_names

Cat · Answer 2 · 2019-07-19T08:02:23.860

I think that:

1) The function expects to receive as its first argument a JavaScript Object that has inside it a property called email
2) Inside the function, we will refer to that email property as emailArg

Finally, the = {} part provides an empty object as the default value, helping to avoid errors.

A more detailed explanation of destructuring of function arguments can be found here: https://davidwalsh.name/destructuring-function-arguments

Can someone please explain me this: 'create({email: emailArg} = {}) {}'?

2 Answers2