Iterate Over Characters of a String in JS

Last Updated : 16 Jan, 2026

Iteration refers to the technique of visiting elements one by one, and in JavaScript, it enables processing a string character by character using multiple approaches.

  • Allows step-by-step access to every character in the string
  • Offers different looping options depending on readability and use case
how_to_iterate_characters_of_string
  • The given string "geeks" is broken into individual characters
  • Each character is associated with an index starting from 0
  • Iteration moves through the string from the first index to the last
  • Each character is accessed one by one and displayed as the output

Using for loop

The classic for loop is one of the most common ways to iterate over a string. Here, we loop through the string by indexing each character based on the string's length.

  • Uses an index to access each character in the string sequentially.
  • Iteration continues until the index reaches the string’s length.
JavaScript 
let str = "Hello";
for (let i = 0; i < str.length; i++) {
    console.log(str[i]);
}

Syntax:

for (statement 1 ; statement 2 ; statement 3){
    code here...
};

Using for...of Loop

The for...of loop is a modern way to iterate directly over the characters of a string without needing to use indexing.

  • Iterates directly over each character in the string.
  • Does not require manual index management, making the code cleaner and more readable.
JavaScript 
let str = "Hello";
for (let char of str) {
    console.log(char);
}

Syntax:

for ( variable of iterableObjectName) {
    // Code...
}

Using forEach() Method

The forEach() method works with arrays, so the string is first transformed into an array of characters before iterating over it in a clean and structured way.

  • Converts the string into a character array using split()
  • Applies forEach() to process each character one at a time
JavaScript 
let str = "Hello";
str.split('').forEach((char, index) => {
    console.log(`${index}: ${char}`);
});

Syntax:

array.forEach(callback(element, index, arr), thisValue)

Using charAt() Method with while Loop

The charAt() method fetches a character from a specified index, and when paired with a while loop, it enables controlled iteration by updating the index manually.

  • Uses charAt() to access characters at specific positions
  • A while loop increments the index to traverse the entire string
JavaScript 
let str = "Hello";
let index = 0;
while (index < str.length) {
    console.log(str.charAt(index));
    index++;
}

Syntax:

let index = 0;
while (index < str.length) {    
  let char = str.charAt(index);    
  // code here...    
  index++;
}

Using reduce() Method

The reduce() method enables string iteration by first converting the string into a character array and then applying operations through an accumulator to produce a final result.

  • Splits the string into an array of characters using split()
  • Uses reduce() to process each character and accumulate the desired output
JavaScript 
let str = "Hello";
let result = str.split('').reduce((acc, char) => acc + char, '');
console.log(result); // Outputs: "Hello"

Syntax:

string.split('').reduce((acc, char) => 
{  
  // Process char    return acc + char;}, ''
);

Using for...in Loop

The for...in loop makes it possible to traverse a string by looping over its index positions and using them to retrieve individual characters.

  • Iterates through the string’s indices instead of the characters directly
  • Each index is used to access the matching character in the string
JavaScript 
let str = "Hello";
for (let index in str) {
    console.log(str[index]);
}

Syntax:

for (let index in str) {
    const char = str[index];
    // code here...
}
Comment

Explore