I have the following:
var tags = ["Favorite", "Starred", "High Rated"];
for (var tag in tags) {
console.log(tag);
}
Output is
0
1
2
I'd like it to output:
Favorite
Starred
High Rated
How do I do this? Thanks.
2 Answers
Itearting over an array:
That's an array of strings, don't use for..in, use the vanilla for loop:
var tags = ["Favorite", "Starred", "High Rated"];
for (var i = 0; i < tags.length; i++) { // proper way to iterate an array
console.log(tags[i]);
}
Output:
Favorite
Starred
High Rated
Proper usage of for..in:
It is meant for object's properties, like:
var tags2 = {"Favorite": "some", "Starred": "stuff", "High Rated": "here"};
for (var tag in tags2) { // enumerating objects properties
console.log("My property: " + tag +"'s value is " +tags2[tag]);
}
Output:
My property: Favorite's value is some
My property: Starred's value is stuff
My property: High Rated's value is here
Side effects of for..in with arrays:
Don't take my word for it, let's see why not use it: for..in in arrays can have side effects. Take a look:
var tags3 = ["Favorite", "Starred", "High Rated"];
tags3.gotcha = 'GOTCHA!'; // not an item of the array
// they can be set globally too, affecting all arrays without you noticing:
Array.prototype.otherGotcha = "GLOBAL!";
for (var tag in tags3) {
console.log("Side effect: "+ tags3[tag]);
}
Output:
Side effect: Favorite
Side effect: Starred
Side effect: High
Side effect: GOTCHA!
Side effect: GLOBAL!
1 Comment
Vasilen Donchev
+1 for object's properties usage
Using in in for loops in JavaScript is not like : in Java or foreach in other languages - instead of providing reference to the element, it provides its index.
If you use a framework like jQuery, there is a method - $.each which gives access to the element (not only the index) via callback when iterating:
var a = ["Favorite", "Starred", "High Rated"];
$.each ( a, function ( index, data )
{
console.log ( data );
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
2 Comments
Blender
Why would you use jQuery just to iterate over an array?
Marlon Bernardes
That's not true.
for..in does NOT return the index, but the properties of the object. If you use an array the properties are it's indexes, but if you use an object you'll get a different output (e.g: var person = { name: 'John', age: 25 }; for(var c in person ) { console.log(c); }). I also wouldn't use jQuery for iterating through a list. Using native javascript is way more performatic .
console.log(tags[tag])