I’ve come across an odd syntax looking through someone else’s code.
Has anyone ever seen a ternary statement used with the spread operator within an array?
let availableProducts = [item1, item2, item3, item4, …(product.available ? [this.getProduct(product)] : [])];
I don’t see this syntax anywhere I have looked, not even on MDN
this is the ternary operator, which is evaluated as an array, so then you have ...arrayFromTernaryOperator
the spread operator is used on the array that comes from the ternary operator
it is legit syntax, even if nested in a way that make comprehension difficult, and maybe it is not exactly best practice…
Thanks. Yep, I know it’s a ternary operator, it’s in my title 
But as I am new to using some ES6 syntax, I have not seen ...( tenary expression ) used this way – it looks like the spread operator (...) is a function passing the expression as an argument.
After all, would this work:
let item4Arr = item4( item1.available ? this.getItem(item) : []))?
Could you expand on your answer, specifically, why are the parentheses used?
For readabiltiy or what? Link for further understanding is also appreciated.
the parenthesis are used to surround the ternary operator and make it clear what is it that needs to be evaluated as a ternary operator
round parenthesis are not exclusive of function calls, they are used to surround expressions. like in maths when you solve equations from the inner parenthesis to the outer parenthesis.
that can’t be a function call as dots are not in the allowed characters for variable names
it depends, is item4 a function? is the ternary operator evaluated to something that has the value the function expect?
Thank you for detailed explanation!
No, the item4 in in my variable expression example is not a function. Sorry, I forgot to include the brackets in my comparision example, so I understand your question as to whether item4 was a function by how it looked.
In my example, I am trying to illustrate my query, I am asking would these two have the same result (i.e.: can I use grouping in JS) by comparing JS array syntax to ES6 spread syntax by substituting:
let item4Arr = [ item4( tenary ) ] (JS array)
for what looked like (to me)
the ...( tenary ) as a function
I haven’t tested that, but I’m clear on this now from your explanation.
I will read the Grouping operator link you provided as I didn’t understand the use of the parentheses, thus my confusion and this question.
As has been mentioned already, the parentheses can be used to group operations to help control the evaluation of the expression. An example from simple math is: 2 + 3 * 4 = 14, but (2 + 3) * 4 = 20. With this understanding, let’s try to evaluate the expression you asked about:
let availableProducts = [item1, item2, item3, item4, …(product.available ? [this.getProduct(product)] : [])];
On the left side of the statement, we are assigning the value returned by the right side to the variable named availableProducts. Easy enough. It’s the right side that requires thought.
The first thing I notice is that the outer square brackets [] surrounding the expression tell me that the expression is returning, or evaluating to, an array. Next, I see that item1 through item4 are simple variables and require no explanation. They will occupy the first 4 slots in the resulting array (indexes 0 - 3).
Next, I notice the spread operator ... and have to ask what is it spreading? It’s spreading the expression (product.available ? [this.getProduct(product)] : []). The opening parenthesis is matched by the closing parenthesis. Let’s remove them, and work on evaluating the remaining expression:
product.available ? [this.getProduct(product)] : []
Now it looks like a fairly simple ternary expression. What does it return, or evaluate to? If product.available is truthy, it returns an array containing the return value of the function call this.getProduct(product). Otherwise, it returns an empty array []. The result of the ternary operation is spread into the array. Ultimately, it is either going to add the item from getProduct or nothing.
arrays contains comma separated lists, that will still give error “item4 is not a function”. if you write [item4, ternary] it’s a different thing and that work, but as the ternary returns an array you will have nested array, the spread operator will have the result of the ternary operator spread inside the array, so to have a flat monodimensional array as result
@wmoore98 Thank You SO much for this explanation! It makes even MORE sense to me now the way you broke this out understandable blocks. 
@ILM thanks for further explaining why my comparison syntax would not work and why. It was my misunderstanding of the “grouping” syntax of this code that was throwing me off, as I’m thinking that anything directly preceding parentheses in JS made it a function. I understand now. 
I just had to create an account in FCC to say this explanation is one of the best pedagogical communications of approaching problem solving in programming I’ve ever seen. Thank you so much!