Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
function multiplyAll(arr) {
var product = 1;
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < arr[i].length; j++) {
product * arr[i][j];
}
}
return product;
}
const result = multiplyAll([[1,2],[3,4],[5,6,7]]);
console.log(result);
Q1. What is arr[i]?
Q2. I just saw the arrays made like var multiplyAll = [[1,2],[3,4],[5,6,7]] so I am not getting the point of the Array made in the above code I specified?
If any one could help me with understanding this code then the help would be much appreciated because I don't want to get into the next question without getting my basics cleared.
Your function is called with a matrix, i.e. a 2-dimensional array. In JavaScript this is represented as an array of arrays. The outer array has one entry per row, and each row itself is an array of values.
Q1. what is arr[i] ?
It is one row in the matrix: the one with index i. It is an array, which is why you can specify another index for that array, like arr[i][j] It means: take the row at index i and from that array take the value at index j.
Q2. I just saw the arrays made like var multiplyAll = [[1,2],[3,4],[5,6,7]] so I am not getting the point of the Array made in the above code.
It creates a two dimensional array on-the-fly. While you can use such a literal to initialise a variable through the assignment operator (which you seem to understand), you can also provide it as argument for a function call. The corresponding parameter variable arr will then receive that as its initialisation value. So in a way it is also an assignment, just not with the = operator.
Pretty much what this function does is it receives a 2d-array (so that is an array of arrays). This means that arr[i] is an array itself; the first array in the outer array.
The concept of 2d arrays is quite useful, for example for grids or boards. Although at first glance they seem weird they are not too bad once you understand them. It helps to not cramp them into 1 line:
var multiplyAll = [
[1,2],
[3,4],
[5,6,7]
]
Q2: The array in multiplyAll([[1,2],[3,4],[5,6,7]]); is being created as a function argument and not assigned to a variable. When you use var array = [1, 2, 3] the [1, 2, 3] part creates the array, the var array = part is just used to assign the array to a variable. When the function multiplyAll is called the array [[1,2],[3,4],[5,6,7]] is being passed in as the first argument so inside the function it is assigned to arr.
Q1: arr[i] is used to reference the 'i'th element in arr. For example if I had var arr = [3, 5, 4] and I used arr[0] it would reference the 0th (first) element in arr or 3
arr[i] is an array within the array i being the index
this function doesn't do anything because of this line product * arr[i][j]; it's not changing the array just multiplying it by 1 "in the air"- without saving it to a variable
and then the function just returns product which is always 1, that's why this function is wrong it just returns 1
a function, takes in some sort of input, and does something, or returns something (this means that the function outputs something and you can use the function as part of an expression). this function returns the variable product.
the input is arr(the name doesn't matter) and it's supposed to be an array. An array is something like a list. for example [1, 2, 3] is a list of numbers. and you can get a specific index of that array by saying arr[0], because arrays start at 0, arr[0] is the value 1.
You can have an array of strings ["hello", "world"] and everything, so there's no reason way you can't have an array of arrays for example [[1, 2], [3,4]] in this array, arr[0] is the first value, which is [1,2], which itself is an array, meaning you can access the first value there by saying arr[0][0].
ok, about the function specifically:
a variable named product is declared with the value 1. it is a number.
and there's a loop that basically says "make a variable named i and set it to zero. keep looping and add 1 to the variable i until it i is not less than the length of the array anymore." this means that the first loop loops as many times as the length of the outer array.
and each time the variable i increases. and instead of a number arr[0], you can put a variable in the brackets, so it's arr[i]. remember arr is an array of arrays, so arr[i] is another array.
this should answer question 1
inside this loop, there is another loop, which loops through the "inner" array. the logic for this is the same, just with a variable named j. these two loops mean that for every loop of the outer for loop, the inner for loop loops through all of the "inner" array.
inside the 2 for loops, you now have access to both i and j. this goes through all possible values. so if you were to console.log(i,j), it would print something like this
0 0
0 1
1 0
1 1
2 0
2 1
2 3
if you do arr[i][j] now, when all of the loops are finished, it should go through all of the values. it multiplies product by that value. (i think it's supposed to be product *= arr[i][j]). in the end, it will return all values multiplied together
I think I probably repeated many things you already knew but I think this explains everything.
I'm trying to push a number to the end of an array without using the push function.
The array returns [1,2,3,10] but the array.length returns 8. I assume it's counting arr twice and the two numbers in 10 = 8. I don't know why.
function push(array, value){
arr=arr+','+value
return arr.length
}
var arr = [1, 2, 3]
console.log(push(arr, 10)) // expecting 4, get 8
+, when the left-hand side is not a number, will concatenate (possibly involving calling toString on the left-hand side first, like what's happening here). You can assign to the index at the length of the array instead:
function push(array, value) {
array[array.length] = value;
return array.length;
}
var arr = [1, 2, 3]
console.log(push(arr, 10))
var arr = [1,2,3];
arr[arr.length] = 4;
console.log(arr);
For completeness and because it hasn't been said yet you can also do this via array decomposition.
let array = [1, 2, 3];
array = [...array, 10];
console.log(array); // [1, 2, 3, 10]
Beware that this does write an entirely new array, but on the plus side it is immutable for the same reason!
Try running this in dev tools so you can see what exactly is happening. By adding a string to an array, you're converting it your original array to a string.
Not sure what you have against array.push() but I'd recommend using it.
Your code arr=arr+','+value is actually treating the array as a string. So the array starts as 1,2,3 (5 characters long) and then you add ,10 (3 more characters) to equal 8 characters.
If you really want to concatenate to the array without using JavaScript's built-in push() function, I'd suggest the splice() function as in this answer: How to insert an item into an array at a specific index (JavaScript)?
I've been studying recursive functions and I'm starting to understand them more or less. I was working on a free code camp challenge when I came across this and I do not understand it. A recursive function inside of a for loop:
function steamroller(arr) {
var newArr = [];
for (var i = 0; i < arr.length; i++) {
//If (i)th element is an array
if (Array.isArray(arr[i])) {
newArr = newArr.concat(steamroller(arr[i]));
console.log(newArr);
} else {
newArr.push(arr[i]);
}
}
return newArr;
}
steamroller([1, [2],[3, [[4]]]]);
//returns [1, 2, 3, 4]
The line I'm having a hard time understanding is:
newArr = newArr.concat(steamroller(arr[i]));
On that line, newArr is concatenated to what? The function is called again inside of the .concat method, right? But what happens to that for loop? Does the function call inside of the concat method force the loop to exit?
Here is a JSFiddle, I have each newArr logged to console, but I can't even follow it. The array is built up like so:
[1, 2]
[4]
[3, 4]
[1, 2, 3, 4] //Final
Thanks.
The steamroller function needs to loop over the indices in the array provided as the function parameter in order to ensure each index of the array is seen.
However, the original array has a number of indices, which in turn may contain multiple indices themselves, all of which need to be looped over in turn.
The call to concat is done only on the current index of the loop, meaning that the outcome is the "steamrollered" representation of the current index.
Step by step
The original array is passed in to the function: [1, [2],[3, [[4]]]]
The loop begins with the first index: 1, which is not an array, so it is pushed to the resulting array.
The next loop iteration's index is [2], which is an array, so is recursed.
The first recursive call to the function receives [2] and iterates over it.
The first iteration of this recursive call finds the index to be 2, which is not an array, so is pushed to the resulting array.
... continue ...
What we see is that as the nested arrays are iterated over using the recursive function, we always end up obtaining the internal integer values, no matter how nested.
It sounds like your mental muddling is mostly to do with the way "the stack" works.
A basic function call pauses execution at the point that it was called, and steps through each of the lines inside the function, then resumes outside of the function. And, you can have functions run inside of other functions; that much you may have already known.
The important thing to understand here is everything that the program is keeping track of. For starters, the program keeps track of what position it was being called from so it can "pop up one" in the stack, and continue. eg, at the midpoint of execution the stack may look like this (knowing which function/line it's at):
steamroller:10
steamroller:8
steamroller:8
main:20
Then its current loop hits "return"...
steamroller:8
steamroller:8
main:20
But that's not all - it also preserves each instance of the variables declared in that run of the function. You can, in fact, have about 5 or 6 or 5 million newArrs because those variables are declared on the stack, not in one singular spot.
And none of that information - the line number, or instance variables, are destroyed when it enters a function - it just saves its spot in the current function, and steps through the inner one.
Make sense?
First enter:
steamroller([1, [2],[3, [[4]]]])
First element isn't an Array, so newArr receives '1'.
Second element is an Array, so it calls steamroller again:
steamroller([1, [2],[3, [[4]]]])->steamroller(2)
It's not an array, so it will concat the element to a newArr, so it will simply concat 2 to an empty array. The function will return it, and concat the [2] to the newArr that contains [1], and now you have [1,2], and the console pops out the first line you saw on your fiddle.
I think you got it to what happens latter, but comment you still need explanation for what happens with 3 and 4.
With recursive functions is that the return of the console will be a mess because is different than a normal loop it need to finish the last position of the recursive tree before return all the values in the console, so if you put in one of the positions of the array with a more deeper position like [[[[3]]]] it will go to the end of the position and then it will return all the values, so if you put some kind of console to see how is working your recursive function you will receive some kind of tree, not like a normal loop, that's the danger with the recursive functions, and they can be pretty heavy to the memory speaking about CPU usage in a production server. so if you can perform this operation with doing any recursive function it will be better.
So if you change you code to
steamroller([1, [2],[3, [4]]]);
//the return will be
[1, 2]
[3, 4]
[1, 2, 3, 4]
Speaking about levels in the recursive tree
So if you put the [[3]] as the [[4]] the return will be in the same level of the tree.
steamroller([1, [2],[[3], [4]]]);
//the return will be
[1, 2]
[3]
[4]
[3, 4]
[1, 2, 3, 4]
Hi hope that can get you a better idea about the recursive functions
If we inspect the run without the recursion then:
i = 0 => arr[i] = 1 => newArr.push(arr[i]) => newArr = [1]
i = 1 => arr[i] = [2] => steamroller(arr[i]) = [2] => newArr = [1, 2]
i = 2 => arr[i] = [3, [[4]]] => steamroller(arr[i]) = [3, 4] => newArr = [1, 2, 3, 4]
There doesn't seem to be a way to extend an existing JavaScript array with another array, i.e. to emulate Python's extend method.
I want to achieve the following:
>>> a = [1, 2]
[1, 2]
>>> b = [3, 4, 5]
[3, 4, 5]
>>> SOMETHING HERE
>>> a
[1, 2, 3, 4, 5]
I know there's a a.concat(b) method, but it creates a new array instead of simply extending the first one. I'd like an algorithm that works efficiently when a is significantly larger than b (i.e. one that does not copy a).
Note: This is not a duplicate of How to append something to an array? -- the goal here is to add the whole contents of one array to the other, and to do it "in place", i.e. without copying all elements of the extended array.
The .push method can take multiple arguments. You can use the spread operator to pass all the elements of the second array as arguments to .push:
>>> a.push(...b)
If your browser does not support ECMAScript 6, you can use .apply instead:
>>> a.push.apply(a, b)
Or perhaps, if you think it's clearer:
>>> Array.prototype.push.apply(a,b)
Please note that all these solutions will fail with a stack overflow error if array b is too long (trouble starts at about 100,000 elements, depending on the browser).
If you cannot guarantee that b is short enough, you should use a standard loop-based technique described in the other answer.
Update 2018: A better answer is a newer one of mine: a.push(...b). Don't upvote this one anymore, as it never really answered the question, but it was a 2015 hack around first-hit-on-Google :)
For those that simply searched for "JavaScript array extend" and got here, you can very well use Array.concat.
var a = [1, 2, 3];
a = a.concat([5, 4, 3]);
Concat will return a copy the new array, as thread starter didn't want. But you might not care (certainly for most kind of uses this will be fine).
There's also some nice ECMAScript 6 sugar for this in the form of the spread operator:
const a = [1, 2, 3];
const b = [...a, 5, 4, 3];
(It also copies.)
You should use a loop-based technique. Other answers on this page that are based on using .apply can fail for large arrays.
A fairly terse loop-based implementation is:
Array.prototype.extend = function (other_array) {
/* You should include a test to check whether other_array really is an array */
other_array.forEach(function(v) {this.push(v)}, this);
}
You can then do the following:
var a = [1,2,3];
var b = [5,4,3];
a.extend(b);
DzinX's answer (using push.apply) and other .apply based methods fail when the array that we are appending is large (tests show that for me large is > 150,000 entries approx in Chrome, and > 500,000 entries in Firefox). You can see this error occurring in this jsperf.
An error occurs because the call stack size is exceeded when 'Function.prototype.apply' is called with a large array as the second argument. (MDN has a note on the dangers of exceeding call stack size using Function.prototype.apply - see the section titled "apply and built-in functions".)
For a speed comparison with other answers on this page, check out this jsperf (thanks to EaterOfCode). The loop-based implementation is similar in speed to using Array.push.apply, but tends to be a little slower than Array.slice.apply.
Interestingly, if the array you are appending is sparse, the forEach based method above can take advantage of the sparsity and outperform the .apply based methods; check out this jsperf if you want to test this for yourself.
By the way, do not be tempted (as I was!) to further shorten the forEach implementation to:
Array.prototype.extend = function (array) {
array.forEach(this.push, this);
}
because this produces garbage results! Why? Because Array.prototype.forEach provides three arguments to the function it calls - these are: (element_value, element_index, source_array). All of these will be pushed onto your first array for every iteration of forEach if you use "forEach(this.push, this)"!
I feel the most elegant these days is:
arr1.push(...arr2);
The MDN article on the spread operator mentions this nice sugary way in ES2015 (ES6):
A better push
Example: push is often used to push an array to the end of an existing
array. In ES5 this is often done as:
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// Append all items from arr2 onto arr1
Array.prototype.push.apply(arr1, arr2);
In ES6 with spread this becomes:
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);
Do note that arr2 can't be huge (keep it under about 100 000 items), because the call stack overflows, as per jcdude's answer.
Overview
a.push(...b) - limited, fast, modern syntax
a.push.apply(a, b) - limited, fast
a = a.concat(b) unlimited, slow if a is large
for (let i in b) { a.push(b[i]); } - unlimited, slow if b is large
Each snippet modifies a to be extended with b.
The "limited" snippets pass each array element as an argument, and the maximum number of arguments you can pass to a function is limited. From that link, it seems that a.push(...b) is reliable until there are about 32k elements in b (the size of a does not matter).
Relevant MDN documentation: spread syntax, .apply(), .concat(), .push()
Speed considerations
Every method is fast if both a and b are small, so in most web applications you'll want to use push(...b) and be done with it.
If you're handling more than a few thousand elements, what you want to do depends on the situation:
you're adding a few elements to a large array
→ push(...b) is very fast
you're adding many elements to a large array
→ concat is slightly faster than a loop
you're adding many elements to a small array
→ concat is much faster than a loop
you're usually adding only a few elements to any size array
→ loops are about as fast as the limited methods for small additions, but will never throw an exception even if it is not the most performant when you add many elements
you're writing a wrapper function to always get the maximum performance
→ you'll need to check the lengths of the inputs dynamically and choose the right method, perhaps calling push(...b_part) (with slices of the big b) in a loop.
This surprised me: I thought a=a.concat(b) would be able to do a nice memcpy of b onto a without bothering to do individual extend operations as a.push(...b) would have to do, thus always being the fastest. Instead, a.push(...b) is much, much faster especially when a is large.
The speed of different methods was measured in Firefox 88 on Linux using:
a = [];
for (let i = 0; i < Asize; i++){
a.push(i);
}
b = [];
for (let i = 0; i < Bsize; i++){
b.push({something: i});
}
t=performance.now();
// Code to test
console.log(performance.now() - t);
Parameters and results:
ms | Asize | Bsize | code
----+-------+-------+------------------------------
~0 | any | any | a.push(...b)
~0 | any | any | a.push.apply(a, b)
480 | 10M | 50 | a = a.concat(b)
0 | 10M | 50 | for (let i in b) a.push(b[i])
506 | 10M | 500k | a = a.concat(b)
882 | 10M | 500k | for (let i in b) a.push(b[i])
11 | 10 | 500k | a = a.concat(b)
851 | 10 | 500k | for (let i in b) a.push(b[i])
Note that a Bsize of 500 000 is the largest value accepted by all methods on my system, that's why it is smaller than Asize.
All tests were run multiple times to see if the results are outliers or representative. The fast methods are almost immeasurable in just one run using performance.now(), of course, but since the slow methods are so obvious and the two fast methods both work on the same principle, we needn't bother repeating it a bunch of times to split hairs.
The concat method is always slow if either array is large, but the loop is only slow if it has to do a lot of function calls and doesn't care how large a is. A loop is thus similar to push(...b) or push.apply for small bs but without breaking if it does get large; however, when you approach the limit, concat is a bit faster again.
First a few words about apply() in JavaScript to help understand why we use it:
The apply() method calls a function with a given this value, and
arguments provided as an array.
Push expects a list of items to add to the array. The apply() method, however, takes the expected arguments for the function call as an array. This allows us to easily push the elements of one array into another array with the builtin push() method.
Imagine you have these arrays:
var a = [1, 2, 3, 4];
var b = [5, 6, 7];
and simply do this:
Array.prototype.push.apply(a, b);
The result will be:
a = [1, 2, 3, 4, 5, 6, 7];
The same thing can be done in ES6 using the spread operator ("...") like this:
a.push(...b); //a = [1, 2, 3, 4, 5, 6, 7];
Shorter and better but not fully supported in all browsers at the moment.
Also if you want to move everything from array b to a, emptying b in the process, you can do this:
while(b.length) {
a.push(b.shift());
}
and the result will be as follows:
a = [1, 2, 3, 4, 5, 6, 7];
b = [];
If you want to use jQuery, there is $.merge()
Example:
a = [1, 2];
b = [3, 4, 5];
$.merge(a,b);
Result: a = [1, 2, 3, 4, 5]
I like the a.push.apply(a, b) method described above, and if you want you can always create a library function like this:
Array.prototype.append = function(array)
{
this.push.apply(this, array)
}
and use it like this
a = [1,2]
b = [3,4]
a.append(b)
It is possible to do it using splice():
b.unshift(b.length)
b.unshift(a.length)
Array.prototype.splice.apply(a,b)
b.shift() // Restore b
b.shift() //
But despite being uglier it is not faster than push.apply, at least not in Firefox 3.0.
as the top voted answer says, a.push(...b) is probably the correct answer taking into account the size limit issue.
On the other hand, some of the answers on performance seem out of date.
These numbers below are for 2022-05-20
from here
At appears that push is fastest across the board in 2022. That may change in the future.
Answers ignoring the question (generating a new array) are missing the point. Lots of code might need/want to modify an array in place given there can be other references to the same array
let a = [1, 2, 3];
let b = [4, 5, 6];
let c = a;
a = a.concat(b); // a and c are no longer referencing the same array
Those other references could be deep in some object, something that was captured in a closure, etc...
As a probably bad design but as an illustration, imagine you had
const carts = [
{ userId: 123, cart: [item1, item2], },
{ userId: 456, cart: [item1, item2, item3], },
];
and a function
function getCartForUser(userId) {
return customers.find(c => c.userId === userId);
}
Then you want to add items to the cart
const cart = getCartForUser(userId);
if (cart) {
cart.concat(newItems); // FAIL 😢
cart.push(...newItems); // Success! 🤩
}
As an aside, the answers suggesting modifying Array.prototype are arguably bad adivce. Changing the native prototypes is bascially a landmine in your code. Another implementation maybe be different than yours and so it will break your code or you'll break their code expecting the other behavior. This includes if/when a native implmentation gets added that clashes with yours. You might say "I know what I'm using so no issue" and that might be true at the moment and you're a single dev but add a second dev and they can't read your mind. And, you are that second dev in a few years when you've forgotten and then graft some other library (analytics?, logging?, ...) on to your page and forget the landmind you left in the code.
This is not just theory. There are countless stories on the net of people running into these landmines.
Arguably there are just a few safe uses for modifying a native object's prototype. One is to polyfill an existing and specified implementation in an old browser. In that case, the spec is defined, the spec is implemented is shipping in new browsers, you just want to get the same behavior in old browsers. That's pretty safe. Pre-patching (spec in progress but not shipping) is arguably not safe. Specs change before shipping.
This solution works for me (using the spread operator of ECMAScript 6):
let array = ['my', 'solution', 'works'];
let newArray = [];
let newArray2 = [];
newArray.push(...array); // Adding to same array
newArray2.push([...array]); // Adding as child/leaf/sub-array
console.log(newArray);
console.log(newArray2);
I'm adding this answer, because despite the question stating clearly without creating a new array, pretty much every answer just ignores it.
Modern JavaScript works well with arrays and alike as iterable objects. This makes it possible to implement a version of concat that builds upon that, and spans the array data across its parameters logically.
The example below makes use of iter-ops library that features such logic:
import {pipe, concat} from 'iter-ops';
const i = pipe(
originalArray,
concat(array2, array3, array4, ...)
); //=> Iterable
for(const a of i) {
console.log(a); // iterate over values from all arrays
}
Above, no new array is created. Operator concat will iterate through the original array, then will automatically continue into array2, then array3, and so on, in the specified order.
This is the most efficient way of joining arrays in terms of memory usage.
And if, at the end, you decide to convert it into an actual physical array, you can do so via the spread operator or Array.from:
const fullArray1 = [...i]; // pulls all values from iterable, into a new array
const fullArray2 = Array.from(i); // does the same
Combining the answers...
Array.prototype.extend = function(array) {
if (array.length < 150000) {
this.push.apply(this, array)
} else {
for (var i = 0, len = array.length; i < len; ++i) {
this.push(array[i]);
};
}
}
You can create a polyfill for extend as I have below. It will add to the array; in-place and return itself, so that you can chain other methods.
if (Array.prototype.extend === undefined) {
Array.prototype.extend = function(other) {
this.push.apply(this, arguments.length > 1 ? arguments : other);
return this;
};
}
function print() {
document.body.innerHTML += [].map.call(arguments, function(item) {
return typeof item === 'object' ? JSON.stringify(item) : item;
}).join(' ') + '\n';
}
document.body.innerHTML = '';
var a = [1, 2, 3];
var b = [4, 5, 6];
print('Concat');
print('(1)', a.concat(b));
print('(2)', a.concat(b));
print('(3)', a.concat(4, 5, 6));
print('\nExtend');
print('(1)', a.extend(b));
print('(2)', a.extend(b));
print('(3)', a.extend(4, 5, 6));
body {
font-family: monospace;
white-space: pre;
}
Another solution to merge more than two arrays
var a = [1, 2],
b = [3, 4, 5],
c = [6, 7];
// Merge the contents of multiple arrays together into the first array
var mergeArrays = function() {
var i, len = arguments.length;
if (len > 1) {
for (i = 1; i < len; i++) {
arguments[0].push.apply(arguments[0], arguments[i]);
}
}
};
Then call and print as:
mergeArrays(a, b, c);
console.log(a)
Output will be: Array [1, 2, 3, 4, 5, 6, 7]
The answer is super simple.
>>> a = [1, 2]
[1, 2]
>>> b = [3, 4, 5]
[3, 4, 5]
>>> SOMETHING HERE
(The following code will combine the two arrays.)
a = a.concat(b);
>>> a
[1, 2, 3, 4, 5]
Concat acts very similarly to JavaScript string concatenation. It will return a combination of the parameter you put into the concat function on the end of the array you call the function on. The crux is that you have to assign the returned value to a variable or it gets lost. So for example
a.concat(b); <--- This does absolutely nothing since it is just returning the combined arrays, but it doesn't do anything with it.
Another option, if you have lodash installed:
import { merge } from 'lodash';
var arr1 = merge(arr1, arr2);
Use Array.extend instead of Array.push for > 150,000 records.
if (!Array.prototype.extend) {
Array.prototype.extend = function(arr) {
if (!Array.isArray(arr)) {
return this;
}
for (let record of arr) {
this.push(record);
}
return this;
};
}
You can do that by simply adding new elements to the array with the help of the push() method.
let colors = ["Red", "Blue", "Orange"];
console.log('Array before push: ' + colors);
// append new value to the array
colors.push("Green");
console.log('Array after push : ' + colors);
Another method is used for appending an element to the beginning of an array is the unshift() function, which adds and returns the new length. It accepts multiple arguments, attaches the indexes of existing elements, and finally returns the new length of an array:
let colors = ["Red", "Blue", "Orange"];
console.log('Array before unshift: ' + colors);
// append new value to the array
colors.unshift("Black", "Green");
console.log('Array after unshift : ' + colors);
There are other methods too. You can check them out here.
Super simple, does not count on spread operators or apply, if that's an issue.
b.map(x => a.push(x));
After running some performance tests on this, it's terribly slow, but answers the question in regards to not creating a new array. Concat is significantly faster, even jQuery's $.merge() whoops it.
https://jsperf.com/merge-arrays19b/1