Traverse a string in JavaScript
This post will discuss how to traverse a string in JavaScript.
To traverse a string in JavaScript means to iterate over each character in the string and perform some action or operation on it. There are several ways to traverse a string in JavaScript. Here are some of the most common functions:
1. Using for loop
One way is to use a for loop with the length property and the charAt() function of the string object. This function will loop through the string from the first character to the last one, using an index variable to access each character. For example, if we have a string, we can iterate over its characters using a for loop like this:
|
1 2 3 4 5 6 |
let str = "Hello"; for (let i = 0; i < str.length; i++) { // print each character console.log(str.charAt(i)); } |
Output:
H
e
l
l
o
2. Using for…of loop
Another way is to use a for…of loop, which is a new feature introduced in ES6 (ECMAScript 2015). It is a modern way to iterate over iterable objects, such as strings, arrays, maps, sets, etc. We can use a for…of loop to traverse a string by using a variable (usually char) to store each character in the string. For example, using the same string as before, we can iterate over its characters using a for…of loop like this:
|
1 2 3 4 5 6 |
let str = "Hello"; for (let c of str) { // print each character console.log(c); } |
This function will output the same as the previous one. However, it has some advantages over the for loop, such as being shorter, simpler, and more readable. It also works well with strings that contain Unicode characters that are not in the basic multilingual plane (BMP), such as emojis or some foreign languages.
3. Using forEach() function
A third way is to use the split() function and the forEach() function of the array object. This function will first split the string into an array of single-character strings, using an empty string as the separator. Then it will loop through the array elements, using a callback function to perform some action on each character. For example, using the same string as before, we can iterate over its characters using split() and forEach() like this:
|
1 2 3 4 5 6 |
let str = "Hello"; str.split("").forEach(function(c) { // print each character console.log(c); }); |
This function will also output the same as the previous ones. However, it has some disadvantages over them, such as being slower, more memory-intensive, and less intuitive. We can also use the ES6 spread operator (…) to convert the string into an array of characters, and use the forEach() function on the array, and passes an arrow function as an argument. The arrow function takes one parameter, which is each character in the array, and prints it to the console.
|
1 2 3 4 5 6 7 |
let str = "Hello"; // Convert the string into an array of characters let chars = [...str]; // Execute a callback function for each character chars.forEach(char => console.log(char)); |
This function is more functional and expressive than a for loop or a for…of loop, but it requires an extra step of converting the string into an array.
That’s all about traversing a string in JavaScript.
Thanks for reading.
To share your code in the comments, please use our online compiler that supports C, C++, Java, Python, JavaScript, C#, PHP, and many more popular programming languages.
Like us? Refer us to your friends and support our growth. Happy coding :)