How do I interpret this syntax?

Question

I found this snippet of code online:

function cjsDetectionPlugin() {
  return {
    name: 'cjs-detection',
    moduleParsed({
      id,
      meta: {
        commonjs: { isCommonJS }
      }
    }) {
      console.log(`File ${id} is CommonJS: ${isCommonJS}`);
    }
  };
}

I understand that this is perfectly valid JS, but it just doesn't compute in my head. The method cjsDetectionPlugin is returning an object, but what exactly is happening on the line with moduleParsed? Does this resolve into some sort of property name?

And my biggest question is how this object can have a sub-property that calls code (console.log...).

What's going on here? Where can I find the definition for this specific syntax as to learn learn more about it?

It's a function declaration (well, a method) that uses object destructuring in the formal parameter list. — Pointy, Feb 21 '22 at 14:19
Does this answer your question [What is destructuring assignment and its uses?](https://stackoverflow.com/questions/54605286/what-is-destructuring-assignment-and-its-uses): `5. To extract values from parameters into standalone variables` in the accepted answer? — t.niese, Feb 21 '22 at 14:22
@Pointy I am familiar with object destructuring, but the line with `moduleParsed` doesn't look like a function declaration to me, but a function *call*. Am I missing something? — silkfire, Feb 21 '22 at 14:26
It's the syntax (fairly new) for declaring a property in an object with a function as it's value. Basically it's like `x: function x() { ... }` in the old syntax. — Pointy, Feb 21 '22 at 14:28
Either the method wants to return an object (`return {...`) or it wants to print out a line in the console. Which is it? :) — silkfire, Feb 21 '22 at 14:28
@silkfire It is a [method definition](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions) so it is a duplicate to [What is this 'method-like' syntax in JS object literal](https://stackoverflow.com/q/42561740/3001761) in combination with `5. To extract values from parameters into standalone variable` of my earlier comment. — t.niese, Feb 21 '22 at 14:29
`cjsDetectionPlugin` returns an object with a property `name` and a method definition `moduleParsed`, and the method `moduleParsed` calls `console.log`. — t.niese, Feb 21 '22 at 14:31
@Pointy Oh I see. So its property name is `moduleParsed`? I thought function declarations needed to have a head, like `x: () => moduleParsed(...)` — silkfire, Feb 21 '22 at 14:35

score 1 · Answer 1 · answered Feb 21 '22 at 14:26

It is called Object Destructuring, refer to the "Unpacking properties from objects passed as a function parameter " section in shared link

following one is using object destructering in function parameter:

function sayMyName({ name }) {
    console.log(`my name is ${name}`);
}

this is equivalent to:

function sayMyName(person) {
    console.log(`my name is ${person.name}`);
}

t.niese · Answer 2 · 2022-02-21T14:41:58.397

What you have here is a MDN: Method declaration:

function cjsDetectionPlugin() {
  return {
    name: 'cjs-detection',
    moduleParsed() {
      console.log('some logs');
    }
  };
}

And MDN: Destructuring assignment: Unpacking properties from objects passed as a function parameter:

function moduleParsed(/*begin: parameters*/{
  id,
  meta: {
     commonjs: { isCommonJS }
  }
}/*end: parameters*/) {
      console.log(`File ${id} is CommonJS: ${isCommonJS}`);
}

How do I interpret this syntax?

2 Answers2