why I get Uncaught TypeError: Cannot read property 'sequence' of undefined

Question

Here is a code to track and handle the progress of the user through my web app slides, everything seems to work fine till I reach the 9th execution of the function. at that point I get this error:

Uncaught TypeError: Cannot read property 'sequence' of undefined

Unfortunately, I don't know how to debug the code or realize what causes the error and I need a hand to fix it.

It seems that this for loop causes the error but why?

 // Fill planedSlides array
 for(let a = 1; a < current_slide; a++){    
        if(slides[a - 1].sequence == nextSequence && slides[a - 1].plan == true){
           console.log('a: ' + a)
           planedSlides.push(a);
        }
 }

 // Global Variables initiate at course start and modified throught the slides // sequence A =>> serie 1 ---- serie 1 ---- serie 3 ---- serie 4 var slides = [ { id: 1, difficulty: 2, performance: 20, guided_phrases: [], sequence: "A", plan: false, planned: 0 }, { id: 2, difficulty: 4, performance: 30, guided_phrases: [], sequence: "A", plan: true, planned: 0 }, { id: 3, difficulty: 4, performance: 40, guided_phrases: [], sequence: "A", plan: false, planned: 0 }, { id: 4, difficulty: 4, performance: 20, guided_phrases: [], sequence: "B", plan: true, planned: 0 }, { id: 5, difficulty: 4, performance: 50, guided_phrases: [], sequence: "B", plan: true, planned: 0 }, { id: 6, difficulty: 2, performance: 20, guided_phrases: [], sequence: "A", plan: false, planned: 0 }, { id: 7, difficulty: 4, performance: 30, guided_phrases: [], sequence: "A", plan: true, planned: 0 }, { id: 8, difficulty: 4, performance: 40, guided_phrases: [], sequence: "B", plan: false, planned: 0 }, { id: 9, difficulty: 4, performance: 20, guided_phrases: [], sequence: "B", plan: false, planned: 0 }, ]; var current_slide; // assigned at each slide start let lastViewedSlide; let lastSlide = slides.length; // last slide of the course let courseEnded = false; // Test Assignments current_slide = 1; // Global Variable of progress() let queue = []; // At each end of slide we just initiate the progress function.. function progress(e){ // Check if we are in intro or outro if(e){ switch(e){ // Intro slides with negative numbers incrementing.. slide 0 is the first slide.. case -1: goToSlide(-1); break; case -2: goToSlide(-2); break; case -3: goToSlide(-3); break; // Outro slides with positive number beyond 100.. case 101: goToSlide(101); break; case 102: goToSlide(102); break; case 103: goToSlide(103); break; // last intro slide executes progress like this: progress(1); case 1: // Go to first slide and generate queue const firstSequence = slides[0].sequence; let iterate = 0; while(slides[iterate].sequence == firstSequence){ iterate++ queue.push(iterate); } goToSlide(1); break; }; return; // return the whole progress function if we are in intro or outros.. } // Check if we have reached last course slide if(current_slide == lastSlide){ courseEnded = true; // it'll remain true }; if(courseEnded === true){ progressCourseEnded(); return; }; // initiate progress here queue.shift(); // Remove this slide from queue if(queue.length !== 0){ goToSlide(queue[0]); // if the queue is NOT empty go to the first element of queue } else { // If the queue is empty fill it.. fillQueue(); // Then view the queue slide by slide goToSlide(queue[0]); } // fillQueue function to generate queue again function fillQueue(){ let nextSequence = slides[current_slide].sequence; let iterate = current_slide; let planedSlides = []; let newSlides = []; // Fill planedSlides array for(let a = 1; a < current_slide; a++){ if(slides[a - 1].sequence == nextSequence && slides[a - 1].plan == true){ console.log('a: ' + a) planedSlides.push(a); } } // Fill newSlides array while(slides[iterate].sequence == nextSequence){ iterate++ newSlides.push(iterate) } // Finally fill queue queue = planedSlides.concat(newSlides); }; } // goToSlide function test function goToSlide(slide){ console.log(slide); current_slide = slide; //let player = GetPlayer(); //player.SetVar("goToSlide",slide); }; // Tests setTimeout(() => progress(1), 2000); // at slide intro setTimeout(() => progress(), 4000); // executed at end of slide 1 setTimeout(() => progress(), 6000); // executed at end of slide 2 setTimeout(() => progress(), 8000); // executed at end of slide 3 setTimeout(() => progress(), 10000); // executed at end of slide 4 setTimeout(() => progress(), 12000); // executed at end of slide 5 setTimeout(() => progress(), 14000); // executed at end of slide 2 setTimeout(() => progress(), 16000); // executed at end of slide 6 setTimeout(() => progress(), 18000); // executed at end of slide 7 .. This throws the error

Answer 1

I think, iterate in the following while loop is going out of bounds as iterate starts from slides array index 1:

// Fill newSlides array
while(slides[iterate].sequence == nextSequence){
   iterate++;
   newSlides.push(iterate);
}

I would have a console.log statement before and inside while statement.

Modify while loop

while(iterate < slides.length && slides[iterate].sequence == nextSequence){