How does this switch statement work? The case values appear to be undefined in the debugger

Question

I'm trying to understand how this code works, because it seems like it should not, but it does work.

Is this some TypeScript magic I'm not understanding? React magic? How does this work if the cases are not strings, but imported values which appear as undefined?

Code source

import DialogTitle, { DialogTitleProps } from "./Title";
import DialogDescription, { DialogDescriptionProps } from "./Description";
import DialogButton, { DialogButtonProps } from "./Button";

// ....

  React.Children.forEach(children, (child) => {
    if (typeof child === "object" && child !== null && "type" in child) {
      switch (child.type) {
        case DialogTitle: // DialogTitle is undefined in the debugger when hovered
          titleChildrens.push(child as TitleElement);
          return;
        case DialogDescription: // DialogDescription is undefined in the debugger when hovered
          descriptionChildrens.push(child as DescriptionElement);
          return;
        case DialogButton: // DialogButton is undefined in the debugger when hovered
          if (Platform.OS === "ios" && buttonChildrens.length > 0) {
            buttonChildrens.push(
              <View
                style={[
                  verticalButtons
                    ? styles.buttonSeparatorVertical
                    : styles.buttonSeparatorHorizontal,
                  buttonSeparatorStyle,
                ]}
              />
            );
          }
          buttonChildrens.push(child as ButtonElement);
          return;
      }
    }
    otherChildrens.push(child);
  });

Answer 1

The code you are seeing in the debugger is not the code being executed. What you see as Container.tsx is actually probably just a snippet of compiled pure JS in a huge bundle.js somewhere.

Typescript code requires compilation before the browser can read it. As part of this step, it also generates source maps which map the compiled code back to your original source files. Webpack or whatever bundler you're using probably does it's own compilation then, and makes new source maps.

For the most part this makes it easier to debug, but it isn't perfect. So what you think is DialogTitle probably is an identifier that got transformed somehow during compilation, minification, obfuscation, bundling, etc...

You can disable source maps entirely to get a clearer view if what's going on, though the code your debugging will probably start to look pretty cryptic.

Source maps usually do work just fine, but not all tools can generate them perfectly, I've observed.

---

As for how the switch statement works, functions have an identity which can be queried by a switch statement.

For example, this works because MyComponent is assigned either A or B and each case can test that.

function A() { return <>A</> }
function B() { return <>B</> }

const MyComponent = Math.random() > 0.5 ? A : B

switch(MyComponent) {
  case A: console.log('got A'); break
  case B: console.log('got B'); break
}
// logs "got A" or "got B"

See playground

---

In the code I referenced, it's switch(child.type) and I don't understand how child.type is compared against a function? child.type is itself a function, but I'm still very confused about how that comparison evaluates to true.

This delves into react internals a bit, so I can't vouch for why but this appears to be what's going on.

When a component is rendered it returns a JSX.Element object. This object appears to have a type property on it that is a reference to the component that rendered that JSX.

For example:

function A() { return <>A</> }
console.log(<A />);

Yields this in the console:

This means that rendered JSX remembers the component that rendered it via that type property. And this loop here checks to see if any children were rendered with specific components that may need special handling.

Here's a minimal example that's closer to what your original snippet is actually doing.