How to initialize let in javascript starting from 1

Question

I have a simple javascript example which contains a for loop with let. Here I need to initialize the i value with 1 like 1,2,3 etc.. Now it's coming like 01,11,21,31 etc.. Here I should not change anything inside for loop.

var cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
var text = "";
var i;
for (let i in cars) {
  text += cars[i] + "<br>";
  console.log(i + 1);
}
document.getElementById("demo").innerHTML = text;

<h2>JavaScript Loops</h2>
<p id="demo"></p>

`var i = 1;`. Also that's an off-by-one error, arrays start at 0. — Jared Smith, Dec 17 '18 at 17:03
@Keith I find it more likely given the issues with the code that initializing the starting index to 1 is an off-by-one error. — Jared Smith, Dec 17 '18 at 17:06
@JaredSmith Yes, looking again at his code, he just wants a standard for loop.. `for (let i = 1; i < cars.length; i ++) {}` or like mentioned a forEach with the index specifier, and of course the slice. — Keith, Dec 17 '18 at 17:08

Treycos · Answer 1 · 2018-12-17T17:21:55.937

The for..in loop will iterate through your array, this means that your variable i will take the value of each of your strings one by one

To achieve your goal, there is a simpler way, with a single line of code :

const cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];

const text = cars.map(car => car + "<br>").join('');

document.getElementById("demo").innerHTML = text;

<h2>JavaScript Loops</h2>
<p id="demo"></p>

The map function will change each element in your array with another one, resulting in the following : ["BMW ", "Volvo ", "Saab ", "Ford ", "Fiat ", "Audi "]

Then, join will take all the strings in your array, and put them together

score 0 · Answer 2 · answered Dec 17 '18 at 17:15

A forEach loop would be a better and cleaner route for doing this. Run the code snippet below or check this jsFiddle to see how you can use forEach to loop through your cars array:

    var cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
    var x = document.getElementById("demo");
    text = "";
    
    cars.forEach(function(car){
      return text += car + '<br/>';
    });
      
    x.innerHTML = text;

    <h2>JavaScript Loops</h2>
    <div id="demo"></div>

If you are open to using the new JavaScript ES6 syntax, you can further shorten the above like this:

const cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
const x = document.getElementById("demo");
text = "";

cars.forEach(car => text += `${car}<br/>`);

x.innerHTML = text;

score 0 · Answer 3 · answered Dec 17 '18 at 17:18

0

You can use a normal for loop. And you can also delete the first declaration of i, because you already have let i.

var cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
var text = "";
  for (let i = 1; i < cars.length; i ++){
  text += cars[i] + "<br>";
  console.log(i + 1);
}
document.getElementById("demo").innerHTML = text;

<h2>JavaScript Loops</h2>
<p id="demo"></p>

answered Dec 17 '18 at 17:18

Jakob

1,858
2
15
26

Adding additional details: https://stackoverflow.com/questions/500504/why-is-using-for-in-with-array-iteration-a-bad-idea – Alwaysblue Dec 17 '18 at 17:21

score 0 · Answer 4 · answered Dec 17 '18 at 17:26

I don´t understand why you need to offset because array start at zero.

but you get the result 01,21, 32, because you print 0+1=01, 1+1=11 you do not increment.

var cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
var text = "";
var i;
  for (let i in cars) {
  text += cars[i] + "<br>";
i++;
console.log(i);
}

You can do acheive same result like this:

var cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
var text = "";
var i;
cars.forEach (function(item){
text += item + "<br>";
});

score 0 · Answer 5 · answered Dec 17 '18 at 17:37

Although there are many amazing answers, I will still like to share/add my answer

Using “for…in” with array iteration is a bad idea? Why? Read here for detailed answers

Coming back to the reason for unexpected behaviour.

For-in is meant to be primarily used with objects as a key

Now, Since you are taking an array,

for (let i in cars) {
console.log(i) 
}

Will log string "1", "2", "3" instead of integer 1, 2, 3. Why? Read here about the crazy nature of javascript

Hence, Best way is to use would be (copied from above answers)

 

 //Method1
const cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
const text = cars.map(car => car + "<br>").join('');
document.getElementById("demo").innerHTML = text;

 

 //Method 2
const cars1 = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
let text1 = "";
  for (let i = 1; i < cars1.length; i ++){
  text1 += cars1[i] + "<br>";
  console.log(i + 1);
}
document.getElementById("demo1").innerHTML = text1;

<h2>JavaScript Loops</h2>
    <div id="demo"></div>
    
 <h2>JavaScript Loops 1</h2>
 <div id="demo1"></div>

How to initialize let in javascript starting from 1

5 Answers5