.push() multiple objects into JavaScript array returns 'undefined'

Question

When I add items to the beats array and then console.log the User, I'm getting the correct number of items in the array. But when I check .length, I always get 1. Trying to call the index will always give me 'undefined' like so: Tom.beats[1] I think I'm missing something obvious, but this is beating me. I suspect that I'm misusing the .push method but I'm unsure. Any help is greatly appreciated! (using Chrome dev tools)

//The USER

function User(name, role){
    this.beats = [ ]; 

    this.name = name;
    this.role = role;

    // add beats to beats array

    this.addBeats = function(beats){ 
        return this.beats.push(beats);
   };

}

// Three New Instances. Three New Users.

var Mal = new User("Mal", "Rapper");
Mal.addBeats(["love", "cash"]);

var Dan = new User("Dan", "Producer");
Dan.addBeats(["cake", "dirt", "sally-mae"]);

var Tom = new User("Tom", "Producer");
Tom.addBeats(["Fun", "Little", "Samsung", "Turtle", "PC"]);

// Check for position in beats array

console.log(Tom.beats); 
console.log(Mal.beats); 
console.log(Dan.beats); 

console.log(Mal.beats[1]);
console.log(Dan.beats[1]);
console.log(Tom.beats[1]);

Answer 1

Array.push(...) takes multiple arguments to append to the list. If you put them in an array itself, this very array of "beats" will be appended.

Array.concat(...) is most likely not what you are looking for, because it generates a new array instead of appending to the existing one.

You can use [].push.apply(Array, arg_list) to append the items of the argument list:

this.addBeats = function(beats) { 
    return [].push.apply(this.beats, beats);
};

Answer 2

Spread operator

In environments that support the spread operator you may now do the following:

this.addBeats = function (beats) {
    return this.beats.push(...beats);
};

Or if you need more control for overwriting etc

this.addBeats = function(beats) { 
    return this.beats.splice(this.beats.length, null, ...beats);
};