add an input file with jquery to an array

Good day masters,

I have this code

    var taskArray = new Array();
    $('.task').change(function(event) {
        $('.task').each(function(){
            //alert(this.files[0]);
            taskArray.push(this.files);
        });
    });
    $('.btn').click(function(event) {
        console.log(taskArray)
    });

it works but it makes me an array in each change event what I'm trying to achieve is that it only allows 4 in this case images if when clicking there is only one image I can upload another one until I reach 4 or if 4 were chosen already do not allow more

I would like you to add it not to do another index

<button type="button"class="btn">Enviar</button>

<input type="file" class="task" multiple name="task[]" accept="image/png,image/jpeg" />