Spread Syntax with Map and Filter

Question

I found this interesting problem and wanted to share with you guys. The question is :

[...[0,1,...[-1,0,1].map((x)=> x+1)].filter((x)=>x)),7]

I easily solved the first section upto the filter as [0,1,(-1+1),(0+1),(1+1)] = [0,1,0,1,2].

I was surprised to find the 7 hanging at the end. I thought it was some typo but copying the problem into the console gave me [1,1,2,7]. I couldn't quite understand 2 things.

why were the 0's left out of filter
what's the 7 doing there

0 is Javascript falsy, so the filter `(x)=>x` will remove it — mikeapr4, Mar 29 '17 at 18:48
What is the question? I don't see how code could be a question... — trincot, Mar 29 '17 at 18:48
You seem to be asking "Why does `7` return `7`?" If this is not the question you mean to ask, perhaps you could rephrase it... — lonesomeday, Mar 29 '17 at 18:49
`.filter` keeps only those elements for which `x` is "thruthy". `0` is not. `(x) => x` is shorthand for `function(x) { return x }` — Sergiu Paraschiv, Mar 29 '17 at 18:49
aww crap the 7 is part of array, I thought it was some weird stuffs added at the tail — Bijay Timilsina, Mar 29 '17 at 18:50
**[`...` is not an operator!](https://stackoverflow.com/questions/37151966/what-is-spreadelement-in-ecmascript-documentation-is-it-the-same-as-spread-oper/37152508#37152508)** — Felix Kling, Mar 29 '17 at 19:10

score 3 · Answer 1 · answered Mar 29 '17 at 18:54

The first operation here is Array#map [-1, 0, 1].map(x => x + 1) which basically adds 1 to each element, returning [0, 1, 2] array.
Next one is Array#filter operation, [0, 1, ...[0, 1, 2]].filter(x => x) which actually returns a new array, without every falsy value (false, 0, undefined, null, "") out of the array.
The last operation looks like [...[1, 1, 2], 7] and gets rid of the nested array with the spread operator returning [1, 1, 2, 7].

score 1 · Answer 2 · answered Mar 29 '17 at 18:51

[...[0,1,...[-1,0,1].map((x)=> x+1)].filter((x)=>x),7] broken down:

[-1,0,1].map((x)=> x+1) // [0,1,2]

[0,1,...[-1,0,1].map((x)=> x+1)] // [0,1,0,1,2]

[0,1,...[-1,0,1].map((x)=> x+1)].filter((x)=>x) // [1,1,2]

[...[0,1,...[-1,0,1].map((x)=> x+1)].filter((x)=>x),7] // [1,1,2,7]

score 0 · Answer 3 · answered Mar 29 '17 at 18:50

this part [-1,0,1].map((x)=> x+1) results in this list [0,1,2] then this part [0,1,...[-1,0,1].map((x)=> x+1)] results in [0,1,1,2] which after the filter part drops the 0 so it results into [1,1,2], finally the last element of the list is 7. So, altogether the result is [1,1,2,7]

score 0 · Answer 4 · answered Mar 29 '17 at 18:59

The code evaluates in the following steps:

[...[0, 1, ...[-1, 0, 1].map((x)=>x+1)].filter((x)=>x)), 7] // map
[...[0, 1, ...[(x=>x+1)(-1), (x=>x+1)(0), (x=>x+1)(1)]].filter((x)=>x)), 7] // function application
[...[0, 1, ...[0, 1, 2]].filter((x)=>x)), 7] // spread
[...[0, 1, 0, 1, 2].filter((x)=>x)), 7] // filter
[...[...(x=>x)(0)?[0]:[], ...(x=>x)(1)?[1]:[], ...(x=>x)(0)?[0]:[], ...(x=>x)(1)?[1]:[], ...(x=>x)(2)?[2]:[]], 7] // function application
[...[...0?[0]:[], ...1?[1]:[], ...0?[0]:[], ...1?[1]:[], ...2?[2]:[]], 7] // conditional
[...[...[], ...[1], ...[], ...[1], ...[2]], 7] // spread (from filter)
[...[1, 1, 2], 7] // spread
[1, 1, 2, 7]

Spread Syntax with Map and Filter

4 Answers4