String Traversal and Character Access in DSA Javascript - Execution Trace

Concept Flow - String Traversal and Character Access

Start at index = 0

↓

Check: index < string length?

No→END

Yes↓

Access character at index

↓

Use character (e.g., print)

↓

Increment index by 1

↩Back to Check

This flow shows how we start from the first character of a string and move through each character one by one until we reach the end.

Execution Sample

DSA Javascript

const str = "code";
for(let i = 0; i < str.length; i++) {
  console.log(str[i]);
}

This code prints each character of the string "code" one by one.

Execution Table

Step	i (index)	Condition (i < str.length)	Character Accessed	Action
1	0	0 < 4 (true)	"c"	Print 'c'
2	1	1 < 4 (true)	"o"	Print 'o'
3	2	2 < 4 (true)	"d"	Print 'd'
4	3	3 < 4 (true)	"e"	Print 'e'
5	4	4 < 4 (false)	N/A	Exit loop

💡 Loop ends when index 4 is not less than string length 4.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	Final
i	0	1	2	3	4	4
Character Accessed	"c"	"o"	"d"	"e"	N/A	N/A

Key Moments - 3 Insights

Why does the loop stop when i equals the string length?

Because the condition i < str.length becomes false at that point, as shown in execution_table row 5, so the loop exits before accessing an invalid index.

What happens if we try to access str[i] when i equals the string length?

Accessing str[i] at i equal to string length returns undefined or no character, which is why the loop condition prevents this by stopping before that index, as seen in execution_table.

Why do we start the index i at 0 instead of 1?

String indexes start at 0 in JavaScript, so the first character is at index 0. This is shown in execution_table row 1 where i=0 accesses 'c'.

Visual Quiz - 3 Questions

Look at the execution_table, what character is accessed at step 3?

A "d"

B "o"

C "e"

D "c"

💡 Hint

Check the 'Character Accessed' column at step 3 in execution_table.

At which step does the loop condition become false?

A Step 4

B Step 5

C Step 3

D Step 2

💡 Hint

Look at the 'Condition' column in execution_table where it shows false.

If the string was "hello", what would be the value of i at the last successful character access?

A 5

B 3

C 4

D 0

💡 Hint

The last character index is string length minus one, check variable_tracker for i values.

Concept Snapshot

String Traversal and Character Access:
- Use a loop from i = 0 to i < string.length
- Access characters by str[i]
- Loop stops before i reaches string length
- Each iteration accesses one character
- Commonly used to process or print each character

Full Transcript

This lesson shows how to go through a string one character at a time using a loop. We start with index zero, check if it is less than the string length, then access the character at that index. We do this repeatedly, increasing the index by one each time, until the index is no longer less than the string length. This prevents errors from accessing outside the string. The example code prints each character of the string "code". The execution table shows each step with the index, condition check, character accessed, and action taken. The variable tracker shows how the index and accessed character change each step. Key moments clarify why the loop stops at the string length and why indexing starts at zero. The quiz tests understanding of these steps and indexing rules.

Practice

1. What does the expression str[2] return when str = "hello"?

easy

A. The first character of the string, which is 'h'

B. The third character of the string, which is 'l'

C. The length of the string, which is 5

D. An error because strings cannot be accessed by index

Solution

1. Step 1: Understand zero-based indexing in strings

   Strings in JavaScript start counting characters from index 0, so index 2 is the third character.

2. Step 2: Identify the character at index 2 in "hello"

   The characters are: h(0), e(1), l(2), l(3), o(4). So index 2 is 'l'.

3. Final Answer:

   The third character of the string, which is 'l' -> Option B

4. Quick Check:

   str[2] = 'l' [OK]

Hint: Remember string indexes start at 0, so 2 means third character [OK]

Common Mistakes:

• Thinking index 2 is the second character
• Confusing string length with character access
• Believing strings can't be indexed like arrays

2. Which of the following is the correct syntax to loop through each character of a string text in JavaScript?

easy

A. for (let i = 0; i < text.length; i++) { console.log(text[i]); }

B. for (let char of text) { console.log(text[char]); }

C. for (let i = 1; i <= text.length; i++) { console.log(text[i]); }

