String Reversal Approaches in DSA Typescript - Execution Trace

Concept Flow - String Reversal Approaches

Start with original string

↓

Choose reversal method

↓

Method 1

↓

Reverse string

↓

Return reversed string

The flow shows starting with the original string, choosing one of three reversal methods, reversing the string, and returning the reversed result.

Execution Sample

DSA Typescript

function reverseString(s: string): string {
  let reversed = '';
  for (let i = s.length - 1; i >= 0; i--) {
    reversed += s[i];
  }
  return reversed;
}

This code reverses a string by looping from the end to the start and building a new reversed string.

Execution Table

Step	Operation	Index i	Character Added	Reversed String So Far
1	Initialize reversed string	-	-	""
2	i = 4, add s[4]	4	"o"	"o"
3	i = 3, add s[3]	3	"l"	"ol"
4	i = 2, add s[2]	2	"l"	"oll"
5	i = 1, add s[1]	1	"e"	"olle"
6	i = 0, add s[0]	0	"h"	"olleh"
7	Loop ends, return reversed	-	-	"olleh"

💡 Loop ends when i < 0, full string reversed.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	After Step 6	Final
i	4 (start)	4	3	2	1	0	-1 (loop ends)
reversed	""	"o"	"ol"	"oll"	"olle"	"olleh"	"olleh"

Key Moments - 3 Insights

Why does the loop start at s.length - 1 instead of 0?

Because we want to add characters from the end to the start to reverse the string, as shown in execution_table rows 2 to 6.

Why do we check i >= 0 in the loop condition?

To include the first character at index 0. The loop stops after adding s[0], as seen in step 6.

Why do we build a new string instead of modifying the original?

Strings are immutable in many languages including TypeScript, so we create a new reversed string step by step, as shown in the variable_tracker for 'reversed'.

Visual Quiz - 3 Questions

Look at the execution_table, what is the reversed string after step 4?

A "ol"

B "oll"

C "olle"

D "o"

💡 Hint

Check the 'Reversed String So Far' column at step 4 in the execution_table.

At which step does the loop add the first character of the original string?

A Step 6

B Step 4

C Step 2

D Step 7

💡 Hint

Look for when index i is 0 in the execution_table.

If the input string was empty, how would the execution_table change?

A The loop would run once adding undefined.

B The reversed string would be the same as input but reversed.

C The loop would not run and reversed would remain empty.

D The loop would run infinitely.

💡 Hint

Consider the loop condition i = s.length - 1; if s.length is 0, i starts at -1.

Concept Snapshot

String Reversal Approaches:
- Loop from end (index = length-1) to start (index = 0)
- Build new string by adding characters in reverse order
- Strings are immutable, so create new reversed string
- Stop loop when index < 0
- Return the reversed string

Full Transcript

This visual trace shows how to reverse a string by looping from the last character to the first. We start with an empty string and add each character from the original string in reverse order. The loop runs while the index is greater or equal to zero, ensuring all characters are included. The reversed string builds up step by step until the loop ends. This method works because strings cannot be changed directly, so we create a new reversed string. The execution table and variable tracker clearly show each step and how the reversed string grows.

Practice

1. What does the split('') method do when applied to a string in TypeScript?

easy

A. It reverses the string directly.

B. It converts the string into an array of individual characters.

C. It joins the string elements into one string.

D. It removes all spaces from the string.

Solution

1. Step 1: Understand the split method

   The split('') method breaks a string into an array of characters by splitting at every empty string between characters.

2. Step 2: Effect on string

   For example, "hello".split('') becomes ["h", "e", "l", "l", "o"].

3. Final Answer:

   It converts the string into an array of individual characters. -> Option B

4. Quick Check:

   split('') = array of chars [OK]

Hint: split('') breaks string into chars array [OK]

Common Mistakes:

• Thinking split('') reverses the string
• Confusing split('') with join()
• Assuming split('') removes spaces

2. Which of the following is the correct syntax to reverse a string str using built-in methods in TypeScript?

easy

A. str.split('').reverse().join('')

B. str.reverse().join('')

C. reverse(str).split('')

D. str.join('').reverse()

Solution

1. Step 1: Split string into array

   Use str.split('') to convert string into array of characters.

2. Step 2: Reverse and join

   Use reverse() on array, then join('') to form reversed string.

3. Final Answer:

   str.split('').reverse().join('') -> Option A

4. Quick Check:

   split + reverse + join = reversed string [OK]

Hint: Split, reverse array, then join to reverse string [OK]

Common Mistakes:

• Calling reverse() directly on string
• Using join() before reverse()
• Using reverse() as a standalone function

3. What will be the output of the following TypeScript code?

const str = "abcde";
const reversed = str.split('').reverse().join('');
console.log(reversed);

medium

A. "edcbe"

B. "abcde"

C. ""

D. "edcba"

Solution

1. Step 1: Split string into array

   "abcde".split('') becomes ["a", "b", "c", "d", "e"].

2. Step 2: Reverse and join array

   Reversing gives ["e", "d", "c", "b", "a"], joining results in "edcba".

3. Final Answer:

   "edcba" -> Option D

4. Quick Check:

   split + reverse + join = "edcba" [OK]

Hint: Split, reverse, join outputs reversed string [OK]

Common Mistakes:

• Expecting original string output
• Mixing up reversed characters
• Forgetting to join after reverse

4. Identify the error in this TypeScript function intended to reverse a string:

function reverseString(s: string): string {
  return s.reverse();
}

medium

A. Strings do not have a reverse() method directly.

B. The function should return void, not string.

C. The parameter should be an array, not a string.

D. The function is missing a return statement.

Solution

1. Step 1: Check string methods

   Strings in TypeScript do not have a reverse() method directly; only arrays do.

2. Step 2: Correct approach

   Convert string to array with split(''), reverse array, then join back.

3. Final Answer:

   Strings do not have a reverse() method directly. -> Option A

4. Quick Check:

   reverse() works on arrays, not strings [OK]

Hint: reverse() is for arrays, not strings [OK]

Common Mistakes:

• Trying to call reverse() on string directly
• Ignoring need to split string first
• Assuming reverse() returns void

5. Given the function below, what will be the output when calling reverseString('12345')?

function reverseString(s: string): string {
  let reversed = '';
  for (let i = s.length - 1; i >= 0; i--) {
    reversed += s[i];
  }
  return reversed;
}

hard

A. "5432"

B. "12345"

C. "54321"

D. ""

Solution

1. Step 1: Loop from end to start

   The loop starts at index 4 (last char '5') and moves backward to 0.

2. Step 2: Build reversed string

   Characters are appended in reverse order: '5', '4', '3', '2', '1'.

3. Final Answer:

   "54321" -> Option C

4. Quick Check:

   Loop backward concatenates reversed string [OK]

Hint: Loop backward to build reversed string [OK]

Common Mistakes:

• Looping forward instead of backward
• Off-by-one errors in loop index
• Not initializing reversed string properly