puppeteer with an async function, doesnt the scope of the variables [duplicate]

I have a test code with puppeteer, and I use some of page methods, such evaluate to run js on the page. The thing is, inside await page.evaluate(() => { }) my local scoped variables from node instances, as expectedly, cannot be accessed. I cannot access i or k for example, with page.evaluate() in the code below.

this is the exact error message Error [ReferenceError]: i is not defined at evaluate...

How can I use the variables in that scope ? or is there a different approach to doing this ? I am looping the alphabet for a test case with multiple for in each other.

const puppeteer = require('puppeteer');
const alphabet = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];


(async () => {
    const browser = await puppeteer.launch({ headless: false})
    const page = await browser.newPage()


    for(var i = 0; i < alphabet.length; i++){
        for(var j = 0; j < alphabet.length; j++){
            for(var k = 0; k < alphabet.length; k++){
                for(var l = 0; l < alphabet.length; l++){
                    
                    await page.evaluate(() => {  
                        document.querySelector('input[id="myId"]').value = alphabet[i] + alphabet[j] + alphabet[k] + alphabet[l];  
                    })
                } 
            } 
        }  
    }

})