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