`enum` vs `const`: Which One Should You Actually Use?

#webdev #programming #javascript #beginners

Meet Tchaaca. She's a junior frontend developer working on her first big React + TypeScript project. One day, while trying to define a list of user roles, she stumbles upon two ways to do it:

// Option 1: Using an enum
enum Role {
  Admin = "admin",
  Editor = "editor",
  Viewer = "viewer"
}

// Option 2: Using a const object
const ROLE = {
  Admin: "admin",
  Editor: "editor",
  Viewer: "viewer"
} as const;

They both work. They both look readable. But… which one is better? When should she use enum, and when is a constobject the smarter choice?

Let's help Tchaaca out - and maybe help you too if you're facing the same dilemma.

🤔 What's the Difference?

✅ `enum` - The TypeScript Way

enumis a special feature provided by TypeScript to define a set of named constants. It's especially powerful when you need auto-completion, reverse mapping (in numeric enums), and safe refactoring.

enum Status {
  Idle = "idle",
  Loading = "loading",
  Success = "success",
  Error = "error"
}

const current = Status.Loading;

Behind the scenes, though, TypeScript compiles this into more verbose JavaScript, even for string enums.

It generates an IIFE and adds extra object logic to make things work - even if you don’t need that complexity.

✅ const with as const - The JavaScript-Friendly Way

const STATUS = {
  Idle: "idle",
  Loading: "loading",
  Success: "success",
  Error: "error"
} as const;

type Status = typeof STATUS[keyof typeof STATUS];

This pattern is:

Fully compatible with plain JavaScript
More lightweight (less code output)
Easier to tree-shake (if unused, it can be removed from the final bundle)
Slightly more boilerplate if you want strong types

⚙️ Code Comparison: What’s Really Happening?

`enum`(compiled JavaScript)

var Status;
(function (Status) {
  Status["Idle"] = "idle";
  Status["Loading"] = "loading";
  Status["Success"] = "success";
  Status["Error"] = "error";
})(Status || (Status = {}));

`const`object (compiled JavaScript)

const STATUS = {
  Idle: "idle",
  Loading: "loading",
  Success: "success",
  Error: "error"
};

You can see that the enum adds more code (which might not matter in small apps, but adds up in larger ones).

🧩 So, When Should You Use Each?

✅ Use `enum` when:

You're in a TypeScript-only project.
You want safer refactoring (your IDE will help more).
You need bidirectional mapping (with numeric enums).
You prefer built-in support for enums in the type system.

✅ Use `const` when:

You want leaner code output (especially in front-end apps).
You’re working with JavaScript or mixed environments.
You want full control over what gets compiled.
You don’t need enum-specific features like reverse mapping.

💡 Pro Tip: Want the best of both worlds?

You can use const+ as const for the values and derive types with typeof.

const THEME = {
  Dark: "dark",
  Light: "light",
  System: "system"
} as const;

type Theme = typeof THEME[keyof typeof THEME];

Now you get strong types and minimal output!

Try your self

TS Playground

👋 Final Thoughts

Tchaaca ended up using const for her project. Why? Because she didn’t need reverse mapping, wanted leaner bundles, and preferred writing plain JavaScript when possible.

But next time? Maybe she’ll use enum if she's working on a more complex backend logic in a strictly TypeScript environment.

So should you.

Use the right tool for the job.

Happy coding! ✨