Javascript ES6 recursion function

Question

I wonder how does this recursion function return numbers in this empty array(return n < 1 ? []) without pushing from [n, ...countdown(n - 1)], or how does it push? maybe I don't understand that es6 syntax

function countdown(n){ return n < 1 ? [] : [n, ...countdown(n - 1)] }

console.log(countdown(5)) log: [5, 4, 3, 2, 1]

You should indeed just read what the spread operator does. PS: The function is not a good way to generate that desired result. Try e.g. countdown(20000) vs Array.from({ length: 20000 }, (_, i) => 20000 - i), but i guess its purpose is to showcase ES6 features? — ASDFGerte
– ASDFGerte, Commented Nov 6, 2020 at 18:06

Heartbit · Accepted Answer · 2020-11-07 14:20:38Z

3

The call stack steps that produce the result:

1. n = 5 => [5, ...countdown(4)]
2. n = 4 => [5, 4, ...countdown(3)]]
3. n = 3 => [5, 4, 3, ...countdown(2)]]
4. n = 2 => [5, 4, 3, 2, ...countdown(1)]
5. n = 1 => [5, 4, 3, 2, 1, ...countdown(0)]
6. n = 0 => [5, 4, 3, 2, 1, ...[]]

So the ... is spreading syntax notation that works like concat for two arrays.

Another schema could be like:

1. n = 5 => [5, ...countdown(4)]
2. n = 4 => [5, ...[4, ...countdown(3)]]
3. n = 3 => [5, ...[4, ...[3, ...countdown(2)]]]
4. n = 2 => [5, ...[4, ...[3, ..[2, ...countdown(1)]]]]
5. n = 1 => [5, ...[4, ...[3, ...[2, ...[1, ...countdown(0)]]]]]
6. n = 0 => [5, ...[4, ...[3, ...[2, ...[1, ...[]]]]]]

Think about that like function call stack from left to right:

x1( x2( x3() ) ) => ...( ...( ...(n) ) )

edited Nov 7, 2020 at 14:20

answered Nov 6, 2020 at 18:14

Heartbit

1,8542 gold badges16 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Leonardo Over a year ago

Do you mean this?

1. n = 5 => [5, ...countdown(4)] 2. n = 4 => [5, [4, ...countdown(3)]] 3. n = 3 => [5, [4, [3, ...countdown(2)]]] 4. n = 2 => [5, [4, [3, [2, ...countdown(1)]]]] 5. n = 1 => [5, [4, [3, [2, [1, ...countdown(0)]]]]] 6. n = 0 => [5, [4, [3, [2, [1, ...[]]]]]]

Heartbit Over a year ago

The next call will return [n, ...countdown(n-1)] so the result of each call is an array and the return value will be concatinated with last one by spreading syntax nottion (...)

apsillers · Accepted Answer · 2020-11-06 20:10:11Z

3

The ...-prefix syntax in this specific context (called the "spread syntax") puts the elements of the ...-prefixed array directly into the surrounding array.

[ 5, ...[4, 3, 2, 1] ]

is the same as

[5, 4, 3, 2, 1]

That's just what is happening here. The return values of countdown (from base case up to countdown(5)) look like:

[]
[1, ...[]]             => [1]
[2, ...[1]]            => [2, 1]
[3, ...[2, 1]]         => [3, 2, 1]
[4, ...[3, 2, 1]]      => [4, 3, 2, 1]
[5, ...[4, 3, 2, 1]]   => [5, 4, 3, 2, 1]

edited Nov 6, 2020 at 20:10

answered Nov 6, 2020 at 18:10

apsillers

116k18 gold badges248 silver badges249 bronze badges

Collectives™ on Stack Overflow

Javascript ES6 recursion function

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related