Create Object Literals in JavaScript

In JavaScript, empty objects are created using curly braces {}:

variable = {};

Note: Any object created using this method is referred to as an object literal.

Declaring object properties

Object properties are unique keys-value pairs separated by a comma character:

{
  key: value,
  ...
}

Where:

• key is a unique string identifier associated with a specific value.
• value is the value associated with a specific key, which can either be a primitive value, an object, or a function referred to as a method.

Note: If the same key is declared more than once, only the latest key-value pair will be stored in the object.

Declaring properties with user-defined keys

Object keys can be defined with single quotes, double quotes, or without quotes — the latter being the most common:

{
  'key': value,
  "key": value,
  key: value,
}

Notes:

• Although their use is not recommended, multi-words keys must always be enclosed in single or double quotes:

  {
    'my key': value,
    "my key": value,
  }
  

• Numeric keys will automatically be converted to strings. For example, the numeric key 0 will be converted to the string key "0".

Example

Let's consider this object literal, that represents a user:

const user = {
  'name': 'John Doe',
  "age": 34,
  sayHello: function() {
    console.log('Hello, World!');
  }
};

Where:

• The name key is associated with the string "John Doe".
• The age key is associated with the integer 34.
• The sayHello key is associated with an anonymous function that when executed prints the string "Hello, World!".

Declaring properties with computed keys

A computed key is an object key defined between square brackets [] whose value is dynamically set at runtime based on the evaluation of the specified expression:

{
  [expression]: value
}

Notes:

• When the expression is a variable, the resulting computed key will be its value.
• When the expression is a logical expression, the resulting computed key will be the result of its evaluation.

Example

Let's consider this object literal:

const computedKey = 'username';

const user = {
  [computedKey]: 'johndoe'
};

Which at runtime will result in this object:

{
  username: 'johndoe'
}

Declaring properties using the short-hand syntax

When working with objects, the short-hand syntax allows to dynamically define a property using a variable without explicitly specifying the key-value pair.

{
  variable
}

This will automatically create a property whose name is the name of the variable and value is the copy of the value stored in the variable.

Example

Let's consider this object literal:

const name = 'John Doe';
const email = 'jdoe@mail.com';

const user = {
  name,
  email
};

Which at runtime will result in this object:

{
  name: 'John Doe',
  email: 'jdoe@mail.com'
}

Declaring nested properties

A nested property refers to the key-value pair of an object, itself contained in an object.

{
  keyA: {
    keyB: {
      keyC: value
    }
  }
}

Nested properties are often used to represent hierarchical data or group related data together.

Example

Let's consider this object literal:

const user = {
  name: 'John Doe',
  address: {
    street: '5 Hacker Street',
    city: 'Paris',
    country: 'France'
  }
};

Where:

• The name key is associated with the string "John Doe".
• The address key is associated with a nested object literal that has 3 properties.