Loop Multiplying Elements of Array

JavaScript
1

Sorry if this is blindingly obvious, but I can’t quite see why this works the way it does. I don’t feel like it’s as obvious an outcome as I’d expect to see. I’d be grateful if for an explanation!

I have the below function (from the first recursion lesson in JS) which will loop through an array and return the product of the first n elements of the array.

I would have thought it would multiply each element, add them together, then return the sum of those elements. However, it multiplies each element together (so 1 * 2 * 3 *4…etc) and returns this as the product. Why is this?


function multiply(arr, n) {
  var product = 1;
  for (var i = 0; i < n; i++) {
      product *= arr[i];
  }
  console.log(product);
}

multiply([1, 2, 3, 4, 5, 6], 3);

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36.

Challenge: Replace Loops using Recursion

Link to the challenge:

2

I am not sure what part of the loop you are expecting to sum array elements. Could you clarify which part you expect to do the adding?

3

I thought the product variable might have stored each iteration of the loop? To clarify; I think I’ve reached this conclusion after seeing the outcome of the function was a chained multiplication of each element. I know there is no explicit instruction contained within the function which tells it to sum each element. I guess I’m having a little difficulty breaking down and visualising exactly what the function is doing here. Is the product variable basically tracking the the point of the array to stop chaining together multiplications of each element?

4

Let’s try “unrolling” the loop for a specific example to help illustrate what’s going on.

Loop:

// Setup
let n = 3;
let myArray = [4, 2, 7];

let product = 1;
console.log("Before Loop:\nproduct: " + product + "\n");

// Loop
for (var i = 0; i < n; i++) {
  product *= myArray[i];

  // Here I'm just logging what's going on
  console.log("Iteration: " + i + "\nproduct: " + product + "\n");
}

Here is a link to run this code live: [https://repl.it/repls/RightRealIntegrationtesting#index.js]

Now, let’s look at an “unrolled” version of the loop:

// Setup
let n = 3;
let myArray = [4, 2, 7];

let product = 1;
console.log("Before 'Loop':\nproduct: " + product + "\n");

// Loop unrolled
// Iteration 0
product *= myArray[0];

// Here I'm just logging what's going on
console.log("Iteration: " + 0 + "\nproduct: " + product + "\n");

// Iteration 1
product *= myArray[1];

// Here I'm just logging what's going on
console.log("Iteration: " + 1 + "\nproduct: " + product + "\n");

// Iteration 2
product *= myArray[2];

// Here I'm just logging what's going on
console.log("Iteration: " + 2 + "\nproduct: " + product + "\n");

The loop is there to shorten up our code and let us do the same thing over and over again without typing so much. So whatever is inside the body of the loop, that’s what gets repeated. We have multiplication in the loop, so we keep multiplying values from the array to find the product.

Was that helpful or was I confusing? (It’s totally ok to tell me if I was confusing!)

1 Like
5

Thank you for the effort you’ve gone to to illustrate this, I really appreciate it.

I’m pretty much on board with how loops themselves function - that part I can understand :slight_smile: I think it’s the way in which the loop steps through the array and continues to multiply the elements together. That still seems a little unclear to me.

I’ll use your set-up here to explain what I thought might happen:

Ok, you want me to multiply 3 elements of the array. Here goes: product (1) * index 0 (4) = 4. And then product (1) * index 1 (2) = 2. And then product (1) * index 2 (7) = 7.

At this point, I’m not entirely sure where I thought the loop would go next. But thats how I saw product * myArray(n) working out. I think I’m getting hung up on how the function knows to combine and multiply the elements together. This probably sounds incredibly daft - I’m starting to think I’m going out of my way to confuse myself!

6

Looking at the function again, I think I was expecting the product variable to “forget” the calculation it had performed once it stepped through to the next iteration. Then (and please bear with me, as silly as this sounds), realising that probably doesn’t make much sense, I’ve thought the product variable might tally up each iteration of the calculation, returning with a sum total.

How does the loop know it should perform like this:
iteration 1 * iteration 2 * iteration 3 * iteration 4…

I think I’m doing my best to ‘rubber duck’ here and hope I have an internal eureka moment!

7

Yeah, this is what I was trying to get at with the unrolled version. You are updating the value saved in the variable product as you go.

product *= arr[i] says, in words "take the current value of product, multiply it by arr[i], and save the result back into product".

1 Like
8

Ahhh. Ok. Sorry, it makes complete sense now. I was mistakenly thinking product reverted back to 1 on each iteration. That’s so obvious!

1 Like
9

I’m glad chatting back and forth helped it click for you!

10

Thanks for your patience! I got there in the end! Thanks again :slight_smile:

1 Like