How to dictate JavaScript variable, class and constant names

JavaScript uses three casing conventions and VoiceGem has a command for each: camel for variables and functions, pascal for classes and components, constant for module-level values. Saying “camel case default retry attempts” returns defaultRetryAttempts without a single shift press, and switching styles mid-line needs nothing but the next command.

A six-word declaration with a four-word name takes about 6.9 seconds to type and about 2.2 seconds to say. (sources: Dhakal, Feit, Kristensson & Oulasvirta, “Observations on Typing from 136 Million Keystrokes”, CHI 2018, 168,000 participants, 136 million keystrokes; Yuan, Liberman & Cieri, “Towards an Integrated Understanding of Speaking Rate in Conversation”, Interspeech 2006, 2,438 American English telephone conversations (Switchboard corpus). The speech figure is conversational rate, not a measured dictation rate — no such measurement exists.)

Say this

What lands in your editor

const defaultRetryAttempts = 3

This tool runs entirely in your browser. Nothing you type is sent anywhere, stored, or logged.

Step by step

1
Pick the command that matches the role
Say “camel case” for a variable or function, “pascal case” for a class or component, “constant case” for a module-level value. JavaScript's conventions map one-to-one onto three of VoiceGem's five commands.
2
Say the words of the name
Speak each word separately. The command joins the whole run into one identifier and applies the casing style you chose.
3
End the run with a symbol
Say “equals”, “open paren” or any other symbol phrase. A casing run consumes plain words until a symbol, a whitespace command or another casing command arrives.
4
Type it instead, and count the shifts
Write a four-word camelCase name by hand. Three internal capitals is three shift presses in the middle of a word, which is the specific cost this page is about.

Three JavaScript conventions map onto three VoiceGem commands with nothing left over

Variables and functions are camelCase, classes and React components are PascalCase, and module-level configuration values are CONSTANT_CASE. Each has exactly one command, so choosing the right one is the same decision you were already making when you decided what kind of thing you were declaring.

The remaining two commands, snake and kebab, are not idiomatic in JavaScript source but both appear at its edges — snake_case in JSON payloads from other services, kebab-case in CSS class names and data attributes. Having all five available means a file that mixes them needs no mode switch.

Where the manual way breaks

Two-word names are quick to type and one shift press is nothing. Nobody needs help writing userId.

Long descriptive names are where the cost lands, and where names get shortened to avoid it. A five-word constant is four internal capitals or four underscores, and abbreviating it is the path of least resistance when typing. Dictating in VoiceGem makes the long name cost the same as the short one, which removes the incentive to abbreviate.

Doing this somewhere else? the same casing converter this demo runs, dictating JSDoc comments specifically, what changes for dictating JavaScript functions, or the same thing for naming things in Go by voice.

Common questions

Say “pascal case”. Components are PascalCase by convention, and VoiceGem's command capitalises the first letter of each spoken word.

Yes. Each casing command ends the previous run, so a line with a camel, a pascal and a constant name needs three commands and nothing else.

Say “snake case”. All five styles are available at any point, so a file mixing conventions needs no mode switch.

Convert a name between all five styles and see which your codebase wants.

Open the tool