 # Need help with this Loop

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(”");

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.

Hopefully this helps. Do reply back if you are stuck on any part of this Cheers,
Kirupa

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.

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

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

Thanks very much Kirupa.

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

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;
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;`

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 == null) return;
smallestNum = array;

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);``````

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

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 == null) return;`
` smallestNum = array;`

1 Like

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;

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 + “
• ”);

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` 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
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 == null) return;

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

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. 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. 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…

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?

1 Like

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)}

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:

`````` \${(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"

1 Like

Thanks, and thanks again Steve.

2 Likes

No worries mate, good luck…