const enums are Awesome

Pro Members Only

This lesson is available if you have an active subscription.

Alternatively, some member might be able to gift it to you.

If you already have a subscription, you can sign in.

const enums are Awesome

Subscription Required

You must have an active subscription to access this content.
If you already have a subscription, you can sign in.

Standard enum

Lets take a look at the TypeScript and generated JavaScript for standard enums:

enum Size {
Small,
Medium,
Large,
}

const pizza = {
type: 'pepperoni',
size: Size.Medium,
};
'use strict';
var Size;
(function (Size) {
Size[(Size['Small'] = 0)] = 'Small';
Size[(Size['Medium'] = 1)] = 'Medium';
Size[(Size['Large'] = 2)] = 'Large';
})(Size || (Size = {}));
const pizza = {
type: 'pepperoni',
size: Size.Medium,
};

const enum

With const enum the JavaScript is much simpler

const enum Size {
Small,
Medium,
Large,
}

const pizza = {
type: 'pepperoni',
size: Size.Medium,
};
'use strict';
const pizza = {
type: 'pepperoni',
size: 1 /* Size.Medium */,
};

... and more importantly potentially faster at runtime due to the following two reasons:

  • No need to lookup the enum object
  • No need to lookup the member from the enum object
javascript
typescript
react
playwright

Enjoy free content straight from your inbox 💌

No spam, unsubscribe at any time.

Transcript

00:00

In our TypeScript course, we've already looked at the reasons why we think that ANUMs should be avoided in general. However, there are use cases where certain S are useful. Constant ANUMs in specific are actually quite powerful, and they are even used by the TypeScript compiler itself. When we look at the TypeScript compiler source code, we notice that the TypeScript team uses constant quite frequently, which means that it is a somewhat useful part of the programming language. So let's take a look at what is a consum and why it is used in building the compiler. The key difference between an enum

00:32

and a consum is in the generated JavaScript. So let's first take a look at the JavaScript that is generated for a standard inam. Here we have an NU size consisting of three possible members, small, medium, and large, and we use a member of the inam, which is size medium in a simple JavaScript object. Let's run this code through the TypeScript compiler to get the generated JavaScript. There are two key portions of this generated output that we need to focus on. The first is the generated JAL script that corresponds to the input inam.

01:05

This portion can be used to easily look up and reverse lookup members of the inam. It is an empty JavaScript object that has the different string values pointing to their pneumatic indices. And then from the numeric indices, which are zero, one and two, we can actually get their string representation as well. Let's run through a simple mental exercise. If you look at the member medium from size, we should get back the number one. And similarly, if you look up the number one from size, we should get back the string medium. Now, when we try to access a member medium from the size

01:38

Innu, it is essentially going to be a string lookup for medium, and we will get back the number one. So at runtime for the pi, object size is going to be the number one. Now let's take a look at how the JavaScript gets modified. If we use a constant num instead of just a plain num with the modification, we run the testra compiler again, and this time you can see that the output is actually much simpler. The lookup object has completely disappeared, and because we have no lookup object, any instance where we try to use a number of size has actually been in line. And when this code runs, now, it is actually going

02:13

to perform better because there are two JavaScript things that are no longer happening. First, the runtime does not need to look up the variable size. And then secondly, the runtime does not need to look up the member medium from the size object, and this is by the TypeScript team uses cons in arms when building the compiler. They get the developer ergonomics of well-defined names when they are writing the code. But then at one time, there is no associated cost of an object member lookup. The final thought that I want to leave you with is that while it makes sense to use cons, genomes for high performance computing, it's not something

02:46

that you need to use for your standard web development. However, if you are building something where every bit of performance counts like a compiler that is used by millions of people, it is a useful tool to have in your tool belt.