TypeScript Enum vs. ES6 Symbol

· 2 min read · 425 Words · -Views -Comments

JavaScript’s primitive data types added the Symbol type when ES6 arrived, and ES6 (ES2015) was released 5.5 years ago.

However, in actual development, I haven’t used Symbol much because in the TypeScript environment, I seem to consider it even less since TypeScript has enum types. But after serious study and research, I realize this understanding was wrong.

Here I’ll mark down the differences between the two to clarify their distinctions and meanings for healthier and more reasonable usage.

TypeScript Enum

First, TypeScript is just an intermediate language, a development language, and TypeScript ultimately needs to be compiled to JavaScript, so this type itself is just a wrapper.

For example, if we define an enum like this:

enum Config {
  CSV,
  JSON
}

After TSC compilation, we can see it becomes:

var Config;
(function (Config) {
    Config[Config["CSV"] = 0] = "CSV";
    Config[Config["JSON"] = 1] = "JSON";
})(Config || (Config = {}));

Looking at TypeScript’s official description of Enum:

Enums are one of the few features TypeScript has which is not a type-level extension of JavaScript.

Enums allow a developer to define a set of named constants. Using enums can make it easier to document intent, or create a set of distinct cases. TypeScript provides both numeric and string-based enums.

Takeaways:

  • Enums define a set of named constants.
  • They compile to JavaScript objects; no runtime magic involved.

ES6 Symbol

Symbol is a new data type added in ES6, designed to represent unique identifiers for object properties and prevent property conflicts.

Here’s the official description from MDN:

The data type symbol is a primitive data type. The Symbol() function returns a value of type symbol, has static properties that expose several members of built-in objects, has static methods that expose the global symbol registry, and resembles a built-in object class, but is incomplete as a constructor because it does not support the syntax “new Symbol()”.

Every symbol value returned from Symbol() is unique. A symbol value may be used as an identifier for object properties; this is the data type’s primary purpose, although other use-cases exist, such as enabling opaque data types, or serving as an implementation-supported unique identifier in general. Some further explanation about purpose and usage can be found in the glossary entry for Symbol.

Takeaways:

  • Symbol('hey') === Symbol('hey') is false; each call produces a unique value.
  • Symbols can emulate “private” properties because JSON serialization and Object.keys skip them.

Conclusion

Choose the construct that fits: use symbols when you just need unique identifiers on the frontend, and enums when values must serialize cleanly or remain human-readable.

Authors
Developer, digital product enthusiast, tinkerer, sharer, open source lover