JavaScript object literals: syntax, shorthand, spread, and JSON

In JavaScript, a literal is a value you write directly in source code (numbers, strings, arrays, objects). An object literal is the { ... } form: a list of keys and values that creates a plain object in one expression.

This article walks through the main syntax features and small examples you can paste into a console or Node.

For copying and merging objects in depth, see the spread operator in JavaScript.

Environment: Node.js v20.18.2. After each runnable snippet, the following paragraph states the expected console output (order and values).

Quick reference

What object literals give you

1. Property–value pairs — Each key is a string (or Symbol); values can be any type, including nested objects.
2. Shorthand property names (ES2015) — When the variable name matches the property name, write { x, y } instead of { x: x, y: y }.
3. Computed property names (ES2015) — Use [expression] as the key so the name is evaluated at runtime.
4. Method definitions (ES2015) — Write methodName() { ... } instead of methodName: function () { ... }.
5. Spread in object literals (ES2018) — ...other copies enumerable own properties from another object into the new one.
6. JSON — JSON.stringify / JSON.parse exchange data with the wire; object literals are not JSON (JSON has no functions, trailing commas are forbidden in strict parsers, keys are always double-quoted in the string form).

One object combining shorthand, a method, computed keys, and spread

Define otherPerson before you spread it into another literal. The bracket key uses `address_${1 + 2}` in the source, which evaluates to the property name address_3; spread copies city and role onto the same object.

const otherPerson = { city: "Boston", role: "editor" };

const person = {
  name: "John",
  age: 30,
  speak() {
    console.log("Hello");
  },
  [`address_${1 + 2}`]: "New York",
  ...otherPerson,
};

console.log(
  person.name,
  person.age,
  person.address_3,
  person.city,
  person.role,
);
person.speak();

You should see one line: John 30 New York Boston editor, then a second line: Hello.

Examples

Simple properties and dot access

Braces create the object; dot notation reads fixed string keys.

const person = {
  name: "Amit",
  age: 30,
  gender: "male",
};
console.log(person.name, person.age, person.gender);

You should see one line: Amit 30 male.

Methods on the object

Concise method syntax stores functions on the object like any other property.

const calculator = {
  add(a, b) {
    return a + b;
  },
  subtract(a, b) {
    return a - b;
  },
};
console.log(calculator.add(1, 2));
console.log(calculator.subtract(5, 3));

You should see two lines, in order: 3, then 2.

Shorthand property names

When a variable name matches the key you want, omit the : value repetition.

const x = 5;
const y = 10;
const coordinates = { x, y };
console.log(coordinates.x, coordinates.y);

You should see one line: 5 10.

Computed property names

Bracket expressions in the key position are evaluated when the literal runs.

const key = "name";
const obj = {
  [key]: "Amit",
  ["age_" + 10]: 30,
};
console.log(obj.name, obj.age_10);

You should see one line: Amit 30.

Spread to clone and add fields

Spread copies enumerable own properties from person, then you add or override keys in the same literal.

const person = { name: "Amit", age: 30 };
const newPerson = { ...person, gender: "male" };
console.log(newPerson.name, newPerson.age, newPerson.gender);

You should see one line: Amit 30 male.

From JSON string to object

JSON.parse turns a JSON string into a plain object; keys become string properties on the result.

const personJSON = '{"name": "Amit", "age": 30}';
const person = JSON.parse(personJSON);
console.log(person.name, person.age);

You should see one line: Amit 30.

For safe parsing and revivers, see parse JSON in JavaScript.

Summary

Object literals are the default way to build plain data objects in JavaScript: readable, composable with spread, and aligned with modern syntax (shorthand, computed keys, concise methods). Treat JSON as a serialization format; build and edit data with literals and JSON.parse / JSON.stringify at the boundaries.

References

• Object initializer — MDN
• MDN Glossary: Literal