Need help with this Loop

stekon · July 9, 2021, 1:51am

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

kirupa · July 9, 2021, 3:13am

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:

Create a loop that is designed to through the numbers array
Store the first item from the array to the largestNumber variable. This will be the first run of your loop.
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.
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:

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

Cheers,
Kirupa

stekon · July 9, 2021, 7:21am

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.

kirupa · July 9, 2021, 5:51pm

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

stekon · July 10, 2021, 11:03pm

Thanks very much Kirupa.

stekon · July 10, 2021, 11:45pm

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.

The smallest number in the array
The sum of all the numbers in the array
The average value of all the numbers in the array (the sum of all values divided by the number of values)
A list of all even numbers in the array
A list of all odd numbers in the array
A list of all numbers divisible by 8 in the array

steve.mills · July 11, 2021, 7:17am

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;

steve.mills · July 11, 2021, 12:42pm

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

stekon · July 11, 2021, 4:33pm

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

steve.mills · July 12, 2021, 12:29am

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

stekon · July 12, 2021, 5:40am

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 + “

”);

steve.mills · July 12, 2021, 6:58am

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.

steve.mills · July 12, 2021, 7:04am

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.

steve.mills · July 12, 2021, 11:01am

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…

stekon · July 12, 2021, 7:20pm

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?

steve.mills · July 13, 2021, 2:44am

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)

steve.mills · July 13, 2021, 3:12am

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"

stekon · July 13, 2021, 5:36am

Thanks, and thanks again Steve.

steve.mills · July 13, 2021, 6:55am

No worries mate, good luck…

Need help with this Loop

Follow:

Popular

Loose Ends