How do I give a different code to the last value in a for loop?

Question

I'm experimenting around with the for loop and I think I understand it fairly well.

<button onclick="valpro();">Give us a word</button>

<p id="exper"></p>

<script>
    function valpro(){

    var askke = prompt("Write something down and we will count all the letters");

    var wuku = 0;

    var teert = "";

    for (; askke.length > wuku; wuku++){

    teert += wuku + 1 + ", ";
    }
    document.getElementById("exper").innerHTML = teert;
    }
</script>

Here is what I wrote, and even though its working exactly as I expected it to, I'm still unsatisfied with something. You see the last number given also has a comma at the end and Id prefer it to either have a different thing or just nothing at all. Unfortunately, the guide I'm following says nothing about different code for the last value. Is there a way to give a different block of code to the last value?

inside your for loop: if(wuku == asks.length-1) { //print w/o comma. } — Russ J, Jul 07 '20 at 01:41
You could shorten your function to `const valpro = () => document.getElementById("exper").innerHTML = Array.from(prompt("Write something down and we will count all the letters") ?? "", (_element, index) => index + 1).join(", ");`. The function doesn’t count letters, but characters. — Sebastian Simon, Jul 07 '20 at 01:46
Inline event handlers like `onclick` are [not recommended](https://stackoverflow.com/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](https://stackoverflow.com/a/43459991/4642212) way of registering events. Always [use `addEventListener`](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_—_dont_use_these) instead. — Sebastian Simon, Jul 07 '20 at 01:47

score 1 · Accepted Answer · edited Jul 07 '20 at 01:59

<button onclick="valpro();">Give us a word</button>

<p id="exper"></p>

<script>
    function valpro(){

    var askke = prompt("Write something down and we will count all the letters");
    var teert = "";

    for (var wuku=0; askke.length > wuku; wuku++){
    if (wuku == 0){
         teert += wuku + 1;
     } else {
         teert += ', ';
         teert += wuku + 1;
      }
    }
    document.getElementById("exper").innerHTML = teert;
    }
</script>

score 0 · Answer 2 · answered Jul 07 '20 at 01:45

0

Your question can be restated as "Add a comma if not on the last loop". Then it becomes pretty clear what to do. Just run code to add the number with a comma as long as the loop index (wuku) is not at its last iteration.

<button onclick="valpro();">Give us a word</button>

<p id="exper"></p>

<script>
    function valpro(){

    var askke = prompt("Write something down and we will count all the letters");

    var wuku = 0;

    var teert = "";

    for (; askke.length > wuku; wuku++){

        if(wuku==askke.length-1){
             teert += wuku + 1;
        }else{
             teert += wuku + 1 + ", ";
        }
    }
    document.getElementById("exper").innerHTML = teert;
}
</script>

answered Jul 07 '20 at 01:45

Luke B

2,075
2
18
26

I think it is very inefficient to call the length method every time it loops, also making a comparison every time. I think it's better to just do the last iteration at the end, outside the for, or create a counter equal to the length before the for – Yorfrank Bastidas Jul 07 '20 at 01:55
@YorfrankBastidas `length` is not a method. The time spent looking up properties or using comparison operators is negligible. – Sebastian Simon Jul 07 '20 at 01:57
1

@YorfrankBastidas Accessing the length of an array and comparing against has an extremely small performance cost, it won't cause problems unless you are looping probably thousands or even millions of times. – Luke B Jul 07 '20 at 01:59

score 0 · Answer 3 · answered Jul 07 '20 at 01:51

End the loop one iteration earlier and do the final step outside the loop:

var teert = "";
for (let wuku = 1; wuku <= askke.length - 1; wuku++){
    teert += wuku + ", ";
}
teert += wuku

Or, use an array instead and join it at the end:

var teert = [];
for (let wuku = 1; wuku <= askke.length; wuku++){
    teert.push(wuku)
}
document.getElementById("exper").innerHTML = teert.join(", ");

score -1 · Answer 4 · answered Jul 07 '20 at 02:08

The optimal solution is to perform the last instruction outside the loop and store the length of askke in a variable outside the loop so you don't have to access the length for every iteration. Using if statements to check if the current iteration is the last one will take more time because the if statements will need to be computed for each iteration of the loop.

<button onclick="valpro();">Give us a word</button>

<p id="exper"></p>

<script>
    function valpro(){

    var askke = prompt("Write something down and we will count all the letters");

    var teert = "";

    var len = askke.length-1;
    for (var wuku = 0; len > wuku; wuku++){

    teert += wuku + 1 + ", ";
    }
    teert += wuku + 1;
    document.getElementById("exper").innerHTML = teert;
    }
</script>

How do I give a different code to the last value in a for loop?

4 Answers4