Type 'undefined' must have a Symbol.iterator method that returns an iterator

avatar

Borislav Hadzhiev

Last updated: Mar 9, 2022

banner

Photo from Unsplash

Type 'undefined' must have a Symbol.iterator method that returns an iterator #

The "Type 'undefined' must have a 'Symbol.iterator' method that returns an iterator" error occurs when we try to use the spread syntax with a value that could be undefined. To solve the error, use a type guard to verify the value is not undefined before using spread.

Here is an example of how the error occurs.

index.ts
type Years = number[] | undefined; const arr1: Years = undefined; // ⛔️ Error: Type 'undefined' must have a // '[Symbol.iterator]()' method that returns an iterator.ts(2488) const result = [...arr1];

The arr1 variable could possibly have an undefined value.

This error often happens when you have properties marked as optional by using a question mark.

When a value is optional, it could be equal to undefined.

Since we can't use the spread syntax (...) with undefined values, we can provide a fallback of an empty array.

index.ts
type Years = number[] | undefined; const arr1: Years = Math.random() > 0.5 ? [2022, 2023] : undefined; const result = [...(arr1 || [])]; console.log(result);
We used the logical OR (||) operator to provide a fallback in case the arr1 variable stores an undefined value.

Now we are guaranteed to be using the spread syntax with an array, so TypeScript is happy.

You can also use the ternary operator to achieve the same result.

index.ts
type Years = number[] | undefined; const arr1: Years = Math.random() > 0.5 ? [2022, 2023] : undefined; const result = [...(arr1 !== undefined ? arr1 : [])]; console.log(result);

We used the ternary operator to check if arr1 does not store an undefined value.

If it does not, we spread the arr1 array, otherwise provide a fallback of an empty array.

The difference between using the logical OR (||) operator and this ternary is - the ternary is more explicit and directly checks for undefined.

The logical OR (||) operator returns the value to the right if the value to the left is falsy.

You can also provide a default value when initializing the variable.

index.ts
type Years = number[] | undefined; const arr1: Years = undefined || []; // 👈️ default value empty arr const result = [...arr1]; console.log(result);

We provided a default value of an empty array when initializing the arr1 variable.

This way TypeScript is sure that the variable will store an array and it can be safely unpacked into the result array.

Conclusion #

The "Type 'undefined' must have a 'Symbol.iterator' method that returns an iterator" error occurs when we try to use the spread syntax with a value that could be undefined. To solve the error, use a type guard to verify the value is not undefined before using spread.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.