Generic functions with arrays in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of a generic function that reverses an array

What is the output of this TypeScript code that uses a generic function to reverse an array?

Typescript

function reverseArray<T>(items: T[]): T[] {
  return items.slice().reverse();
}

const numbers = [1, 2, 3];
const reversed = reverseArray(numbers);
console.log(reversed);

A TypeError at runtime

B [1, 2, 3]

C [3, 1, 2]

D [3, 2, 1]

💡 Hint

Think about what the reverse() method does to an array copy.

The function creates a copy of the input array using slice(), then reverses it. So the output is the reversed array [3, 2, 1].

🧠 Conceptual

intermediate

Understanding generic type constraints in functions

Which option correctly describes the purpose of the generic constraint in this function signature? function logLength(item: T): void { console.log(item.length); }

A It restricts the function to only accept arrays as arguments.

B It ensures the argument has a length property so the function can safely access item.length.

C It forces the function to return the length of the argument.

D It makes the function accept only strings as arguments.

💡 Hint

Think about what the constraint means for the argument type.

The constraint means T must have a length property of type number, so the function can safely use item.length without errors.

🔧 Debug

advanced

Identify the error in this generic function using arrays

What error will this TypeScript code produce when compiled? function firstElement(arr: T[]): T { return arr[0]; } const empty: number[] = []; const first = firstElement(empty); console.log(first);

Typescript

function firstElement<T>(arr: T[]): T {
  return arr[0];
}

const empty: number[] = [];
const first = firstElement(empty);
console.log(first);

A No error, output is undefined

B TypeError: Cannot read property '0' of undefined

C Compilation error: Type 'undefined' is not assignable to type 'T'

D Runtime error: Index out of bounds

💡 Hint

Consider what happens when accessing the first element of an empty array in JavaScript/TypeScript.

Accessing arr[0] on an empty array returns undefined. TypeScript allows this because T can include undefined unless strict null checks are enabled.

📝 Syntax

advanced

Which option correctly defines a generic function that returns the last element of an array?

Choose the correct TypeScript syntax for a generic function lastElement that returns the last item of an array of type T.

A function lastElement<T>(arr: T[]): T { return arr[arr.length - 1]; }

B function lastElement<T>(arr: T[]): T { return arr.pop(); }

C function lastElement<T>(arr: T[]): T { return arr[-1]; }

D function lastElement<T>(arr: T[]): T { return arr.slice(-1); }

💡 Hint

Remember how to access the last element of an array by index.

Option A correctly accesses the last element by index. Option A uses invalid negative index. Option A returns T | undefined but pop() modifies the array. Option A returns an array, not T.

🚀 Application

expert

What is the output of this generic function that merges two arrays?

Consider this TypeScript generic function that merges two arrays: function mergeArrays(arr1: T[], arr2: U[]): (T | U)[] { return [...arr1, ...arr2]; } const result = mergeArrays([1, 2], ['a', 'b']); console.log(result);

Typescript

function mergeArrays<T, U>(arr1: T[], arr2: U[]): (T | U)[] {
  return [...arr1, ...arr2];
}

const result = mergeArrays([1, 2], ['a', 'b']);
console.log(result);

A [1, 'a', 2, 'b']

B [[1, 2], ['a', 'b']]

C [1, 2, 'a', 'b']

D TypeError at runtime

💡 Hint

Think about what the spread operator does when merging arrays.

The spread operator expands both arrays into a new array, so the result is [1, 2, 'a', 'b'].

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