2

Is it possible to use Array.push to add multiple values from a list? For example, currently what I'm having to do is:

Array.prototype.extend = function(arr) {
    for (let elem of arr) {
        this.push(elem);
    }
}
let x = [1,2,3];
let y = [4,5,6];
let z = [7,8,9];
x.push(y);
x.extend(z)
console.log(x);

Or, is there some way to pass the array as a single argument to the push method, or perhaps there's another Array method entirely that does this instead?

David542
  • 104,438
  • 178
  • 489
  • 842
  • 2
    `x.push.apply(x, y);` – Pointy Mar 07 '22 at 19:44
  • @Pointy that's pretty neat -- could you please explain how that works a bit? – David542 Mar 07 '22 at 19:45
  • 1
    @David542 `x.push` returns a `[object Function]`. `Function.prototype.apply` receives `this` and an argument list. –  Mar 07 '22 at 19:46
  • The `.apply()` method on the Function prototype takes two arguments: the value to be used for `this`, and an array. The array is treated as the function argument list. In modern JavaScript, it's the same as `x.push(... y)`, which I'd use if I didn't have to worry about Internet Explorer. – Pointy Mar 07 '22 at 19:46
  • 1
    `x.push(...y)`? – Bergi Mar 07 '22 at 19:46

3 Answers3

2

It's usually bad practice to Extend Native Types with Custom Methods. So instead of adding custom ones to the Array prototype you could:

const x = [1,2,3];
const y = [4,5,6];
const z = [7,8,9];
x.push(y);
x.push(...z)
console.log(x);

let x = [1,2,3];
const y = [4,5,6];
const z = [7,8,9];
x.push(y);
x = x.concat(z);
console.log(x);

The difference being - .concat() does not directly modify the original Array, therefore the x = x.concat( assignment syntax, and the Original x array being set as a let variable.

Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
  • As you realized though, `Array.prototype.concat()` isn't mutational, so you have to manually re-assign the value to the array. – code Mar 07 '22 at 20:05
  • Thank you @code exactly as you pointed out, and clearly visible from the `x = x.concat` - Added the respective `let` and `const` to make it more obvious. – Roko C. Buljan Mar 07 '22 at 20:06
  • 1
    @code yes yes! Added a paragraph to make it textually more explicit :) – Roko C. Buljan Mar 07 '22 at 20:12
1

You can push multiple arguments to Array.prototype.push and they'll all be pushed to our result array, so we can "convert" our array into multiple arguments using the ES6 spread syntax.

let x = [1,2,3];
let y = [4,5,6];
x.push(...y);
console.log(x);
code
  • 5,690
  • 4
  • 17
  • 39
  • yes except it's not an operator; it's not part of the expression grammar. – Pointy Mar 07 '22 at 19:47
  • @Pointy then what would it be? Google search "javascript spread" and (besides, coincidentally, MDN) all the results' titles are "spread operator - [...]". – code Mar 07 '22 at 19:50
  • It's part of JavaScript *syntax*, but like the `return` or `while` keywords, it's not an operator. An operator is a symbol like `+` or `*` or `[ ]` etc that figures into the expression grammar of a language. It's kind-of splitting hairs, but it really isn't an "operator". – Pointy Mar 07 '22 at 20:21
  • 1
    Terminology is annoying, but it's important. It's why surgeons and nurses know the names of all the tools, so that a doctor doesn't have to say "hand me the little squeezy thing". – Pointy Mar 07 '22 at 20:26
1

you can spread the array element like this

const x = [1,2,3];
const y = [4,5,6];
const z = [7,8,9];
x.push(...y);
x.push(...z)
console.log(x);
Ahmed Tarek
  • 318
  • 3
  • 9