Strange javascript error makes no sense, in for loop userArray[i] where' i = 0 and = undefined' but 'userArray[0]' is fine?

Question

I have never experienced an error like this before, my brain cannot compute how it makes sense:

 const getProfileImages = async () => {
    for (let i = 0; i <= recommendedUsers.length; i++) {
        console.log(recommendedUsers[0].userId)
        const response = await UserService.downloadProfileImage(recommendedUsers[i].userId)
            .then(res => res.blob())
            .then(blob => {
                const imgBlob = blob;
                const reader = new FileReader();
                reader.readAsDataURL(imgBlob);
                reader.onloadend = () => {
                    const base64data = reader.result;
                    images[i] = base64data;
                };
            });
    }
}

This method as is returns 'Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'userId') at getProfileImages (SwipeCard.js:50:1)'

However, when I comment out the const response section:

const getProfileImages = async () => {
    for (let i = 0; i <= recommendedUsers.length; i++) {
        console.log(recommendedUsers[0].userId)
        /*
        const response = await UserService.downloadProfileImage(recommendedUsers[i].userId)
            .then(res => res.blob())
            .then(blob => {
                const imgBlob = blob;
                const reader = new FileReader();
                reader.readAsDataURL(imgBlob);
                reader.onloadend = () => {
                    const base64data = reader.result;
                    images[i] = base64data;
                };
            });
    }
    
         */
}

}

The page renders fine (obviously without images) and the console.log(recommendedUsers[0].userId) statement prints out the user id's correctly. If I try to console.log(recommendedUsers[i].userId) it suddenly has a meltdown again.

Are recommendedUsers[0] and recommendedUsers[i] where i = 0 not equivalent?