The example code in this exercise has a potential index out of bounds


#1

I was unable to figure out if there is a better way to report problems in an exercise, so I'm posting it here. This exercise as written in "What you'll be building" doesn't properly check the bounds of the text string when accessing it in the second loop. This problem will manifest if the first character of myName ever matches a character in text at an index of text.length-myname.length+1.

If, for example, text = "Hi, my name is Mel" and myName = "Melody", the second loop will read to an index of 3 beyond the end of the text string and the final output will be
[ 'M', 'e', 'l', undefined, undefined, undefined ]

As this is an educational site presumably teaching some beginner coders, I think this exercise should be modified to include a bounds check and a brief explanation about the possibility of reading beyond the end of an array or string.

Apologies if this post is in the wrong area. If so, could the moderators either move it or direct me where the correct place would be.


#2

@lazyelephant,

Could you please present the code,
you would have used....??


#3

It could be changed in either of the two loops to make sure the index never goes out of bounds.

  1. Change loop one by making sure (i + myName.length) is never greater than text.length.

    for(var i = 0; i < (text.length-myName.length); i++) {
      if (text[i] === "M") {
        // If we find it, add characters up to
        // the length of my name to the array
        for(var j = i; j < (myName.length + i); j++) {
    	hits.push(text[j]);
        }
      }
    }
  2. Change loop two by bounds checking that j is less than text.length

    for(var i = 0; i < text.length; i++) {
      if (text[i] === "M") {
        // If we find it, add characters up to
        // the length of my name to the array
        for(var j = i; j < (myName.length + i) && j < text.length; j++) {
    		hits.push(text[j]);
        }
      }
    }

The problem with the first option is that it will stop looking for matches before the end of the string. This wouldn't be a problem if the exercise were only searching for complete matches of myName, but since that isn't the case, I would choose option 2. It still searches for matches to the first letter of myName until the end of the text string, but won't go out of bounds even if it finds a partial match at the end of the string.

It just occured to me that the logical and operator && wasn't covered prior to this exercise (I think), so an option could be to use an if statement in the second loop instead.

    for(var i = 0; i < text.length; i++) {
	  if (text[i] === "M") {
        // If we find it, add characters up to
	    // the length of my name to the array
	    for(var j = i; j < (myName.length + i) ; j++) {
              if( j >= text.length) { break; }	
              hits.push(text[j]);
	    }
	  }
    }

#4

@lazyelephant,
As comment to your 3th option
Use a comparison operator ===
instead of your greater equal
like

if( j === text.length) { break; }

#5

Out of curiosity, as I don't have deep javascript knowledge, what would the benefit of using === instead of >= be?


#6

@lazyelephant,
The greater than situation will NEVER be reached as you are =break=ing
at the moment of being equal to

Just as hint
have a look at comparison and arithmetic operators
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators
and
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/length
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length


#7

@lazyelephant,

google search
== the Book ==
jquery [your question] site:developer.mozilla.org
CSS [your question] site:developer.mozilla.org
javascript [your question] site:developer.mozilla.org
[your question] site:jquery.com
[your question] site:getbootstrap.com

== discussions / opinions ==
jquery [your question] site:stackoverflow.com
CSS [your question] site:stackoverflow.com
javascript [your question] site:stackoverflow.com

== guidance ==
www.crockford.com
[your question] site:crockford.com
- - http://javascript.crockford.com/code.html <<<Javascript code convention's !!!!!!
- - http://javascript.crockford.com/survey.html

http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page
http://www.w3schools.com/jquery/trysel.asp


#8

Thanks for the links, I'll check them out.