Generic functions with arrays in Typescript - Time & Space Complexity

Time Complexity: Generic functions with arrays

O(1)

Understanding Time Complexity

When using generic functions with arrays, it's important to know how the time to run the function changes as the array grows.

We want to find out how many steps the function takes depending on the size of the input array.

Scenario Under Consideration

Analyze the time complexity of the following code snippet.

function getFirstElement<T>(arr: T[]): T | undefined {
  if (arr.length === 0) return undefined;
  return arr[0];
}

const numbers = [1, 2, 3, 4, 5];
const first = getFirstElement(numbers);
    

This function returns the first element of any array passed to it, using a generic type.

Identify Repeating Operations

Identify the loops, recursion, array traversals that repeat.

• Primary operation: Accessing the first element of the array.
• How many times: Exactly once, no loops or repeated steps.

How Execution Grows With Input

Since the function only looks at the first element, the number of steps does not grow with the array size.

Input Size (n)	Approx. Operations
10	1
100	1
1000	1

Pattern observation: The work stays the same no matter how big the array is.

Final Time Complexity

Time Complexity: O(1)

This means the function takes the same amount of time regardless of the array size.

Common Mistake

[X] Wrong: "Because the input array can be very large, the function must take longer to run."

[OK] Correct: The function only looks at the first element once, so the size of the array does not affect the time it takes.

Interview Connect

Understanding how generic functions behave with arrays helps you explain your code clearly and shows you know how to reason about performance.

Self-Check

"What if the function returned the last element instead of the first? How would the time complexity change?"

Practice

1.

What is the main purpose of using a generic function with <T> in TypeScript when working with arrays?

easy

A. To allow the function to work with arrays of any type without rewriting code.

B. To restrict the function to only work with number arrays.

C. To convert all array elements to strings.

D. To make the function run faster by using a specific type.

Solution

1. Step 1: Understand generic type <T>

   The generic type <T> allows a function to accept any type, making it reusable for different data types.

2. Step 2: Apply to arrays

   Using <T> with arrays means the function can handle arrays of numbers, strings, or any other type without rewriting the function.

3. Final Answer:

   To allow the function to work with arrays of any type without rewriting code. -> Option A

4. Quick Check:

   Generic <T> = reusable for any type [OK]

Hint: Generic <T> means any type works [OK]

Common Mistakes:

• Thinking generic restricts to one type
• Assuming generic converts types
• Believing generic improves speed only

2.

Which of the following is the correct syntax to declare a generic function firstElement that returns the first element of an array of any type?

function firstElement(____): T | undefined {
  return arr[0];
}

easy

A. arr: T[]

B. <T> arr: T[]

C. <T>(arr: T[])

D. (arr: any[])

Solution

1. Step 1: Identify generic function syntax

   Generic functions declare the type parameter before the argument list, like function fnName<T>(args).

2. Step 2: Match syntax to example

   The correct syntax is function firstElement<T>(arr: T[]): T | undefined to accept an array of type T.

3. Final Answer:

   <T>(arr: T[]) -> Option C

4. Quick Check:

   Generic syntax = <T>(args) [OK]

Hint: Generic type goes before parameters in function [OK]

Common Mistakes:

• Placing <T> after parameters
• Omitting <T> entirely
• Using incorrect parameter types

3.

What will be the output of the following TypeScript code?

function getLastElement<T>(arr: T[]): T | undefined {
  return arr.length ? arr[arr.length - 1] : undefined;
}

const nums = [10, 20, 30];
const result = getLastElement(nums);
console.log(result);

medium

A. 30

B. 10

C. undefined

D. Error

Solution

1. Step 1: Understand function behavior

   The function returns the last element if the array is not empty; otherwise, it returns undefined.

2. Step 2: Apply to given array

   The array nums is [10, 20, 30], so the last element is 30, which is returned and logged.

3. Final Answer:

   30 -> Option A

4. Quick Check:

   Last element of [10,20,30] = 30 [OK]

Hint: Last element is at index length-1 [OK]

Common Mistakes:

• Returning first element instead
• Ignoring empty array case
• Expecting error due to generics

4.

Identify the error in this generic function and select the corrected version:

function wrapInArray<T>(item: T): T[] {
  return item;
}

medium

A. Remove generic <T> since it's not needed.

B. Change return to [item] to return an array containing the item.

C. Change parameter type to T[] to match return type.

D. Change return type to T instead of T[].

Solution

1. Step 1: Analyze function return type

   The function promises to return an array of type T[], but returns item which is type T, not an array.

2. Step 2: Fix return statement

   Wrapping item in square brackets [item] creates an array containing the item, matching the return type.

3. Final Answer:

   Change return to [item] to return an array containing the item. -> Option B

4. Quick Check:

   Return array by wrapping item in [] [OK]

Hint: Return arrays with brackets [] around item [OK]

Common Mistakes:

• Returning item directly instead of array
• Changing parameter type unnecessarily
• Removing generics without reason

5.

You want to create a generic function filterNonEmpty that takes an array of any type T and returns a new array excluding null and undefined values. Which implementation correctly uses generics and array filtering?

hard

A. function filterNonEmpty<T>(arr: T[]): T[] {
return arr.filter(item => item != null);
}

B. function filterNonEmpty(arr: T[]): T[] {
return arr.filter(item => item !== null && item !== undefined);
}

C. function filterNonEmpty<T>(arr: T[]): (T | null | undefined)[] {
return arr.filter(item => item != null);
}

D. function filterNonEmpty<T>(arr: (T | null | undefined)[]): T[] {
return arr.filter(item => item != null);
}

Solution

1. Step 1: Define input and output types

   The input array can contain T, null, or undefined, so its type is (T | null | undefined)[]. The output should be only T[].

2. Step 2: Filter out null and undefined

   Using filter(item => item != null) removes both null and undefined values safely.

3. Final Answer:

   function filterNonEmpty<T>(arr: (T | null | undefined)[]): T[] { return arr.filter(item => item != null); } -> Option D

4. Quick Check:

   Filter null/undefined from mixed array [OK]

Hint: Input type includes null/undefined, output excludes them [OK]

Common Mistakes:

• Not typing input to include null/undefined
• Returning wrong output type
• Using strict !== null only, missing undefined