Confusing result

Question

function ABC(num, ...rest) {
return num < 5? "Yes" : [...ABC(rest)]
}

console.log(ABC(8, 5, 6, 7)); // outputs [ "Y", "e", "s" ]

Why is the result like this?

Answer 1

That's quite tricky but I may have got it, I'll try to explain all the process but let me know if you need further clarifications.

1. You call the function ABC() with the following arguments:
8 = num
5, 6, 7 = ...rest

2. Since 8 is greater than 5 the function evaluates the ternary operation (which is false in this case) and returns [...ABC([5, 6, 7])] recursively (IMPORTANT: Note that whatever value is going to be returned from ABC([5, 6, 7]) it will become in the form of an array since we have [...ABC([5, 6, 7])])

Now I think the key here is to understand that what ABC() is going to take as an argument for the "num" parameter is going to be [5, 6, 7] and NOT 5, 6, 7 (so we have one parameter as an array and not three distinct numbers passed as arguments);

In fact we have [ ...ABC(rest) ] and NOT [ ...ABC(...rest) ] and this is something you can clearly see if you print a couple times the parameters that are being passed (I recommend you to do it):

function ABC(num, ...rest) {
console.log("rest = " + rest)
console.log("num = " + num);
return num < 5 ? "Yes" : [...ABC(rest)]
}

Now you have:

num = [5, 6, 7]
rest = [] // empty!

And [5, 6, 7] < 5 returns false and so [...ABC(rest)] is going to be [...ABC([])]

At this point you have:
num = []
rest = []

And [] < 5 is in fact true and so it returns "Yes" as a simple string (and not as an array) however as we stated in the point (2): "Note that whatever value is going to be returned from ABC([5, 6, 7]) it will become in the form of an array" and that's why you have ["Y", "e", "s"].

Here you have it, IK that sounds confusing, I'll try to provide further explanations if needed.

Answer 2

You know that rest is an array and that ABC is a recursive function, right ?
So let's move step by step in it :
First call :
num = 8
rest = [5, 6, 7]
This is normal, and as 8 > 5, so it will return [...ABC(rest)], so let's see what's happening in the second call...
Second call :
num = [5, 6, 7]
rest = []
There is where the bug began, and as Neither [5, 6, 7] and 5 are equal nor greater nor less than (as the operands are an array and a number), num < 5 will return false, so the function will return [...ABC(rest)], let's move to the third and last call...
Last call :
num = []
rest = []
The JS language knows that [] is falsy value (can be evaluated as false), so for him, it is like you did this : false < 5, and as false may be evaluated as 0, so it is also like you did this : 0 < 5 which returns true, so the function will return "Yes"
The final result :
This ends to return : [...[..."Yes"]], and as ..."string" will split the characters (resulting this comma array : "s", "t", "r", "i", "n", "g")

Answer 3

So, [...[..."Yes"]] => [...["Y", "e", "s"]] => ["Y", "e", "s"] which is your result, You can check the explanation by adding the line below before the return stayement of ABC() :
console.log(num, rest, num < 5);
Bye, and if you follow me, I will be able go help you for and learn coding if you need 😉

Answer 4

Of course ! as rest was equal to the array, and as you gave the entire array as parameter to num (you can notice that there is only one param passed to ABC()), there is no second parameter to add to the rest array, so it remains empty
I think this code is what you wanted :
const ABC = (num, ...rest) => num < 5 ? "Yes" : num ? ABC(...rest) : "No";
console.log(ABC(6, 5, 9));
Or :
function(num, ...rest) {
return num < 5 ? "Yes" : num ? ABC(...rest) : "No"; // this code does the same thing as the one above
}

Answer 5

Maz dude, no need for further clarofications, you explained it all magnificently! I understand everything now. Thank you very much for taking time to help and for your awesome answer.

Answer 6

VCoder thanks a lot for help, however could you explain why after the first call num is [5, 6, 7], and rest is empty array?

Answer 7

VCoder thank you man for your great explanation. You really helped a lot.