Build a search using a For Loop

18·6 2016

Lesson 3 part 2 of the Codecademy Javascript course runs you through creating a small piece of code that searches a string for your name. I'm going to post the final piece here and try to explain my way through it.

var text = "My name is Francois. I'm not the only person with the name Francois, but I'm most certainly the only Francois in this town.";

var myName = "Francois";
var hits = [];

for (var i = 0; i < (text.length); i++ ) {
    if ( text[i] === "F" ) {
        for (var j = i; j < (myName.length + i); j++ ) {
            hits.push(text[j]);
        }
    }
}

if ( hits.length === 0 ) {
    console.log("You name wasn't found");
}
else {
    console.log(hits);
}

Create 3 Variables

text is the strings we'll be searching
myName is what we're searching for. Adding prompt would allow the user to define the search term.
hits is an empty array. By the looks of it we're adding a variable to this array every time our search loop finds a positive result.

The For Loop

Start : var i = 0, so we're starting our search in the first column of some array.
End : i < (text.length), the loop will loop for as many times as there are characters in our string (var text =()).
Control: i++, we're adding 1 to i on each loop.

An `if` statement with its own For Loop.

The if statement is basically saying that if a character in column i of the string "text" is "F" (the first letter of my name) it should run the code in the curly brackets. It happens to be another for loop.

This loop creates a new variable j and makes it equal to variable i, we're starting our count at this number. The end is reached when j is equal to (the for loop runs as long as j is smaller than) the length of my name plus the current value of i. And we're adding 1 to j on each loop. Let's put that in more visual terms.

0	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15	16	17	18	19	20	21	22	23	24	25	26	27	28	29
M	y		n	a	m	e		i	s		F	r	a	n	c	o	i	s	,		s	o		t	h	e	r	e	.

So, the first loop is going to run until the we reach column 11, that's where text[29] = "F". At that point the second for loop kicks in. We start that loop with j being equal to 11. That loop will run as long as j (11) is smaller than the lenght of myName, which is 8 characters, plus the current position, which is 11, so as as long as j < 19 (in this instance). On each loop it will push the current letter to the empty array (hits.push(text[j]))), so when j is 11 it'll push "F", when j is 12 it'll push "r", and so forth. Nothing is happening to i, it's still 11. Once we reach j = 19 the for loop ends and we go back to looping the first for loop. On that loop i = 12 and the if fails because the character in column 12 is not an "F".

What's this "push" thing?

They don't really explain it well, but it appears adding .push pretty much works as follows, using hits.push(text[j]); as an example. We're taking the array hits, which in this case is empty to begin with, and pushing the the characters in column j of the text string into it. Basically appending it to what's already there. So it'll grow like this:

var hits = ["F"];
var hits = ["F", "r"];
var hits = ["F", "r", "a"];
etc.

Ending with an `if else` statement

Right at the end we check to see if anything was added to var hits=[], if it's empty we print "Your name wasn't found", but if something was pushed into it we print the entire array to the console. Problem is, if I added "Frank" to the string it would print that as well. Here's an alternative which creates nice output and only finds my name.

text = "My name is Francois. I'm not the only person 
with the name Francois, but I'm certainly the only Francois \
in this town, although I know a Frank who lives here.";

var myName = "Francois";
var hits = [];

var hits = text.match(/Francois/g);


if ( hits.length === 0 ) "Your name wasn't found!";
else console.log(hits);

Apparently Javascript has its own search command, text.match. I found this looking for a better solution. In between the brackets is a little regex, which I'm not going to pretend to know anything about. I do know that the g means it's doing a global search. That means it won't stop at the first result, but return every single match. And it populates the hits array by itself, no need for a loop. Nice.

You are here