> ## 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 For-in Loop

The `for...in` statement is a control flow construct that iterates over all enumerable string properties (keys) of an object, including those inherited through its prototype chain. In TypeScript, it operates fundamentally as an object property enumerator rather than a collection iterator.

## Syntax

```typescript theme={"dark"}
for (const variable in object) {
    // Statement execution
}
```

## Technical Characteristics

* **Type Inference:** TypeScript implicitly types the iteration variable as a `string`. Even if an object's keys are defined as numbers or specific string literals in the type definition, the `for...in` loop extracts them as generic strings at runtime.
* **Prototype Traversal:** The loop does not strictly evaluate the target object's own properties. It traverses the entire prototype chain, yielding any enumerable properties inherited from ancestor objects.
* **Array Behavior:** When applied to an `Array`, the loop yields the array indices as string types (e.g., `"0"`, `"1"`) along with any custom enumerable properties attached to the array object. Iteration order is implementation-dependent and not guaranteed to be sequential.

## TypeScript Indexing Constraints

Because TypeScript infers the loop variable as a generic `string`, using it to access object values via bracket notation often results in an implicit `any` type error (TS7053) if the object lacks a string index signature.

```typescript theme={"dark"}
const config = { host: "localhost", port: 8080 };

for (const key in config) {
    // TS Error: Element implicitly has an 'any' type because expression 
    // of type 'string' can't be used to index type '{ host: string; port: number; }'.
    const value = config[key]; 
}
```

To resolve this strict typing constraint, the iteration variable must be explicitly asserted as a key of the target object type:

```typescript theme={"dark"}
for (const key in config) {
    // Safe property access using type assertion
    const typedKey = key as keyof typeof config;
    const value = config[typedKey]; 
}
```

## Prototype Filtering

To prevent the loop from processing inherited properties, the execution block is typically guarded using `Object.prototype.hasOwnProperty.call()`.

```typescript theme={"dark"}
for (const key in object) {
    if (Object.prototype.hasOwnProperty.call(object, key)) {
        // Execution is restricted to the object's own enumerable properties
    }
}
```

<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>
