Enums in JavaScript
Enums in JavaScript are a way to define a set of named constants, often used to represent a collection of related values. While JavaScript doesn’t have built-in support for enums, similar functionality can be achieved using objects or const variables to improve code readability and maintainability.
In JavaScript, Enumerations or Enums are used to represent a fixed set of named values. However, Enums are not native to JavaScript, so they are usually implemented using objects or frozen arrays.
To ensure the immutability of Enums in JavaScript, you can follow these guidelines:
Object.freeze() Method:
One way to create an Enum-like object is by defining a plain JavaScript object with constant property values, and then using Object.freeze() to prevent any further modification. This will ensure that the object and its properties cannot be changed or mutated. You can use the Object.freeze() method to prevent any changes to the object. Once an object is frozen, you cannot add, modify or delete any of its properties. You can use this method to create an immutable object that represents your Enum.
Syntax:
Object.freeze()
Object.defineProperty() Method:
You can use the Object.defineProperty() method to define properties that cannot be changed, added, or deleted. You can use this method to create a read-only property for each Enum value. You can use the Object.defineProperty() method to define properties that cannot be changed, added, or deleted. You can use this method to create a read-only property for each Enum value.
Use TypeScript: TypeScript is a superset of JavaScript that includes support for Enums. Using TypeScript, you can define Enums in a way that guarantees their immutability.
Example 1: In this example, we create an Enum object called DaysOfWeek using Object.freeze(). The Object.freeze() method makes the object immutable, so we cannot add, modify or delete properties from the object.
const DaysOfWeek = Object.freeze({
SUNDAY: 0,
MONDAY: 1,
TUESDAY: 2,
WEDNESDAY: 3,
THURSDAY: 4,
FRIDAY: 5,
SATURDAY: 6
});
// Try to modify the enum
// This will not change the Sunday variable
DaysOfWeek.SUNDAY = 7;
console.log(DaysOfWeek.SUNDAY);
Output:
0
ES6 Symbol:
Another approach to creating an Enum in JavaScript is to use ES6 Symbols. Symbols are unique identifiers that cannot be duplicated and can be used to define constant values that are guaranteed to be unique and unchanging.
Example: In this example, we’re defining an enum called myEnum using Object.freeze() to prevent any modifications to the object. We’re using Symbol() to create unique symbols for each enum value.
const myEnum = Object.freeze({
FOO: Symbol('foo'),
BAR: Symbol('bar'),
BAZ: Symbol('baz')
});
console.log(myEnum.FOO); // Symbol(foo)
// Attempting to modify the enum
// values will have no effect
myEnum.FOO = Symbol('newFoo');
console.log(myEnum.FOO); // Symbol(foo)
// Adding a new property to the enum
// object will also have no effect
myEnum.QUX = Symbol('qux');
console.log(myEnum.QUX); // undefined
Output:
Symbol(foo)
Symbol(foo)
undefined
Using a Closure:
You can also use a closure to create an Enum. A closure is a function that has access to variables in its outer function scope. By creating an inner function that returns a value, we can make the variable in the outer function scope read-only.
Example: In this example, we use a closure to create an object called DaysOfWeek. The days object is defined in the outer function scope and is not accessible from outside the function. The inner function get returns the value of the property with the given name from the days object. Since the days object is not directly accessible, it cannot be modified from outside the closure.
const DaysOfWeek = (function () {
const days = {
SUNDAY: 0,
MONDAY: 1,
TUESDAY: 2,
WEDNESDAY: 3,
THURSDAY: 4,
FRIDAY: 5,
SATURDAY: 6
};
return {
get: function (name) {
return days[name];
}
};
})();
// Try to modify the enum
// This will not have any effect
DaysOfWeek.SUNDAY = 7;
console.log(DaysOfWeek.get('SUNDAY')); // Output: 0
Output:
0