Mateen Kiani
Published on Tue Jul 08 2025·4 min read
JavaScript objects are at the heart of nearly every web application today, making it easy to organize and access data with simple key/value pairs. Yet there’s a detail many developers overlook: the ability to use spaces in those keys. Have you ever wondered if your object can have a key like "user name"
instead of userName
?
It turns out you can—but it requires a bit of extra syntax. By wrapping keys in quotes and using bracket notation, you’ll gain the flexibility to match labels exactly as they appear in external data or UI designs. Understanding this trick helps you avoid unexpected bugs and keeps your code predictable.
In JavaScript, object keys without spaces follow an identifier pattern:
const person = {firstName: 'Alice',age: 30};
Here firstName
and age
act like variable names. They never need quotes, and you access them with dot notation (person.firstName
). But once you introduce a space or special character, the engine treats the key as a string literal rather than an identifier.
Tip: If you’re new to JavaScript objects, think of keys without spaces as plain property names and keys with spaces as string-based lookup values.
When your key contains a space, bracket notation becomes your friend. Instead of object.key
, you write:
const book = {"book title": 'Eloquent JS',author: 'Marijn'};console.log(book['book title']); // Eloquent JS
Bracket notation always expects a string (or expression that resolves to one). That means you can also do this dynamically:
const keyName = 'book title';console.log(book[keyName]); // Eloquent JS
This flexibility helps when you process data from sources like REST responses or CSV files where column names have spaces.
Beyond spaces, you might need keys with hyphens, periods, or even emojis. JavaScript lets you do this, but you must wrap the key in quotes:
const settings = {"theme-color": '#fff',"user emoji "🙂": true};
Without quotes, the parser throws an error:
// SyntaxError: Unexpected token -const bad = { theme-color: '#fff' };
Using quotes ensures your object remains valid JSON and interoperable with APIs. In fact, when you serialize with JSON.stringify()
, all quoted keys carry over seamlessly:
JSON.stringify(settings);// '{"theme-color":"#fff","user emoji 🙂":true}'
Note: For more on JSON property naming, see this guide: what is JavaScript object notation JSON.
Localization and Labels
Data from translation services often comes with keys like "Menu Text"
. Using bracket notation lets you plug them in directly.
CSV and Excel Imports
Column headers like Total Sales
map naturally to object keys when you parse rows.
Dynamic Dashboards
If widgets have names with spaces, you can store stats in an object without renaming every widget.
function getStat(stats, widgetName) {return stats[widgetName] || 0;}
These scenarios avoid manual key transformations and keep your code aligned with external data sources.
While you can use spaces, consider these guidelines:
In performance-critical code, favor simple identifiers. For configuration or data mapping layers, quoted keys work just fine without measurable overhead.
Forgetting Quotes
Always wrap keys containing spaces in quotes, or you'll hit a syntax error.
Mismatched Access
Using obj.key name
instead of obj['key name']
silently fails or throws, leading to hard-to-find bugs.
JSON vs. JS Object
In a JSON file, keys must be quoted. In code, unquoted keys are fine until you add special characters.
// Valid JS but invalid JSONconst o = { hello: 'world' };// But in JSON you’d write:'{"hello":"world"}'
Pro tip: Always run new data through a linter or schema validator to catch missing quotes early.
JavaScript gives you the freedom to name object keys however you need, spaces included. By wrapping keys in quotes and using bracket notation, you align your code with external sources, UI labels, and dynamic datasets without loss of clarity. Keep an eye on consistency and tooling support, and rely on unquoted identifiers only when you need speed, autocomplete, or simplicity. Armed with these techniques, you can confidently model data in the exact shape your application demands.