String Traversal and Character Access in DSA Javascript

Mental Model

A string is a sequence of characters you can look at one by one from start to end.

Analogy: Imagine reading a sentence letter by letter to understand or find something specific.

"H" -> "e" -> "l" -> "l" -> "o" -> null
 ↑

Dry Run Walkthrough

Input: string: "Hello", find and print each character one by one

Goal: To visit each character in the string and print it in order

Step 1: Start at first character 'H'

"H" -> "e" -> "l" -> "l" -> "o" -> null
 ↑

Why: We begin reading from the first character to cover the whole string

Step 2: Move to second character 'e'

"H" -> "e" -> "l" -> "l" -> "o" -> null
    ↑

Why: We move forward to read the next character

Step 3: Move to third character 'l'

"H" -> "e" -> "l" -> "l" -> "o" -> null
       ↑

Why: Continue moving forward to read all characters

Step 4: Move to fourth character 'l'

"H" -> "e" -> "l" -> "l" -> "o" -> null
          ↑

Why: Keep moving forward to reach the end

Step 5: Move to fifth character 'o'

"H" -> "e" -> "l" -> "l" -> "o" -> null
             ↑

Why: Last character to read before finishing

Result:

"H" -> "e" -> "l" -> "l" -> "o" -> null
All characters printed in order: H e l l o

Annotated Code

DSA Javascript

class StringTraversal {
  constructor(str) {
    this.str = str;
  }

  printCharacters() {
    for (let i = 0; i < this.str.length; i++) {
      console.log(this.str[i]); // print current character
    }
  }
}

const example = new StringTraversal("Hello");
example.printCharacters();

for (let i = 0; i < this.str.length; i++) {

loop through each character index from start to end

console.log(this.str[i]); // print current character

access and print character at current index

Output

H

e

l

l

o

Complexity Analysis

Time: O(n) because we visit each character once where n is string length

Space: O(1) because we only use a few variables, no extra space grows with input

vs Alternative: Direct indexing is faster and simpler than converting string to array first

Edge Cases

empty string ""

loop does not run, nothing is printed

DSA Javascript

for (let i = 0; i < this.str.length; i++) {

string with one character "A"

prints single character 'A' once

DSA Javascript

for (let i = 0; i < this.str.length; i++) {

When to Use This Pattern

When you need to process or examine each letter in a word or sentence, use string traversal to access characters one by one.

Common Mistakes

Mistake: Trying to access characters using parentheses like str(i) instead of brackets str[i]
Fix: Use square brackets str[i] to access characters by index

Mistake: Looping beyond string length causing undefined access
Fix: Use i < str.length as loop condition to stay within bounds

Summary

It visits each character in a string one by one to read or process them.

Use it when you want to look at or change each letter in a word or sentence.

Remember strings are like arrays of letters you can access by position using brackets.

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