> ## Documentation Index
> Fetch the complete documentation index at: https://docs.syntblaze.com/llms.txt
> Use this file to discover all available pages before exploring further.

# TypeScript Immediately Invoked Function Expression

An Immediately Invoked Function Expression (IIFE) is a function expression that is defined and executed simultaneously. It leverages lexical scoping to create an isolated execution context, evaluating the function logic immediately during the runtime execution phase when the statement is reached, without requiring a separate invocation call.

In TypeScript, an IIFE behaves identically to its JavaScript counterpart but strictly enforces static typing for parameters, return types, and internal variables.

## Syntax Mechanics

An IIFE consists of two primary syntactic components:

1. **The Grouping Operator `(...)`**: Provides an expression context for the `function` keyword and its body, ensuring the compiler parses the entire construct as a function expression rather than a function declaration.
2. **The Invocation Operator `(...)`**: Appended immediately after the grouping operator to execute the evaluated expression synchronously.

## Standard Function Expression IIFE

You can explicitly type the parameters and the return type of the anonymous function.

```typescript theme={"dark"}
(function (identifier: string, count: number): void {
    const internalState: boolean = true;
    console.log(`Executing ${identifier}: ${count}`);
})("Process", 42);
```

## Arrow Function IIFE

The arrow function syntax provides a more concise lexical structure. The type annotations follow standard TypeScript arrow function semantics.

```typescript theme={"dark"}
const computedValue: number = ((base: number): number => {
    const multiplier: number = 10;
    return base * multiplier;
})(5);
```

## Asynchronous IIFE

When utilizing `async`/`await` within an IIFE, the function expression must be marked as `async`, and the return type must be typed as a `Promise`.

```typescript theme={"dark"}
(async (endpoint: string): Promise<void> => {
    const response: Response = await fetch(endpoint);
    const data: unknown = await response.json();
    console.log(data);
})("https://api.example.com/data");
```

## Generic IIFE

TypeScript allows IIFEs to accept generic type parameters. The generic type is declared before the parameter list and instantiated at the invocation operator.

```typescript theme={"dark"}
const genericResult = (<T>(payload: T): T => {
    // Internal logic utilizing type T
    return payload;
})<string>("Strictly typed payload");
```

## Semicolon Prefixing

When an IIFE follows another statement in a file, it is a standard syntactic practice to prefix the grouping operator with a semicolon. This prevents the TypeScript compiler from incorrectly interpreting the IIFE's grouping operator as a function call on the preceding line's evaluated result.

```typescript theme={"dark"}
const previousStatement = 100

;((): void => {
    const isolatedVar: number = previousStatement * 2;
})()
```

<div
  style={{ 
display: "flex", 
justifyContent: "space-between", 
alignItems: "center", 
maxWidth: "754px", 
padding: "1rem 0",
marginBottom: "24px"
}}
>
  <span style={{ fontWeight: "bold", fontSize: "1.25rem", color: "var(--tw-prose-headings)", fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif" }}>Tired of Poor TypeScript Skills? Fix That With Deep Grasping!</span>

  <a
    href="https://syntblaze.com"
    target="_blank"
    style={{ 
  marginLeft: "24px",
  textDecoration: "none", 
  backgroundColor: "#007AFF",
  color: "#ffffff", 
  padding: "6px 16px", 
  borderRadius: "16px",
  fontSize: "0.9rem",
  fontWeight: "600",
  textAlign: "center",
  transition: "background-color 0.2s ease"
}}
  >
    Learn More
  </a>
</div>

<div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/skill-tracking.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=b9b0305c93bb501c9e767b5c76c88835" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/skill-tracking.png" />

  <img src="https://mintcdn.com/syntblazellc/23tyuOzaWS88qFlc/images/nuggets.png?fit=max&auto=format&n=23tyuOzaWS88qFlc&q=85&s=c86c80197299762989e9b882419b2109" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/nuggets.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/bite-sized-exercises.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=a65f9a38c37ff28ab73ed783c53c60e3" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/bite-sized-exercises.png" />
</div>

<div style={{ display: "flex", gap: "12px", flexWrap: "wrap", marginTop: "12px" }}>
  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/mastery-chain.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=748a1763454713e679260fbb95f154a2" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/mastery-chain.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/element-previews.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=242f61448ff5dd6deaaab2dccc13b507" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/element-previews.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/element-explanations.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=cf0fc1c31f9cd0fc26716781be05fbc9" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/element-explanations.png" />
</div>
