String Reversal Approaches in DSA Javascript - Execution Trace

Concept Flow - String Reversal Approaches

Start with input string

↓

Choose reversal method

↓

Method 1: Using built-in functions

↓

Split string into array

↓

Reverse array

↓

Join array back to string

↓

Return reversed string

↓

Method 2: Using loop

↓

Initialize empty result

↓

Loop from end to start

↓

Append each char to result

↓

Return reversed string

The flow starts with the input string, then chooses a reversal method: either using built-in functions (split, reverse, join) or using a loop to build the reversed string character by character.

Execution Sample

DSA Javascript

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

This code reverses the string "hello" using built-in JavaScript functions and prints the reversed string.

Execution Table

Step	Operation	Intermediate State	Result	Visual State
1	Input string	str = "hello"	-	h -> e -> l -> l -> o
2	Split string into array	['h', 'e', 'l', 'l', 'o']	-	h -> e -> l -> l -> o
3	Reverse array	['o', 'l', 'l', 'e', 'h']	-	o -> l -> l -> e -> h
4	Join array to string	-	"olleh"	o -> l -> l -> e -> h
5	Print reversed string	-	olleh	o -> l -> l -> e -> h
6	End	-	-	Process complete

💡 All steps completed, string reversed successfully.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
str	"hello"	"hello"	"hello"	"hello"	"hello"
array	N/A	['h', 'e', 'l', 'l', 'o']	['o', 'l', 'l', 'e', 'h']	['o', 'l', 'l', 'e', 'h']	N/A
reversed	N/A	N/A	N/A	"olleh"	"olleh"

Key Moments - 3 Insights

Why do we split the string before reversing?

Strings are immutable in JavaScript, so we convert the string to an array of characters (step 2) because arrays can be reversed using the built-in reverse() method (step 3). This is shown in execution_table rows 2 and 3.

Why can't we reverse the string directly without splitting?

Strings do not have a reverse() method. We must first split into an array to use reverse(), then join back to a string. This is why step 2 (split) and step 3 (reverse) are separate in the execution_table.

How does the loop method build the reversed string?

The loop method starts from the last character and appends each character to a new string, building the reversed string step by step. This is an alternative to the built-in method shown in the concept_flow.

Visual Quiz - 3 Questions

Look at the execution_table, what is the array state after step 3?

A ['h', 'e', 'l', 'l', 'o']

B ['o', 'l', 'l', 'e', 'h']

C "olleh"

D "hello"

💡 Hint

Check the 'Intermediate State' column at step 3 in the execution_table.

At which step is the string joined back from the array?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look for the 'Join array to string' operation in the execution_table.

If we skip splitting the string, what happens to the reversal process?

A It throws an error because strings have no reverse method

B It reverses the string automatically

C It works the same way

D It returns the original string

💡 Hint

Refer to the key_moments about why splitting is necessary before reversing.

Concept Snapshot

String Reversal Approaches in JavaScript:
- Use str.split("") to convert string to array
- Use array.reverse() to reverse the array
- Use array.join("") to convert back to string
- Alternatively, use a loop from end to start to build reversed string
- Strings are immutable, so direct reverse() is not possible

Full Transcript

This visual execution shows how to reverse a string in JavaScript using two main approaches. First, the built-in method splits the string into an array of characters, reverses the array, then joins it back into a string. The execution table tracks each step, showing the string and array states. The variable tracker follows the changes in variables like the original string, the array, and the reversed string. Key moments clarify why splitting is necessary and why strings cannot be reversed directly. The visual quiz tests understanding of the array state after reversing, the step where joining happens, and the consequence of skipping splitting. The concept snapshot summarizes the syntax and behavior for quick reference.

Practice

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

easy

A. It reverses the string characters.

B. It removes all spaces from the string.

C. It joins array elements into a string.

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

Solution

1. Step 1: Understand the split method

   The split('') method splits a string into an array by each character because the separator is an empty string.

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 D

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 in JavaScript using built-in methods?

easy

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

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

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

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

Solution

1. Step 1: Understand string and array methods

   Strings do not have a reverse() method, but arrays do. So first convert string to array using split('').

2. Step 2: Reverse array and join back

   Use reverse() on the array, then join('') to convert back to string.

3. Final Answer:

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

4. Quick Check:

   split + reverse + join = reversed string [OK]

Hint: Split string, reverse array, join back [OK]

Common Mistakes:

• Trying to call reverse() directly on string
• Using join() before reverse()
• Using incorrect method order

3. What is the output of the following code?

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

medium

A. Error: reverse is not a function

B. 'abc'

C. 'cba'

D. ['c', 'b', 'a']

Solution

1. Step 1: Split string into array

   'abc'.split('') becomes ['a', 'b', 'c'].

2. Step 2: Reverse array and join

   ['a', 'b', 'c'].reverse() becomes ['c', 'b', 'a'], then .join('') makes it 'cba'.

3. Final Answer:

   'cba' -> Option C

4. Quick Check:

   split + reverse + join = 'cba' [OK]

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

Common Mistakes:

• Expecting original string output
• Expecting array output instead of string
• Confusing method order causing errors

4. Identify the error in this string reversal code:

function reverseString(s) {
  return s.reverse().join('');
}

medium

A. Strings do not have reverse() method.

B. join() cannot be used on strings.

C. Function missing return statement.

D. split('') is missing before reverse().

Solution

1. Step 1: Check string methods

   Strings do not have reverse(), so calling s.reverse() causes error.

2. Step 2: Fix by splitting string

   We must convert string to array first using s.split('') before reversing.

3. Final Answer:

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

4. Quick Check:

   No reverse() method on strings [OK]

Hint: Strings do not have reverse() method [OK]

Common Mistakes:

• Trying to reverse string directly
• Ignoring need to split string
• Misunderstanding join() usage

5. Given the function below, what will reverseString('hello world') return?

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

hard

A. 'dlrow olleh'

B. 'hello world'

C. 'helloworld'

D. Error: Cannot read property 'length' of undefined

Solution

1. Step 1: Loop from end to start

   The for loop starts at last character index and moves backward to 0, appending each character to reversed.

2. Step 2: Build reversed string

   Characters are added in reverse order, so 'hello world' becomes 'dlrow olleh'.

3. Final Answer:

   'dlrow olleh' -> Option A

4. Quick Check:

   Loop backward appends chars reversed [OK]

Hint: Loop backward to build reversed string [OK]

Common Mistakes:

• Looping forward instead of backward
• Not appending characters correctly
• Confusing string concatenation