unexpected behavior js for loop

Question

I am creating a wordsearch generator with JavaScript I created the function that places the word, it is working as expected but I created a list of words to add them to the wordsearch in a forloop the problem it's that it just adds one word

this is the code I wrote

function placeWord(p,grid) {

    for (i=0;i<p.length;i++) {

    grid[p[i][0]][p[i][1]] = p[i][2]

    }

}

function tryPlaceWord(word, grid, width, height) {

    let s = 0

    var directions = [[0,1], [1,0], [1,1]]

    var choices = [word, word.split("").reverse().join("")]

    var word = choices[Math.floor(Math.random() * 2)]

    while (s<2) {

       var direction = directions[ Math.floor(Math.random() * 3)   ]

       var x = Math.floor(Math.random() * width)

       var y = Math.floor(Math.random() * height)

       var ystart = y+word.length > height ?  y-word.length:y  

       var xstart = x+word.length > width ?  x-word.length:x

       var positions = []

       for (i=0;i<word.length;i++) {

           if (xstart < 0) {

           break

           }

       if (ystart<0) {

           break

      }

          var xpos = xstart + i * direction[1]

      var ypos = ystart +i * direction[0]

      pos = grid[ypos][xpos]

      if (pos == "*" || pos == word[i]) {

        positions[i] = [ypos, xpos, word[i]]

    } else {

        positions.length = 0

        break

    }

       }

       if (positions.length == word.length) {

       placeWord(positions,grid)

       console.log(positions)

       return true 

       }

    s+=1

    }

}

function show(grid) {

    for (i=0;i<grid.length;i++) {

    console.log(grid[i].join(" "));

    }

}

function makeGrid(width, height) {

    var grid = []

    for (i=0;i<height;i++) {

    grid[i] = []

    for (y=0;y<width;y++) {

        grid[i][y] = "*"

    }

    }

    return grid

}

function main() {

    var width = 15

    var height = 15

    var grid = makeGrid(width, height)

    var words = ["alexander", "camila", "pedro", "luis", "maria"]

    for (i=0;i<words.length;i++) {  

    console.log(words[i])

        tryPlaceWord(words[i],grid,width, height)

    }

    show(grid)

}

main()

any help would be really appreciated

Answer 1

Gooood afernoon

TLDR; You need to initialize your for-loop counters with the let-keyword

---

when you write

for(i = 0; i < 5; i++) { /* do something */ }

it get's interpreted as

for (var i = 0; i < 5; i++) { /* do something */ }}

A simple example of why that is annoying in your case is becase var is stored at the outer most lexical scope.

console.log(i) // undefined

for (var i = 0; i < 5; i++) { /* do something */ }

console.log(i) // 5

// i = 5 here, so the next loop reads that '5 < 5' -> false, so it doesn't execute

for (var i = 0; i < 5; i++) { /* do something */ }

when using let i does not get hoisted and is bound to the scope of the for-loop

console.log(i) // undefined

for (let i = 0; i < 5; i++) { /* do something */ }

console.log(i) // undefined

// the next for loop initializes i to 0 again
for (let i = 0; i < 5; i++) { /* do something */ }