It was my usual 4am 🕓 psycho-dev 🧠 study session, and the topic at hand was TypeScript ⚡. After watching some (1 to 1M) 📺 5-minute videos on YouTube and interrogating ChatGPT 🤖 for a couple of minutes ⏱️, finally... I understood how TypeScript enums translate to JavaScript! 🎉🚀.

For those who dont know what enums are:
In TypeScript, enums (short for enumerations) are like a toolbox 🧰 of named constants. They help you group related values and assign them easy-to-remember names, making your code more readable and error-resistant 🚀.

🛠️ Types of Enums:

1. Numeric Enums 🔢 => Each member gets a number (0, 1, 2…).

enum Direction {
  Up,     // 0
  Down,   // 1
  Left,   // 2
  Right   // 3
}

1. String Enums 🔤 => Each member has a string value, making debugging easier.

enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT"
}

1. Heterogeneous(mixed) Enums 🎲 => Mix numeric and string values (rarely used but possible).

TS enums to JS objects 🔢⇨📦

It's near 5:30am now and I finally get it! I finally understand how this:

enum Direction {
  Up,     // 0
  Down,   // 1
  Left,   // 2
  Right   // 3
}

makes this Js code possible:

console.log(Direction["Down"]) // 1

First, lets see how tsc (typescript compiler) compiles the enum:

From what I see, the compiler made an IFFE (famously known as iffy) function which is "Immediately Invoked Function Expression". I..FF..E it's in the name. From its name, the function is immediately executed.

The compiler also initialized a variable name Direction which is undefined for the moment.

Now lets look inside. The anonymous function inside the iffy has one paramater which is treated as an object inside the function, the object that resembels the enum.

That parameter is fed to the function as an argument for the iffy. If its null or undefined (which is our case) it will be assigned an empty object

Now to juicy parts....

Direction[Direction["Up"] = 0] = "Up";

Javascript executes the most inner square brackets to the outer brackets,
so Direction["Up"] = 0 is executed first and an entry "Up" is added to the Direction object

{
    Up: 0,
}

but the outer brackets also expects a value ( 0 in our case)

For the surprise of everyone (even javascript 😒), the assignment operation return the assigned value

console.log(x=546) // returns 546. Try it in browser console yourself

so the inner bracket assigns 0 to "Up" and also returns 0 for the outer bracket to create another entry in Direction Object.

Long story short, this line creates Bidirectional Mapping inside the Direction object.

After line #1 of the function, this is our Direction object

Direction = {
    Up: 0,
    0: "Up",
}

Now u know the drill. After the function completes execution, Direction looks like this

{
    Up: 0,
    0: "Up",

    Down: 1,
    1: "Down",

    Left: 2,
    2: "Left",

    Right: 3,
    3: "Right",
}

It's 6:45am , I gotta get to bed. Do NOT wake me up before 9. I absolutely don't wanna hear your comments or questions, but I do expect a follow, a like and a share maybe.