Javascript: Question about the naming convention

Created on 7 Mar 2020  Â·  8Comments  Â·  Source: airbnb/javascript

I have a question about the naming convention, I need to define and export namespace object, should it be PascalCased or not?
the styleguide specifies:
_23.3 Use PascalCase only when naming constructors or classes. eslint: new-cap_
but then, there is this statement:
_23.8 Use PascalCase when you export a constructor / class / singleton / function library / bare object._
It looks for me like a contradiction. I can't wrap my head around it, please help.

question

All 8 comments

Can you provide some code? “export namespace object” sounds like you’re using export syntax, but also exporting a single object rather than using individual named exports.

Sure, should be a diffrence in regular naming i.e defining a const and export?

Code examples:
first one, pretty sure the naming in camelCase is right here

const someState = {
    pages: {
        selected: 'info',
        list: [
            { key: 'info', name: 'Info' },
            { key: 'users', name: 'Users' }
        ]
    }
}

export default someState ;
export { someState as intialState};

and second one, PascalCased as stated in guide (23.8), is it right? it is basically the same object (not constructor) as first one..

const MyApp = {
    author: 'Peter Griffin'
}

export default MyApp;
export { MyApp as App};

That looks right (altho it’s not good to export it twice; it’s either what the module is, and thus the default export, or it’s something the module has, and thus a named export)

Please do not pay attention for export twice, is just for example. My question is more about defining constant name rather that export name.
I cannot understand why in one case naming should be in CamelCase and in other in PascalCase, while it is same instance types? Yes, in this example there is difference in meaning, but it is subtle and easly can be messed up in different cases.. is there a strict rule how those cases can be differentiated?

No, like many things, it's a conceptual difference, and requires human decision.

Ok, I got the point. Just double check

// this is bad
const InitialState = {
    pages: {
        selected: 'info'
    }
}
// this is not good (better to be PascalCase), but ok
const myApp = {
    title: 'SuperApp'
}

Is it right?

Yes, both of those seem incorrect to me.

@ljharb thank you for clearing things up

Was this page helpful?
0 / 5 - 0 ratings

Related issues

olalonde picture olalonde  Â·  3Comments

felixsanz picture felixsanz  Â·  3Comments

brendanvinson picture brendanvinson  Â·  4Comments

golopot picture golopot  Â·  3Comments

tpiros picture tpiros  Â·  3Comments