# Need help with this Loop

**URL:** <https://forum.kirupa.com/t/need-help-with-this-loop/648213>\
**Category:** Uncategorized\
**Created:** [July 9, 2021, 1:51am UTC](https://forum.kirupa.com/t/need-help-with-this-loop/648213 "2021-07-09T01:51:05Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![stekon](https://avatars.discourse-cdn.com/v4/letter/s/9fc29f/32.png) [@stekon](https://forum.kirupa.com/u/stekon)\
**Post date:** [July 9, 2021, 1:51am UTC](https://forum.kirupa.com/t/need-help-with-this-loop/648213/1 "2021-07-09T01:51:05Z")

</div>

Hey all, my name is State and I am new in this forum and also a beginner in programming. I read Kirupa Chinnathambi’s book on JavaScript, but could not find an example of how to code the code below. I will highly appreciate it if I can get help to understand how to go about it. Thanks in advance for your help.

```
let numbers = [
469,
755,
244,
245,
758,
450,
302,
20,
712,
71,
456,
21,
398,
339,
882,
848,
179,
535,
940,
472,
];
document.write("<h1>Array Analyzer</h1>")
document.write("<h3>Now analyzing the array: " + numbers + "</h3>");
document.write("<ul>");

```

👇  
let largestNumber;

Then how to render each li:  
document.write(“

- Largest Number: " + largestNumber + “
”);  
etc…  
document.write(”");

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [July 9, 2021, 3:13am UTC](https://forum.kirupa.com/t/need-help-with-this-loop/648213/2 "2021-07-09T03:13:16Z")

</div>

There are two parts to this. The first part is finding the largest number in the array and storing it in the `largestNumber` variable. The second part is printing it out on screen using `document.write`.

The tricky part is the first step of finding the largest number in the array. Here is one approach you can use:

1. Create a loop that is designed to through the `numbers` array

2. Store the first item from the array to the `largestNumber` variable. This will be the first run of your loop.

3. In the next run of your loop, check if the second number in the loop is larger than what you have already stored for `largestNumber`. If the number is larger, replace `largestNumber` with this number. If the number is smaller, just ignore the new number and let the loop continue.

4. After your loop has fully run, the logic in step 3 will ensure that `largestNumber` stores a reference to the largest number in the array. You can then print the value of largest number out.

This article and video can help you better get a feel for looping through an array:

> **[Looping Through an Array](https://www.kirupa.com/javascript/looping_through_array.htm)**
>
> Learn about the ways we have for programmatically going through the elements in our array!

Hopefully this helps. Do reply back if you are stuck on any part of this 🙂

Cheers,  
Kirupa

---

<div class="post-metadata">

**Author:** ![stekon](https://avatars.discourse-cdn.com/v4/letter/s/9fc29f/32.png) [@stekon](https://forum.kirupa.com/u/stekon)\
**Post date:** [July 9, 2021, 7:21am UTC](https://forum.kirupa.com/t/need-help-with-this-loop/648213/3 "2021-07-09T07:21:08Z")

</div>

Thanks a million for your help. Still haven’t gotten the hang of it yet. Not your fault, still trying to understand the whole programming concept. I don.t even know how to start writing the code. With the help of people like you, I know I will understand the concept on the long run.  
Thanks again.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [July 9, 2021, 5:51pm UTC](https://forum.kirupa.com/t/need-help-with-this-loop/648213/4 "2021-07-09T17:51:18Z")

</div>

You’ve come to the perfect place then 🙂

The video and article here can be a good starting point: [https://www.kirupa.com/html5/building\_your\_first\_web\_page.htm](https://www.kirupa.com/html5/building_your_first_web_page.htm)

If you have any questions here, please don’t hesitate to reply here or create a new topic. I and others here would be happy to work with you on any roadblocks you run into.

Cheers,  
Kirupa

---

<div class="post-metadata">

**Author:** ![stekon](https://avatars.discourse-cdn.com/v4/letter/s/9fc29f/32.png) [@stekon](https://forum.kirupa.com/u/stekon)\
**Post date:** [July 10, 2021, 11:03pm UTC](https://forum.kirupa.com/t/need-help-with-this-loop/648213/5 "2021-07-10T23:03:52Z")

</div>

Thanks very much Kirupa.

---

<div class="post-metadata">

**Author:** ![stekon](https://avatars.discourse-cdn.com/v4/letter/s/9fc29f/32.png) [@stekon](https://forum.kirupa.com/u/stekon)\
**Post date:** [July 10, 2021, 11:45pm UTC](https://forum.kirupa.com/t/need-help-with-this-loop/648213/6 "2021-07-10T23:45:20Z")

</div>

let largestNumber = 0;

for (let index = 0; index \< numbers.length; index +=1){

let currentNumber = numbers[index];

if (currentNumber \> largestNumber){

largestNumber = currentNumber;

}

}  
document.write("

- Largest Number: " + largestNumber + “
”);

I used the above code to get the largest number in the list, but I could not using the same method to get the desired results for the once below. Any suggestion please?  
Thanks.

1. The smallest number in the array
2. The sum of all the numbers in the array
3. The average value of all the numbers in the array _(the sum of all values divided by the number of values)_
4. A list of all even numbers in the array
5. A list of all odd numbers in the array
6. A list of all numbers divisible by 8 in the array

---

<div class="post-metadata">

**Author:** ![steve.mills](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/steve.mills/32/14961_2.png) [@steve.mills](https://forum.kirupa.com/u/steve.mills)\
**Post date:** [July 11, 2021, 7:17am UTC](https://forum.kirupa.com/t/need-help-with-this-loop/648213/7 "2021-07-11T07:17:51Z")

</div>

Here’s a way of doing it.

```
let numbers = [4,6,8,15,24,2,9,3,7,19];
    let evens = [];
    let eights = [];
    let odds = [];
    var sum = 0;
    var smallestNum = 0;
var average = 0;

  
        smallestNum = numbers[0];
        for (i = 0; i < numbers.length; i++){
           sum += numbers[i];
            if (smallestNum > numbers[i]) smallestNum = numbers[i];
            if (numbers[i] % 8 == 0) eights.push(numbers[i]);
            if (numbers[i] % 2 == 0) evens.push(numbers[i]);
            if(numbers[i] % 2 !== 0) odds.push(numbers[i])
        }

```

`average = sum / numbers.length;`

---

<div class="post-metadata">

**Author:** ![steve.mills](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/steve.mills/32/14961_2.png) [@steve.mills](https://forum.kirupa.com/u/steve.mills)\
**Post date:** [July 11, 2021, 12:42pm UTC](https://forum.kirupa.com/t/need-help-with-this-loop/648213/8 "2021-07-11T12:42:20Z")

</div>

Or you can create a reusable function that you pass in any array.

```
let numbers = [4,6,8,15,24,2,9,3,7,19];

    const setValues = function (array){
        let evens = [];
        let eights = [];
        let odds = [];
        var sum = 0;
        var average = 0;
        smallestNum = 0;

if (array[0] == null) return;
smallestNum = array[0];

        for (i = 0; i < array.length; i++){
           sum += array[i];
            if (smallestNum > array[i]) smallestNum = array[i];
            if (array[i] % 8 == 0) eights.push(array[i]);
            if (array[i] % 2 == 0) evens.push(array[i]);
            if(array[i] % 2 !== 0) odds.push(array[i])
            }
            average = sum / array.length;
            let returnObj = {
                evens: evens,
                odds: odds,
                eights: eights,
                sum: sum,
                average: average,
                smallestNum: smallestNum,
            }
            return returnObj;
    };
    let results = setValues(numbers);

    console.log(results.evens);
    console.log(results.odds);
    console.log(results.sum);
    console.log(results);
```

---

<div class="post-metadata">

**Author:** ![stekon](https://avatars.discourse-cdn.com/v4/letter/s/9fc29f/32.png) [@stekon](https://forum.kirupa.com/u/stekon)\
**Post date:** [July 11, 2021, 4:33pm UTC](https://forum.kirupa.com/t/need-help-with-this-loop/648213/9 "2021-07-11T16:33:59Z")

</div>

Hey Steve, thanks ever so much for your help. I am so grateful for this platform.

---

<div class="post-metadata">

**Author:** ![steve.mills](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/steve.mills/32/14961_2.png) [@steve.mills](https://forum.kirupa.com/u/steve.mills)\
**Post date:** [July 12, 2021, 12:29am UTC](https://forum.kirupa.com/t/need-help-with-this-loop/648213/10 "2021-07-12T00:29:07Z")

</div>

no worries mate,  
It’s a bit verbose so you can understand whats happening.  
If your going to use it you probably should put in an empty array check and set smallestNum to a default

```
var smallestNum = 0;

```

then short circuit the function by checking for null or undefined with ==  
` if(array[0] == null) return;`  
` smallestNum = array[0];`

---

<div class="post-metadata">

**Author:** ![stekon](https://avatars.discourse-cdn.com/v4/letter/s/9fc29f/32.png) [@stekon](https://forum.kirupa.com/u/stekon)\
**Post date:** [July 12, 2021, 5:40am UTC](https://forum.kirupa.com/t/need-help-with-this-loop/648213/11 "2021-07-12T05:40:09Z")

</div>

That is the code I came up with, but it’s still giving me an error message. I must be doing something wrong. (code.js:72 Uncaught ReferenceError: EvenNumbers is not defined). Anytime I am able to sort out an error, another one comes on.

let numbers = [469,755,244,245,758,450,302,20,712,71,456,21,398,339,882, 848179,535,940,472,  
];  
const setValues = function (number){

let evenNumbers = [];

let eights = [];

let odds = [];

let sum = 0;

let average = 0;

smallestNumber = number[0];

for (i = 0; i \< number.length; i++){

sum += number[i];

if (smallestNumber \> number[i]) smallestNum = number[index];

if (numbers[index] % 2 == 0) evens.push(numbers[index]);

if (numbers[index] % 2 !== 0) odds.push(numbers[index]);

if (numbers[index] % 8 == 0) eights.push(numbers[index]);

}

average = sum / numbers.length;

let returnObj = {

evens: evens,

odds: odds,

eights: eights,

sum: sum,

average: average,

smallestNumber: smallestNumber,

}

return returnObject;

}

document.write("

- EvenNumbers: " + EvenNumbers + “
”);

document.write("

- OddNumbers: " + oddNumbers + “
”);

document.write("

- Results.sum: " + Results.sum + “
”);

document.write("

- Results: " + Results + “
”);

document.write("

- Smallest Number: " + smallestNumber + “
”);

---

<div class="post-metadata">

**Author:** ![steve.mills](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/steve.mills/32/14961_2.png) [@steve.mills](https://forum.kirupa.com/u/steve.mills)\
**Post date:** [July 12, 2021, 6:58am UTC](https://forum.kirupa.com/t/need-help-with-this-loop/648213/12 "2021-07-12T06:58:21Z")

</div>

Your naming conventions are too similar and you are mixing different things.

When you call a function like this `setValues(numbers);`… and the function looks like this: `const setValues = function(arr){ doSomething}`… inside the function `arr` equals/ is referencing the array you called the function with (`numbers`).

So if you want to use the function over and over you name the argument something like `arr` or `array` so it’s easy to understand / read and you don’t mix e.g. `numbers` with `number`.

Also this `i` in the for loop is `iteration or index` (` i = 0;`) which increments and the `[]` are property accessors.

Every loop `i` increments 0,1,2 … so `array[i]` is saying get/ set `array` index of the value of `i`.

You can also just say `array[8]` and get index 8 but that wouldn’t increment…

You also need to call the function and save the results to a variable like `let results = setValues(numbers)`.

Then results will look like this after `setValues` runs:

> results = {  
> average: 45065.68421052631,  
> eights: [712, 456, 472],  
> evens: [244, 758, 450, 302, 20, 712, 456, 398, 882, 940, 472],  
> odds: [469, 755, 245, 71, 21, 339, 848179, 535],  
> smallestNumber: 20,  
> sum: 856248  
> }

You can access the values using dot notation: `results.sum` or bracket notation: `results['sum']`.

You can also do this:

> ```
> var value = 'sum';
> console.log(results[value]) // logs results.sum;
> value = 'average';
> console.log(results[value]) // logs results.average;
> 
> ```

Which is also the same as:

> let numbers = [2,5,9,4]  
> let index = 2;  
> numbers[index] = ‘changed’; // is the same as numbers[2]  
> console.log(numbers) // [2, 5, ‘changed’, 4]

This is a more compact version that works

```
let numbers = [469,755,244,245,758,450,302,20,712,71,456,21,398,339,882, 848179,535,940,472,

];

const setValues = function (arr){
    if(arr[0] == null) return;

    let obj = {
        evens: [],
        odds: [],
        eights: [],
        sum: 0,
        average: 0,
        smallestNumber: 0,
    }
    obj.smallestNumber = arr[0];

    for (i = 0; i < arr.length; i++){
        obj.sum += arr[i];
        if (obj.smallestNumber > arr[i]) obj.smallestNumber = arr[i];
        if (arr[i] % 2 == 0) obj.evens.push(arr[i]);
        if (arr[i] % 2 !== 0) obj.odds.push(arr[i]);
        if (arr[i] % 8 == 0) obj.eights.push(arr[i]);
    }

    obj.average = obj.sum / arr.length;

    return obj;

}

let results = setValues(numbers);

document.write(`Sum: ${results.sum}`)
document.write(`Average: ${results.average}`) 
 document.write(`Smallest number: ${results.smallestNumber}`) 
document.write(`Even numbers: ${results.evens.join(", ")}`)
document.write(`Odd numbers: ${results.odds.join(", ")}`)
document.write(`Numbers divisible by eight: ${results.eights.join(", ")}`)

```

I hope this makes sense, if it doesn’t maybe go back through some videos and articles and go back over arrays, functions and arguments, property accessors, modulo operator and += operator. 🙂

---

<div class="post-metadata">

**Author:** ![steve.mills](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/steve.mills/32/14961_2.png) [@steve.mills](https://forum.kirupa.com/u/steve.mills)\
**Post date:** [July 12, 2021, 7:04am UTC](https://forum.kirupa.com/t/need-help-with-this-loop/648213/13 "2021-07-12T07:04:23Z")

</div>

On a side note: does anybody know why `document.write()` doesn’t respect template literal spacing or `"\n"` ?

I can’t say that I have used document.write much or intend to use it much either. 🙂

---

<div class="post-metadata">

**Author:** ![steve.mills](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/steve.mills/32/14961_2.png) [@steve.mills](https://forum.kirupa.com/u/steve.mills)\
**Post date:** [July 12, 2021, 11:01am UTC](https://forum.kirupa.com/t/need-help-with-this-loop/648213/14 "2021-07-12T11:01:29Z")

</div>

FYI the standard for loop is so much more flexible than for of, for in or forEach.

You have complete control over the iteration and can run multiple arrays through the loop.

You can also make a map, reduce, filter ect function with a standard for loop.

here’s an example of controlling iteration start/ end/ increment:

> let numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
> 
> `// function takes a start index, increment by 1+, finish index and array`  
> const loop = function(start, increment, end, array){
> 
> `// copies end value`  
> let fin = end;
> 
> `//copies increment value`  
> let iter = increment
> 
> `// checks if the end is more than the array length and resets if required`  
> if (end \> array.length) fin = array.length;
> 
> `// avoids endless loops by not allowing 0 increment`  
> if (iter == 0 ) iter = 1;
> 
> `// array to return results`  
> let results = ;
> 
> `// sets i to start, finish at end, increments by incr e.g. every 3`  
> for(i = start; i \< fin; i+= iter){
> 
> `//pushes the index/ iteration to results`  
> results.push(array[i]);  
> }  
> `// returns an array from the function`  
> return results  
> }  
> console.log(loop(5,2,15,numbers));  
> console.log(loop(0,3,numbers.length, numbers));  
> console.log(loop(4,5,30, numbers));  
> console.log(loop(2,25,55,numbers));

If you can wrap your head around that you’ll see how power you have with for loops…

---

<div class="post-metadata">

**Author:** ![stekon](https://avatars.discourse-cdn.com/v4/letter/s/9fc29f/32.png) [@stekon](https://forum.kirupa.com/u/stekon)\
**Post date:** [July 12, 2021, 7:20pm UTC](https://forum.kirupa.com/t/need-help-with-this-loop/648213/15 "2021-07-12T19:20:28Z")

</div>

![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/9/950fc5c5e1f16489840e89822593b7e8e0eca0ad.png)  
Hi Steve,  
Thanks a lot, that was extremely helpful. How can I make my code to appear like the image above, instead of just a straight line?

---

<div class="post-metadata">

**Author:** ![steve.mills](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/steve.mills/32/14961_2.png) [@steve.mills](https://forum.kirupa.com/u/steve.mills)\
**Post date:** [July 13, 2021, 2:44am UTC](https://forum.kirupa.com/t/need-help-with-this-loop/648213/16 "2021-07-13T02:44:49Z")

</div>

for a basic one, put your function and array (without `document.write`) in a `<script>` tag inside the document `<head>` and put the following below the function:

```
> 
> let results1 = setValues(numbers)
> 
> const writeHTML = function (arr, obj){
> let body = document.querySelector('body');
> body.innerHTML = `<h1>Array Analyser</h1>
> <h3> Now Analyzing the array: ${arr.join(", ")}</h3>
> <ul>
> ${(obj =>{if (obj.largestNumber) return `<li>Largest number: ${obj.largestNumber} </li>`; else return `` })(obj)}
> ${(obj =>{if (obj.smallestNumber) return `<li>Smallest number: ${obj.smallestNumber}</li>`; else return ``})(obj)}  
> ${(obj =>{if (obj.sum) return `<li>Sum: ${obj.sum}</li>`; return `` })(obj)}
> ${(obj =>{if (obj.average) return `<li>Average: ${obj.average}</li>`; else return `` })(obj)} 
> ${(obj =>{if (obj.evens) return `<li>Even numbers: ${obj.evens.join(", ")}</li>`; else return `` })(obj)} 
> ${(obj =>{if (obj.odds) return `<li>Odd numbers: ${obj.odds.join(", ")}</li>`; else return `` })(obj)} 
> ${(obj =>{if (obj.eights) return `<li>Numbers divisible by eight: ${obj.eights.join(", ")}</li>`; else return `` })(obj)} 
> </ul>
> `};
> 
> const run = () =>{ writeHTML(numbers, results)}
> document.addEventListener('DOMContentLoaded', run)
```

---

<div class="post-metadata">

**Author:** ![steve.mills](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/steve.mills/32/14961_2.png) [@steve.mills](https://forum.kirupa.com/u/steve.mills)\
**Post date:** [July 13, 2021, 3:12am UTC](https://forum.kirupa.com/t/need-help-with-this-loop/648213/17 "2021-07-13T03:12:47Z")

</div>

That function will also check to see if have/ don’t have a value e.g. if there isn’t a results.evens don’t write a list item.  
You can also return a custom response for an empty array:

```auto
 ${(obj =>{if (obj.eights && obj.eights.length !== 0) return `<li>Numbers divisible by eight: ${obj.eights.join(", ")}</li>`; else return `Numbers divisible by eight: none found` })(obj)

```

That will return a custom message **"Numbers divisible by eight: none found"**

---

<div class="post-metadata">

**Author:** ![stekon](https://avatars.discourse-cdn.com/v4/letter/s/9fc29f/32.png) [@stekon](https://forum.kirupa.com/u/stekon)\
**Post date:** [July 13, 2021, 5:36am UTC](https://forum.kirupa.com/t/need-help-with-this-loop/648213/18 "2021-07-13T05:36:00Z")

</div>

Thanks, and thanks again Steve.

---

<div class="post-metadata">

**Author:** ![steve.mills](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/steve.mills/32/14961_2.png) [@steve.mills](https://forum.kirupa.com/u/steve.mills)\
**Post date:** [July 13, 2021, 6:55am UTC](https://forum.kirupa.com/t/need-help-with-this-loop/648213/19 "2021-07-13T06:55:28Z")

</div>

No worries mate, good luck…