# Confused. don't understand - \[\].concat.apply(\[\],arr)

**URL:** <https://forum.freecodecamp.org/t/confused-dont-understand-concat-apply-arr/15180>\
**Category:** General\
**Created:** [June 28, 2016, 7:50am UTC](https://forum.freecodecamp.org/t/confused-dont-understand-concat-apply-arr/15180 "2016-06-28T07:50:10Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![jaytsecan](https://avatars.discourse-cdn.com/v4/letter/j/13edae/32.png) [@jaytsecan](https://forum.freecodecamp.org/u/jaytsecan)\
**Post date:** [June 28, 2016, 7:50am UTC](https://forum.freecodecamp.org/t/confused-dont-understand-concat-apply-arr/15180/1 "2016-06-28T07:50:10Z")

</div>

Hi,

I’m on one of the algorithm challenges - “Sorted Union”, where one of the things we have to do is flatten an array of arrays.

E.g.  
\> var arr = [[0],[1],[2],[3],[4],[5]];  
\> var rslt = Array.concat.apply([],arr);  
\> console.log(rslt) // [0,1,2,3,4,5]

It seems straightforward but I’m missing something. How does this work?  
I looked at the documentation for **Array.prototype.concat()** on [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\_Objects/Array/concat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat), but still didn’t understand the above code.

I understand a.concat(b) produces [a,b] (e.g. [1,2].concat([3,4]) === [1,2,3,4]),  
but how/why does it flatten the array one level?

**i.e. Why is Array.concat.apply( [], [1, [2], [3, 4]] ) === Array.concat(1, [2], [3,4]) ??? (result is [1,2,3,4]) in both cases**

Thanks,

- Jay

---

<div class="post-metadata">

**Author:** ![marzelin](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/marzelin/32/8442_2.png) [@marzelin](https://forum.freecodecamp.org/u/marzelin)\
**Post date:** [June 28, 2016, 8:15am UTC](https://forum.freecodecamp.org/t/confused-dont-understand-concat-apply-arr/15180/2 "2016-06-28T08:15:41Z")

</div>

there is also `apply` method used there.

`Array.prototype.concat.apply([1,2], [[3],[4]]) === [1,2,3,4]`  
is equal to  
`[1,2].concat([3],[4]) === [1,2,3,4]`  
or in es2015  
`[1,2].concat(...[[3],[4]]) === [1,2,3,4]`

read more:  
[apply](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply)  
[spread operator](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Spread_operator)

---

<div class="post-metadata">

**Author:** ![Selhar1](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/selhar1/32/104025_2.png) [@Selhar1](https://forum.freecodecamp.org/u/Selhar1)\
**Post date:** [June 28, 2016, 8:15am UTC](https://forum.freecodecamp.org/t/confused-dont-understand-concat-apply-arr/15180/3 "2016-06-28T08:15:52Z")

</div>

Here is a link that might help you: [https://www.reddit.com/r/learnjavascript/comments/3coq4g/how\_does\_concatapply\_work/](https://www.reddit.com/r/learnjavascript/comments/3coq4g/how_does_concatapply_work/)

It’s a property from concat() that does the heavy lifting, “apply” just executes the method.

---

<div class="post-metadata">

**Author:** ![jaytsecan](https://avatars.discourse-cdn.com/v4/letter/j/13edae/32.png) [@jaytsecan](https://forum.freecodecamp.org/u/jaytsecan)\
**Post date:** [June 28, 2016, 8:45am UTC](https://forum.freecodecamp.org/t/confused-dont-understand-concat-apply-arr/15180/5 "2016-06-28T08:45:32Z")

</div>

So what you’re saying is that the **concat** function on arrays (i.e. **Array.protype.concat ([x]) will always reduce [x] by 1 array level** i.e. if arr = [1,2] it will become 1,2 and if arr = [[1,2]] it will become [1,2]).

If I understand correctly, this is a **feature of the JavaScript “concat” function** - i.e. this happens automatically - but only when using apply to call the function.  
So, Array.prototype.concat.apply(this, [x]) === this.concat([x]), where “this” is the first argument to the concat function.

Is my understanding correct?

Interesting, I have not seen this feature in other languages.

Thank you @marzelin and @Selhar1

---

<div class="post-metadata">

**Author:** ![jaytsecan](https://avatars.discourse-cdn.com/v4/letter/j/13edae/32.png) [@jaytsecan](https://forum.freecodecamp.org/u/jaytsecan)\
**Post date:** [June 28, 2016, 8:49am UTC](https://forum.freecodecamp.org/t/confused-dont-understand-concat-apply-arr/15180/6 "2016-06-28T08:49:02Z")

</div>

Ahh, thanks @MarkoN95, this makes more sense now.

---

<div class="post-metadata">

**Author:** ![jaytsecan](https://avatars.discourse-cdn.com/v4/letter/j/13edae/32.png) [@jaytsecan](https://forum.freecodecamp.org/u/jaytsecan)\
**Post date:** [June 28, 2016, 9:01am UTC](https://forum.freecodecamp.org/t/confused-dont-understand-concat-apply-arr/15180/8 "2016-06-28T09:01:40Z")

</div>

Ok, I think I got it.

Array.prototype.concat. **_call_** (this, [x]) === this.concat([x]),

and

Array.prototype.concat. **_apply_** (this, [x]) === this.concat(x).

And this is so because “ **apply** ” takes an **array** of arguments and treats each element of that array as a single argument.

So, an unintended consequence of “apply” is to unravel one level of the array - and this has absolutely nothing to do with the concat function which simply concatenates 2 values.

Sorry if I’m beinig overly redundant and simplistic in my understanding (still trying to learn JavaScript) 🙂

---

<div class="post-metadata">

**Author:** ![Resease](https://avatars.discourse-cdn.com/v4/letter/r/f6c823/32.png) [@Resease](https://forum.freecodecamp.org/u/Resease)\
**Post date:** [October 19, 2018, 8:59pm UTC](https://forum.freecodecamp.org/t/confused-dont-understand-concat-apply-arr/15180/10 "2018-10-19T20:59:00Z")

</div>

Thanks for the link [Selhar1](http://forum.freecodecamp.org/u/Selhar1).  
In a few words:

_Apply Structure_: myFunction.apply(thisVal,argsArray):

- myFunction: Just the function to be executed.
- thisVal: The context.
- argsArray: The arguments from myFunction. Where argsArray = [arg1,arg2,arg3,…]

**myFunction.apply(thisVal,argsArray) == thisVal.myFunction(arg1,arg2,arg3,…)**

_**Array.prototype.concat([],[[1,2],[3,4]]) == [].concat([1,2],[3,4])**_

A new use for Apply 😉

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 16, 2021, 11:33am UTC](https://forum.freecodecamp.org/t/confused-dont-understand-concat-apply-arr/15180/11 "2021-01-16T11:33:16Z")

</div>