D. for (let i = 0; i < text.length; i++) { console.log(text.charAt(i+1)); }

Solution

1. Step 1: Check the loop range and indexing

   The loop should start at 0 and go up to less than text.length to cover all characters.

2. Step 2: Verify character access inside the loop

   Accessing characters by text[i] is correct. for (let i = 0; i < text.length; i++) { console.log(text[i]); } uses this correctly.

3. Final Answer:

   for (let i = 0; i < text.length; i++) { console.log(text[i]); } -> Option A

4. Quick Check:

   Loop from 0 to length-1 and access text[i] [OK]

Hint: Loop from 0 to length-1 and use text[i] to access chars [OK]

Common Mistakes:

• Starting loop at 1 instead of 0
• Using text[char] when char is a character, not index
• Accessing index i+1 causing off-by-one errors

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

const s = "world";
let result = "";
for (let i = 0; i < s.length; i++) {
  if (i % 2 === 0) {
    result += s[i];
  }
}
console.log(result);

medium

A. "wrd"

B. "wolrd"

C. "orld"

D. "wrld"

Solution

1. Step 1: Understand the loop and condition

   The loop goes from 0 to 4 (length 5). It adds characters at even indexes (0,2,4) to result.

2. Step 2: Identify characters at even indexes

   Index 0: 'w', 2: 'r', 4: 'd'. So result becomes "wrd".

3. Final Answer:

   "wrd" -> Option A

4. Quick Check:

   Characters at even indexes = "wrd" [OK]

Hint: Pick characters where index % 2 is zero [OK]

Common Mistakes:

• Including characters at odd indexes
• Confusing index positions with characters
• Appending characters incorrectly

4. The following code is intended to print each character of word on a new line, but it prints an extra undefined. What is the problem?

const word = "test";
for (let i = 0; i <= word.length; i++) {
  console.log(word[i]);
}

medium

A. Strings cannot be accessed by index in JavaScript

B. console.log cannot print string characters

C. The variable i is not declared

D. The loop condition should be i < word.length instead of <=

Solution

1. Step 1: Analyze the loop condition

   The loop runs from i = 0 to i = word.length (which is 4). Index 4 is out of bounds for string indices 0-3.

2. Step 2: Identify the fix

   Change the condition to i < word.length to avoid accessing undefined index.

3. Final Answer:

   The loop condition should be i < word.length instead of <= -> Option D

4. Quick Check:

   Loop must stop before length to avoid undefined index [OK]

Hint: Use i < length not <= to avoid out-of-bounds [OK]

Common Mistakes:

• Using <= instead of < in loop condition
• Thinking strings can't be indexed
• Ignoring off-by-one errors

5. Given a string inputStr, which code snippet correctly reverses the string by traversing it from the end to the start?

hard

A. let reversed = '';
for (let i = inputStr.length; i > 0; i--) {
reversed += inputStr[i];
}

B. let reversed = '';
for (let i = 0; i < inputStr.length; i++) {
reversed += inputStr[inputStr.length - i];
}

C. let reversed = '';
for (let i = inputStr.length - 1; i >= 0; i--) {
reversed += inputStr[i];
}

D. let reversed = '';
for (let i = inputStr.length - 1; i > 0; i--) {
reversed += inputStr[i];
}

Solution

1. Step 1: Understand string indexing and loop bounds

   String indices go from 0 to length-1. To reverse, start at length-1 down to 0 inclusive.

2. Step 2: Check each option's loop and indexing

   let reversed = ''; for (let i = inputStr.length - 1; i >= 0; i--) { reversed += inputStr[i]; } loops from length-1 to 0 inclusive and appends characters correctly. Others have off-by-one errors or wrong indices.

3. Final Answer:

   let reversed = ''; for (let i = inputStr.length - 1; i >= 0; i--) { reversed += inputStr[i]; } -> Option C

4. Quick Check:

   Loop backward from last index to 0 and append chars [OK]

Hint: Loop backward from length-1 to 0 and append characters [OK]

Common Mistakes:

• Using wrong loop bounds causing missing first/last char
• Accessing index equal to length (out of bounds)
• Stopping loop before reaching index 0