How does this function work exactly?

Question

Trying to understand this scope exercise that I came across this site's exercise. How exactly is function doMultiplication being called within function writeIt? Every time I try to figure out this seemingly simple exercise, I get cross-eyed. Can you break it down to explain how this one works, please? Thanks in advance.

function writeIt(numTimes, multiple) {
  function doMultiplication(val, multiple) {
    i = val * multiple;
    return i;
  }

  for (let i = 0; i < numTimes; i++) {
    document.write(doMultiplication(i, multiple) + ' ');
  }
}

writeIt(5, 2);

EDIT - here's my understanding of what's going on so it can be clarified what I'm not understanding here ...

So, with the writeIt(5, 2) function, it means that 2 is being multiplied to val? But what is val here?

I get the for equation, and how numTimes is 5 ... I think I'm being thrown off by the val part?

@lascort, wrote in an edit, a clumsy way of trying to explain my misunderstanding ... — user273072545345, Sep 04 '17 at 20:28

score 1 · Answer 1 · answered Sep 04 '17 at 20:28

writeIt() takes two parameters - 5 corresponds to how many times the function should run, and 2 corresponds to the multiple. Essentially, you're going to list the multiples of 2 five times.

function doMultiplication(val, multiple) is a nested function - it takes the same multiple parameter as writeIt(), along with the i from the for loop. Essentially, this function multiples the target number by the index passed in by the upcoming for loop.

Next up is for (let i = 0; i < numTimes; i++). let is the ES6 equivalent of var (but with enclosing block-level scope); it simply sets up a new variable. This variable i starts at 0, and is looped over until it is equal to the number of times that the function should run (5). For each of the iterations of this loops, it runs the doMultiplication() function, passing the index as the value to multiply by. The output is written to the page with document.write().

Finally, writeIt(5, 2); simply calls the writeIt() function, and passes in the two parameters. Because it is not within a function itself, it gets executed as soon as the page is loaded.

The output is 0 2 4 6 8 because the i of the for loop starts at 0, so that's where you start multiplying from.

Hope this helps! :)

Just to add, let is not only an equivalent as it gives you block scoping which is an important distinction to consider — Vatsal, Sep 04 '17 at 20:32
Yep; I updated my answer to state that it gives enclosing block-level scope :) — Obsidian Age, Sep 04 '17 at 20:34
@ObsidianAge, thank you for the nested function link, and your explanation! I appreciate you taking the time to explain it. — user273072545345, Sep 04 '17 at 21:41

score 1 · Accepted Answer · answered Sep 04 '17 at 20:34

On Calling writeIt(5,2); following things happen -

writeIt(5,2) here numTimes = 5 & multiple = 2.

Now according to function declaration it moves to for loop -

for (let i = 0; i < numTimes; i++) {
    document.write(doMultiplication(i, multiple) + ' ');
}

TO -

for (let i = 0; i < 5; i++) {
    //document.write(doMultiplication(0, 2) + ' ');
    //document.write(doMultiplication(1, 2) + ' ');
    //document.write(doMultiplication(2, 2) + ' ');
    //document.write(doMultiplication(3, 2) + ' ');
    //document.write(doMultiplication(4, 2) + ' ');
}

Now we move to -

function doMultiplication(val, multiple) {
    i = val * multiple;
    return i;
}

Which is called from the for loop -

    //document.write(doMultiplication(0, 2) + ' ');

So doMultiplication(0, 2) => 0*2 => return 0; => 0 + ' ';

    //document.write(doMultiplication(1, 2) + ' ');

So doMultiplication(1, 2) => 1*2 => return 2; => 2 + ' ';

    //document.write(doMultiplication(2, 2) + ' ');

So doMultiplication(2, 2) => 2*2 => return 4; => 4 + ' ';

    //document.write(doMultiplication(3, 2) + ' ');

So doMultiplication(3, 2) => 3*2 => return 6; => 6 + ' ';

    //document.write(doMultiplication(4, 2) + ' ');

So doMultiplication(4, 2) => 4*2 => return 8; => 8 + ' ';

score 1 · Answer 3 · answered Sep 04 '17 at 20:37

I am still not sure about your question. But I will try to answer my best. Val is what is being passed from for loop ie i. So (val = i ). It can be better looked by printing console statements rather than just writing it on browser. May be below snippet will help

function writeIt(numTimes, multiple) {
  function doMultiplication(val, multiple) {
    console.log('val is ', val);
    const i = val * multiple;
    console.info ('i after manipulation ', i);
    return i;
  }

  for (let i = 0; i < numTimes; i++) {
    console.log('i is ', i);
    console.log(doMultiplication(i, multiple) + ' ');
   }
}

writeIt(5, 2);

One more thing, you should probably do is to make i a block scoped variable, rather than just having it a global variable.

Hope this helps.

Happy Learning

Vatsal

thank you for the console.log view. It was interesting looking at that! Appreciate you taking the time to explain it. — user273072545345, Sep 04 '17 at 21:42

How does this function work exactly?

3 Answers3