Question 211004 in Javascript Question posted in
A very good W3school tutorial can be found here.

Getting "Uncaught TypeError: Cannot read properties of undefined (reading 'push')" when attempting to run this simple JavaScript code

I am trying to make a simple karaoke queue app to help learn the basics of JavaScript and I’m not exactly sure where I am going wrong.

I have been tweaking it to try and get around this type error (for instance the whole let queue = inputArray bits I know it’s redundant), but the main goal is to have a queue that you can rotate and add new people while adding them after the last person to sign up, not necessarily the actual end of the qeueue. (I know I haven’t added a way to catch if someone is already in the queue yet) I am hoping someone has some insight as to where the type error is coming from… Thank you in advance!

var queueCounter = 0;
var singerQueue = [];

function rotateQueue(inputArray) {
  let queue = inputArray;
  let currentSinger = queue.shift();
  queue.Push(currentSinger);
  return queue;
}

function addNewSinger(inputArray, newSinger) {
  let queue = inputArray;
  if (singerQueue == undefined || singerQueue.length == 0) {
    queueCounter++;
    queue.push([queueCounter, newSinger]); // Here is TypeError
  } else {
    let lastSinger;
    queue.forEach(value => {
      if (value[0] == queueCounter) {
        lastSinger = value;
      }
    });
    if (lastSinger == undefined) {
      return 'ERROR';
    } else {
      let index = queue.indexOf(lastSinger);
      queueCounter++;
      queue.splice(index, 0, [queueCounter, newSinger]);
      return queue;
    }
  }
}

singerQueue = addNewSinger(singerQueue, 'Some Name');
singerQueue = addNewSinger(singerQueue, 'Another Name');
singerQueue = rotateQueue(singerQueue);
console.log(singerQueue);

// assuming this output should be:
// [[2, 'Another Name'], [1, 'Some Name']]
Tags:

2

Answers


  1. 0

    I think the issue you’re having is that you’re not returning anything from the first if block of the addNewSinger function. This would be the case if you’re assigning the returned value anywhere.

    It’s actually not necessary to return anything because array operations modify the array in place.

    Some other minor issues are:

    • use the === operator instead of ==. The first one checks that the types are the same.
    • if you have a return statement in the if block, the else block is unnecessary because if it matches the condition it will just return and not run the code afterward.
    • using var is generally not recommended as it uses function scope and not block scope which can cause issues.
    • the index you were adding new singers to was actually before the last added singer and not after.

    Here’s your code after some minor tweaks.

        var queueCounter = 0;
    var singerQueue = [];
    
    function rotateQueue(inputArray) {
        let currentSinger = inputArray.shift();
        inputArray.push(currentSinger);
        return inputArray;
    }
    
    function addNewSinger(inputArray, newSinger) {
        if (inputArray === undefined || inputArray.length === 0) {
            queueCounter++;
            inputArray.push([queueCounter, newSinger]);
        } else {
            let lastSinger;
            inputArray.forEach(value => {
                if (value[0] === queueCounter) {
                    lastSinger = value;
                }
            });
            let index = inputArray.indexOf(lastSinger) + 1;
            queueCounter++;
            inputArray.splice(index, 0, [queueCounter, newSinger]);
        }
    
        return inputArray;
    }
    Login or Signup to reply.
  2. 0

    It is not trivial to figure out what you wanted, but here is my guess

    Note I modify the array in place. You only need to copy and return if you want the original array intact, but since it is empty to begin with, we can dispense with all the copy and return

    const singerQueue = [];

const rotateQueue = () => {
  let currentSinger = singerQueue.shift();
  singerQueue.push(currentSinger);
};

const addNewSinger = (newSinger) => {
  if (singerQueue.length === 0) {
    singerQueue.push([1, newSinger]);
    return;
  }
  // this could also be simplified, but I assume you have a reason for this
  let lastEntryIndex = singerQueue.length;
  let lastSinger = singerQueue.find(([val, _]) => {
    console.log(val,lastEntryIndex)
    return val === lastEntryIndex
  });
  if (lastSinger === undefined) {
    console.log('ERROR');
  } else {
    singerQueue.splice(lastSinger[0], 0, [++lastEntryIndex, newSinger]);
  }
};

addNewSinger('Some Name');
console.log(singerQueue);
addNewSinger('Another Name');
console.log(singerQueue);
rotateQueue();
console.log(singerQueue);

// assuming this output should be:
// [[2, 'Another Name'], [1, 'Some Name']]
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search