Naming convention for const object keys in ES6

Question

Is there a recommended naming convention for key names within a const object in es6? I haven't been able to find a resource which states if they should be uppercase or lowercase.

const COLOR_CODES = {
  BLUE: 1,
  RED: 1
};

vs

const COLOR_CODES = {
  blue: 1,
  red: 1
};

The examples from this MDN article show both styles, so maybe both are acceptable.

It may boil down to actual preference but whichever one you choose to use, just remain consistent. — Anthony Forloney, Oct 27 '16 at 18:31
In the first place it depends on your own coding preferences and the context where the constant is used. For destructuring `const { BLUE } = COLOR_CODES` the first version is preferable, because case convention serves its purpose, while `COLOR_CODES.BLUE` just makes it harder to read - it is obvious that properties of constant object are constant. — Estus Flask, Oct 27 '16 at 19:06
Even if it's obvious anyway, I think that `COLOR_CODES.BLUE` is easier to read than `COLOR_CODES.blue` - it just looks a bit weird for the first part to be all uppercase and the other lowercase. — Maciej Krawczyk, Oct 09 '21 at 05:13

SandroMarques · Answer 1 · 2020-05-23T10:45:34.583

NOTE: be aware that the accepted response has a link to an obsolete Google style guide

This is nice (string literals or integer literals):

const PI = 3.14;
const ADDRESS = '10.0.0.1';

but...

const myObject = { key: 'value' };
const userSuppliedNumber = getInputNumber()

Google JavaScript Style Guide says:

Declare all local variables with either const or let. Use const by default, unless a variable needs to be reassigned. The var keyword must not be used.

Every constant is a @const static property or a module-local const declaration, but not all @const static properties and module-local consts are constants. Before choosing constant case, consider whether the field really feels like a deeply immutable constant. For example, if any of that instance's observable state can change, it is almost certainly not a constant. Merely intending to never mutate the object is generally not enough.

JavaScript.info says:

...capital-named constants are only used as aliases for “hard-coded” values.

The accepted answer says "most of the other programming languages have all caps", and indeed they do. But languages like Java and C# only support const for strings, numbers and booleans, not for any object like Javascript does. So I think the updated Google style guidelines is taking this fact into account, and only recommending upper case when const is used in the same way as it is used in other languages, not for the more unusual way it is used in Javascript — cbp, May 23 '21 at 11:54

score 36 · Accepted Answer · answered Oct 27 '16 at 18:41

36

According to Google it would be all caps. Speaking from experience, most of the other programming languages have all caps so I would suggest using that.

Use NAMES_LIKE_THIS for constant values.

Use @const to indicate a constant (non-overwritable) pointer (a variable or property).

Google javascript guide https://google.github.io/styleguide/javascriptguide.xml

answered Oct 27 '16 at 18:41

Murf

1,661
11
18

Google JavaScript Style Guide continues to live on https://google.github.io/styleguide/jsguide.html – mehyaa Jul 27 '23 at 12:04

Daniel Sokolowski · Answer 3 · 2019-06-21T19:08:22.330

Naming conventions are all over the place, I personally still haven't decided on my preference but to add to the discussion this is what Airbnb JavaScript Style Guide says (see the last examples):

// bad
const PRIVATE_VARIABLE = 'should not be unnecessarily uppercased within a file';

// bad
export const THING_TO_BE_CHANGED = 'should obviously not be uppercased';

// bad
export let REASSIGNABLE_VARIABLE = 'do not use let with uppercase variables';

// ---

// allowed but does not supply semantic value
export const apiKey = 'SOMEKEY';

// better in most cases
export const API_KEY = 'SOMEKEY';

// ---

// bad - unnecessarily uppercases key while adding no semantic value
export const MAPPING = {
  KEY: 'value'
};

// good
export const MAPPING = {
  key: 'value'
};

score 9 · Answer 4 · edited Jan 24 '19 at 16:30

9

Google once recommended the following:

const COLOR_CODES = {
  BLUE: 1,
  RED: 1
};

See: https://google.github.io/styleguide/javascriptguide.xml#Constants

Use NAMES_LIKE_THIS for constant values.
Use @const to indicate a constant (non-overwritable) pointer (a variable or property).
Never use the const keyword as it's not supported in Internet Explorer.

However, the updated style guidelines have different recommendations.

edited Jan 24 '19 at 16:30

tronman

9,862
10
46
61

answered Oct 27 '16 at 18:42

Dan Wilson

3,937
2
17
27

`COLOR_CODES` is not a value as meant in that context and `const` **is** supported by IE. – a better oliver Oct 28 '16 at 08:10
Good point. I assume that constant names would follow the same convention. You're correct in that IE11 supports ES6, but IE10 does not. – Dan Wilson Oct 28 '16 at 12:57
Is `@const` supposed to be valid syntax? – Melab Jun 20 '19 at 17:46
@Melab It's documentation. `@const` is a synonym for `@constant` and is valid [JSDoc syntax](https://jsdoc.app/tags-constant.html) i.e. it belongs in the JSDoc comment before the declaration and annotates the symbol as being constant. – Wyck Aug 08 '22 at 18:44

score 0 · Answer 5 · answered Feb 06 '23 at 13:21

0

Saw goog.example.TIMEOUT_IN_MILLISECONDS = 60; in the google style guide https://google.github.io/styleguide/javascriptguide.xml?showone=Constants#Constants which seems to be like

const colorCodes = {
  BLUE: 1,
  RED: 1
};

answered Feb 06 '23 at 13:21

BrunoElo

360
6
11

This style closely resembles the recommended [Java enum](https://docs.oracle.com/javase/tutorial/java/javaOO/enum.html) naming convention. The [C# enum](https://learn.microsoft.com/en-us/dotnet/csharp/language-reference/builtin-types/enum) convention uses PascalCase. Personally I prefer that static constants be all uppercase, including enums. – Mike Lowery Jun 07 '23 at 22:36

Naming convention for const object keys in ES6

5 Answers5

Linked