What is const {} in JS?

When you encounter const {} in JavaScript, you are seeing the declaration of a constant variable that holds a reference to an empty object. It means the variable itself cannot be reassigned to point to a different value, but the properties of the object it references can be modified.

Understanding const and Object Literals

To fully grasp const {}, it's essential to understand both const and the empty object literal independently.

The const Keyword

In JavaScript, the const keyword is used to declare a constant. This means that once a value is assigned to a const variable, that variable identifier cannot be reassigned to a different value later in the code. Attempts to reassign a const variable will result in a TypeError.

Example:

const favoriteNumber = 7;
// favoriteNumber = 10; // 🛑 Uncaught TypeError: Assignment to constant variable.

This behavior applies universally to const declarations, whether you're assigning a primitive value (like a number or string) or an object.

The Empty Object Literal ({})

The {} syntax in JavaScript is known as an object literal. It's the simplest way to create a new, empty JavaScript object. When you write const myObject = {};, you are instructing JavaScript to:

1. Create a new, blank object in memory.
2. Assign a reference to this new object to the variable myObject.

How const {} Works in Practice

When you combine const with an empty object literal, as in const myObject = {};, you declare myObject as a constant variable that points to that specific empty object. The crucial point here is that const only ensures the binding (the variable name myObject to its memory address) remains constant, not the contents of the object itself.

Key Insight: Variable Immutability vs. Object Mutability

While you cannot reassign myObject to a different object or a different data type, you can add, modify, or delete properties within the object it references.

Example:

const userProfile = {}; // Declare a constant variable referencing an empty object
console.log(userProfile); // Output: {}

// This is allowed: Modifying properties of the object
userProfile.name = "Alice";
userProfile.age = 30;
userProfile.isActive = true;

console.log(userProfile); // Output: { name: "Alice", age: 30, isActive: true }

// This is also allowed: Deleting properties
delete userProfile.age;
console.log(userProfile); // Output: { name: "Alice", isActive: true }

// This is NOT allowed: Re-assigning the 'userProfile' variable
// userProfile = { newProp: "value" }; // 🛑 Uncaught TypeError: Assignment to constant variable.
// userProfile = null; // 🛑 Uncaught TypeError: Assignment to constant variable.

This behavior is often referred to as a "deception" of const when dealing with objects because it gives the impression of complete immutability, which isn't entirely true for the object's contents.

Practical Applications and Considerations

Using const {} is common when you want to ensure that a particular variable always refers to the same object instance throughout its lifecycle, even if the data within that object might change.

const for Primitives vs. Objects

Making Objects Truly Immutable

If you need to ensure that an object's properties cannot be modified, added, or deleted after its creation, you would use Object.freeze() in conjunction with const.

Example:

const immutableConfig = Object.freeze({}); // Declare a constant variable referencing a frozen empty object

// Adding properties will fail silently in non-strict mode,
// or throw an error in strict mode.
immutableConfig.baseURL = "https://api.example.com";
immutableConfig.timeout = 5000;

console.log(immutableConfig); // Output: {} (or an object with some properties if not in strict mode)

// Attempts to reassign 'immutableConfig' still throw an error
// immutableConfig = { newBaseURL: "..." }; // 🛑 Uncaught TypeError: Assignment to constant variable.

While Object.freeze() makes the first level of an object immutable, it does not deep-freeze nested objects. For deep immutability, more advanced techniques or libraries are typically used.

In summary, const {} declares a constant variable that holds a reference to a mutable empty object, allowing its properties to be changed while preventing the variable itself from being reassigned.