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){