why have to use [i + j] and j+1 in the if-statements?

March 10, 2023

I am trying to understand code solution to Find the Index of the First Occurrence in a String problem. I found this code online but I can quite wrap my head over the two ifs statements lines:
if (needle[j] !== haystack[i + j]) break;
if (j + 1 === needle.length)
can someone break it down for please?

let strStr = (haystack, needle) => {
    // we loop through the first string 
    for (let i = 0; i < haystack.length; i++) {
        // we loop through the second string
        for (let j = 0; j < needle.length; j++) {
            if (needle[j] !== haystack[i + j]) break;
            if (j + 1 === needle.length) {
                return i
            }
        }
    }
    return -1
};
strStr('sadbutsad', 'sad')

>Solution :

In order to understand what your code does, you first need to understand the break statement: break will exit the closest/nearest loop, i.e. the most indented one:

for (let a ...) { // for A
    for (let b ...) {  // for B
        break; // this will break for B
    }
    // after the break, the code execution will resume here
    console.log("more code here...")
}

Now, for your code. The 2 for statements iterate character by character, through the 2 strings: haystack and needle. Let’s give these strings some values, to better explain:

haystack = "hello world!!!"
needle = "world"

The first for (which uses the i variable), goes through the haystack, character by character. For each index i, it tries to match the needle string with some part of the haystack string, starting at index i:

i = 0:

          0123456789... (haystack indices)
haystack: hello world!!!
          ^i=0

needle:   world
          01234  (needle indices)

i = 1:

          0123456789... (haystack indices)
haystack: hello world!!!
           ^i=1

needle:    world
           01234  (needle indices)

i = 2:

          0123456789... (haystack indices)
haystack: hello world!!!
            ^i=2

needle:     world
            01234  (needle indices)

and so on… until i = 6:

          0123456789... (haystack indices)
haystack: hello world!!!
                ^i=6

needle:         world
                01234  (needle indices)

The second for actually compares the aligned portions of the string for equality, character by character, this time going character by character through the needle string. First, we need to compare the character at index 6 in haystack (the ‘w’) with the character at index 0 in needle (also the ‘w’):

          0123456789... (haystack indices)
haystack: hello world!!!
                ^i=6

needle:         world
                01234  (needle indices)
                ^j=0

If this equality fails, we stop the entire comparison (which is the second for, the one using the j variable, using the break statement). Next, we do this again for j=1:

          0123456789... (haystack indices)
haystack: hello world!!!
                ^i=6

needle:         world
                01234  (needle indices)
                 ^j=1

Now, we need to compare the 2 ‘o’s (at indices 7 and 1 in the 2 strings, respectively). To get the 7, we add i + j, and to get the 1, we just use j. Finally, if we check all the characters and they all match, we want to report the ‘succes’ (which we do by returning the index i in the haystack at which we matched the needle). We know that we finished checking all the characters if we reach the last character, which is needle.length - 1 (because length 5 means indices 0-4; last index is 4 = 5-1). This is what the if checks – if we reached the last character. If we do, it means that the break statement was never executed, so there wasn’t a single character that didn’t match.