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'].