Generic functions with arrays in Typescript - Step-by-Step Execution

Concept Flow - Generic functions with arrays

Start: Call generic function with array

↓

Function receives array of type T[

↓

Process each element (e.g., map, filter)

↓

Return new array of type T[

↓

End

The generic function takes an array of any type T, processes it, and returns a new array of the same type.

Execution Sample

Typescript

function identityArray<T>(arr: T[]): T[] {
  return arr.map(item => item);
}

const nums = [1, 2, 3];
const result = identityArray(nums);

This function returns a new array identical to the input array, preserving the type.

Execution Table

Step	Action	Input Array	Processing	Output Array
1	Call identityArray with nums	[1, 2, 3]	Start processing each element	—
2	Process element 1	[1, 2, 3]	Map item=1 → 1	[1]
3	Process element 2	[1, 2, 3]	Map item=2 → 2	[1, 2]
4	Process element 3	[1, 2, 3]	Map item=3 → 3	[1, 2, 3]
5	Return new array	[1, 2, 3]	All elements processed	[1, 2, 3]
6	Assign to result	—	—	[1, 2, 3]

💡 All elements processed and returned as a new array of the same type.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
arr	undefined	[1, 2, 3]	[1, 2, 3]	[1, 2, 3]	[1, 2, 3]
item	undefined	1	2	3	3
output array	[]	[1]	[1, 2]	[1, 2, 3]	[1, 2, 3]
result	undefined	undefined	undefined	undefined	[1, 2, 3]

Key Moments - 3 Insights

Why does the function use <T> and how does it keep the array type?

The <T> tells TypeScript to use a generic type. The input array is T[], so the output is also T[], keeping the same type as the input (see execution_table steps 1 and 5).

Does the function change the original array?

No, it uses map to create a new array with the same elements (see execution_table rows 2-5), so the original array stays unchanged.

What if we pass an array of strings instead of numbers?

The function works the same way because it is generic. The type T becomes string, and the output array is string[] (not shown here but same logic applies).

Visual Quiz - 3 Questions

Look at the execution table, what is the output array after processing the second element?

A [1, 2, 3]

B [1]

C [1, 2]

D []

💡 Hint

Check the 'Output Array' column at Step 3 in the execution_table.

At which step does the function return the new array?

A Step 5

B Step 4

C Step 6

D Step 2

💡 Hint

Look for the step where the action is 'Return new array' in the execution_table.

If we change the function to return arr without map, how would the output array change?

A Output array would contain doubled elements

B Output array would be the same as input array reference

C Output array would be empty

D Output array would be undefined

💡 Hint

Think about what happens if map is removed and the original array is returned directly.

Concept Snapshot

Generic functions use <T> to work with any type.
Input and output arrays keep the same type T[].
Use array methods like map to process elements.
The function returns a new array, not modifying the original.
This keeps code reusable and type-safe.

Full Transcript

This visual trace shows how a generic function in TypeScript works with arrays. The function identityArray takes an array of any type T and returns a new array of the same type. Step by step, each element is processed using map, creating a new array identical to the input. Variables like arr, item, and output array change as the function runs. Key points include understanding the generic type <T> keeps the array type consistent, the original array is not changed, and the function can work with any type of array. The quiz questions help check understanding of the output array at different steps and the effect of changing the function to return the original array directly.