Passing the table in functions after pressing the button

Passing the table in functions after pressing the button. How can I get this effect with all the array options (.shift) I am getting the following message: app.js:13 Uncaught TypeError: arr.shift is not a function at HTMLButtonElement.b (app.js:13)

const btn = document.getElementById('id1');
btn.addEventListener('click', b)
function a() {
    const arr = [1, 2, 3 , 4];
    const btn = document.getElementById('id1');
    btn.addEventListener('click', b);
 }
 a()

 function b(arr) {
    arr.shift();
    console.log(arr);
  }

Answer

By passing b in to the addEventListener function, it is being passed the event variable to the arr parameter. However, the event variable is not an array, so it does not have the array prototype functions. If you want to use the arr variable declared in a, you would need to use something like this:

function a() {
    const arr = [1, 2, 3 , 4];
    const btn = document.getElementById('id1');
    btn.addEventListener('click', (e)=>{b(arr)});
 }
 a()

Any event listener will always be passed an object describing the event.