如何理解这个JavaScript function的流程

Question

I'm a beginner who is learning JavaScript, after HTML/CSS. I'm at the very beginning of the book of Head First, struggling to understand this function.

How does this function work in every step? What happens starting from thingamajig(5)?

 function clunk(times) { var num = times; while (num > 0) { display("clunck"); num = num - 1; } } function thingamajig(size) { var facky = 1; clunkCounter = 0; if (size == 0) { display("clanck"); } else if (size == 1) { display("thunk"); } else { while (size > 1) { facky = facky * size; size = size - 1; } clunk(facky); } } function display(output) { console.log(output); clunkCounter = clunkCounter + 1; } var clunkCounter = 0; thingamajig(5); console.log(clunkCounter);

Answer 1

Here's what will happen when we run this:

• starting from the top, we define three different functions: clunk , thingamajig and display

• then we initialize a variable called clunkCounter and assign to it the number 0

• then we call the thingamajig function, passing in the argument 5 for the size parameter

• in thingamajig , we'll enter the else branch, and we'll end up going through the while loop 4 times, so we're effectively doing facky = 1 * 5 * 4 * 3 * 2 , so facky ends up with a value of 120

• then we call clunk(120)

• so we'll call display("clunk") 120 times

• display just logs "clunk" , and as a side-effect increments the clunkCounter , to record how many times we've done this

• then finally we log out clunkCounter , which will be 120

Why would we want to do this? I don't know. It's a very contrived example which demonstrates how to use if/else conditionals and incrementing variables. I wouldn't worry too much about what it all "means". If you haven't already, try running it in the browser console, and messing around to see what happens if you change the value you pass in to thingamajig .

Edit: Very well explained. Just to add a little, its calculating the Factorial of a number and printing its value at the end.

Answer 2

it starts with thingamajig(5);

function thingamajig(size) {
var facky = 1;
clunkCounter = 0;
if (size == 0) {
    display("clanck");
} else if (size == 1) {
    display("thunk");
} else {
    while (size > 1) {
        facky = facky * size;
        size = size - 1;
    }
    clunk(facky);
}

}

it takes "5" as parameter which means the "size" variable is 5 and starts to check the conditions in if blocks.

now lets see. the size is 5 so it will skip the first 2 part of the if block

`if (size == 0) {
display("clanck");
} else if (size == 1) {
display("thunk");
}`

and execute the else part

else {
        while (size > 1) {
            facky = facky * size;
            size = size - 1;
        }
        clunk(facky);
    }

this while loop will work until the size > 1 that means the size should be 1 to break the loop. there are some calculations in the while loop.

the "facky" variable changes but in the end the "size" variable will be "1" and the "facky" will be 96

when the "while loop" ends it will call clunk(facky);

that means

`function clunk(96) {
    var num = 96;
    while (96 > 0) {
        display("clunck");
        num = num - 1;
    }
}`

this function will call "display" function 96 times. and display function will console log "clunck" word for 96 times in the console.

in the end the clucnkCounter will be consoled log.

I hope i understand the question right. because answering this question in writing is hard.

Answer 3

• in thingamajig() function the value is passed 5.
• and its is checked whether its matches with 0 or 1, then its goes to else block, here is while loop. facky variable initial value is 1 but here its value is assign again so its become 5, and size is decremented so become 4
• again in while its greater than 1, again 5*4=20, facky become 20.
• while continue until size value is 1. when size value is 1, facky become 120.
• (5)x(4)x(3)x(2) = 120
• now clank function is called and times = 120
• here num = times, so num = 120
• while num > 0, it call another function display, which console.log(output). And here output = "clunk".
• And increase the value of clunkCounter by 1.
• Its keep on repeating until num = 0, and making clunkCounter = 120

Answer 4

-The code starts executing from the else code block in the function thingamajig(size) , since the if and else if statement are false.

else {
      while (size > 1) {
      facky = facky * size;
      size = size - 1; }
      clunk(facky); }
      }

In the else statement we have a while loop with a condition (size > 1) , size is 5 inserted as an argument for the size parameter when invoked thingamajig(5) ;.

The code loops till size = 1, when the condition becomes false .

1. LOOP 1, while size = 5, facky is = 1, facky = 1 * 5 = 5, size - 1 =size becomes 4.

2. LOOP 2, while size = 4, facky = 5, facky = 4 * 5 = 20, size - 1 = size becomes 3.

3. LOOP 3, while size = 3, facky = 20, facky = 3 * 20 = 60, size - 1 = size becomes 2.

4. LOOP 4, while size = 2, facky = 60, facky = 3 * 60 = 120, size - 1 = size becomes 1.

• Before loop stops The clunk() function is invoked and facky is passed as an argument to the times parameter, the function clunk starts executing.

  function clunk(times) { var num = times; while (num > 0) { display("clunk"); num = num - 1; } }

Here, times = facky = 120 = num, The while loop starts executing until num = 0 when the condition becomes false , in this loop the display() function is invoked with the string 'clunk' as an argument.

function display(output) {
         console.log(output); 
         clunkCounter = clunkCounter + 1;
      }

• The display('clunk') function starts executing.
• 'clunk' string is copied into the output parameter and it is logged into the console & clunkCounter variable increments. -The both continues logging string 'clunk' & incrementing clunckCounter, until num = 0, as num decrements from 120 till it gets to 0.

Results

console.log(output);

• 'clunk' strings logs into the console 120 times.

console.log(clunkCounter); -clunkCounter increments till its 120 so 120 is logged into the console.

Answer 5

The main thing to understand for those that still don't get it (like I did not understand when I first looked at this) is that "facky" changes values every time the while loop runs. So if you start with thingamajig(5), facky=5. But then size becomes "size=4" which makes it so you go through the while loop again. THIS TIME facky is going to be "facky=5x4" and therefore it is "facky=20". Then you go through the while loop again with "size=3" which makes it "facky=20x3" and there for it is "facky=60". One last time through the while loop and you get "facky=60x2" and therefore it is "facky=160".