Откуда при рекурсии в консоли берутся B:1 и B:2?

Question

[fleshik]

Подскажите откуда в примере берутся B:1 и B:2

function Operation(counter){
            counter--
            console.log("A:", counter)
            
            if (counter != 0){
                Operation(counter)
            }
            console.log("B:", counter)
        }

      Operation(3)

После того как завершилось выполнение строки console.log("B:", counter) и вывелось B:0 не пойму что происходит дальше

Answer 1

[Stalker_RED]

А вот я вам отступов насыпал

Operation(3)
    // вывод А:2
    // сработал if, произошел вызов Operation(2)
    Operation(2)
        // вывод А:1
        // сработал if, произошел вызов Operation(1)
        Operation(1)
                     // вывод А:0
                     // if не сработал
                     // вывод В:0        
        // вывод В:1 из Operation(2)
    // вывод В:2 из Operation(3)

Comments

[fleshik]

я так понимаю что первым в стек попадает Operation(3) дальше в стек идет console.log("A:", counter) который срабатывае и сразу снимается со стека, а что попадает в стек следующим Operation(2) или console.log("B:", counter) ?

[Stalker_RED]

fleshik, если грубо, то вот как вы видите в консоли, так оно и исполняется.

function Operation(counter) {
  counter--;
  let call = 'вызов '.padStart((3-counter) * 4) +
    'третий,второй,первый'.split(',')[counter];
  
  console.log(call, "A:", counter);

  if (counter != 0) {
    console.log(call, "IF сработал, идем глубже");
    Operation(counter);
  }
  console.log(call, '(продолжение)', "B:", counter);
}

Operation(3);

Если точнее, то event loop - штука посложнее чем просто стек, там еще таймеры всякие, обработка событий, и прочая асинхронщина. Но пока вам проще считать что это стек вызовов.

[fleshik]

Stalker_RED, не могу понять что в примере первым попадает в стек Operation(2) или console.log("B:", counter)

[Stalker_RED]

fleshik, stack - это стопка. Буквально. Вот представляете себе стопку тарелок или стопку книг - это оно.

Представьте пустой стол, и на него вы поклали картонку с надписью
" выполнить Operation(3)" (у вас в коде это самая последняя строка)
Затем вы убираете эту картонку со стола и кладете на стол пачку инструкций которые соответствуют этой картонке. Пачка составлена так, что те инструкции которые нужно выполнить в начале - вверху, а те что в конце лежал внизу. Вы берете по одной эти картонки и стопка уменьшается:

1. уменьшить счетчик (стало 2)
2. вывести в консоль А:2
3. проверить не равен ли счетчик нулю (и если не равен, а так и есть)
4. выполнить Operation(2)
  // в этот момент у вас на столе еще осталась инструкция  "вывести в консоль В:2" но вы не можете ее выполнять прямо сейчас
  // вы добавляете ПОВЕРХ этой инструкции еще одну пачку, которая соответствует Operation(2)
  5. Уменьшить счетчик (стало 1)
  6. вывести в консоль А:1
  7. проверить не равен ли счетчик нулю (и если не равен, а так и есть)
  8. выполнить Operation(1)
        // в этот момент у вас на столе еще осталась инструкция  "вывести в консоль В:1" но вы не можете ее выполнять прямо сейчас
        // а еще ниже, под ней, все еще лежит картонка "вывести в консоль В:2"
        // но вы добавляете ееще пачку
        9. уменьшить счетчик (стало 0)
        10. вывести в консоль А:0
        11. проверить не равен ли счетчик нулю (ура, он равен!)
        12. вывести В:0
    13.  и вы добрались до картонки с предыдущей стопки "вывести В:1"
14. и вот последняя картонка "вывести В:2"

[Stalker_RED]

fleshik, вот еще раскраску добавил, может так понятнее будет

const meta = [
   {name: '%cпервый', style: 'color: red'},
   {name: '    %cвторой', style: 'color: green'},
   {name: '      %cтретий', style: 'color: blue'},
  ];

function Operation(counter) {
  counter--;
  const callMeta = meta[2-counter];

  console.log(callMeta.name, callMeta.style, "A:", counter);

  if (counter != 0) {
    console.log(callMeta.name, callMeta.style, "IF сработал, идем глубже");
    Operation(counter);
  }
  console.log(callMeta.name, callMeta.style, '(продолжение)', "B:", counter);
}

Operation(3);

Answer 2

[Rsa97]

А дальше происходит возврат из функции и продолжает выполняться предыдущий экземпляр функции.
А дальше происходит возврат из функции и продолжает выполняться предыдущий экземпляр функции.
И так пока стек вызовов не опустошится.

Answer 3

[senator]

Потому что, есть стек вызовов. Когда функция завершается полностью, она передаёт управление предыдущей запущенной функции, то есть программа продолжает выполняться после Operation(counter) и так пока стек не закончится

Answer 4

[iljaGolubev]

Если не нужно чтобы выводило B, добавьте return.

if (counter != 0){
                Operation(counter)
                return
            }