What is the difference between for...in loop and jQuery each() function? [duplicate]

Question

I am using the following scripts to iterate the object (I don't know which one is best to use, please tell me which one is the best):

var days = {Sunday: 0, Monday: 1, Tuesday: 2, Wednesday: 3, Thursday: 4, Friday: 5, Saturday: 6};

$.each(days, function(key, value){
    $('#days').append('<li>' + key + '(' + value + ')</li>');
});


for(var key in days){
    $('#days').append('<li>' + key + '(' + days[key] + ')</li>');
}

Answer 1

Either way, you should be caching that selector:

var elem = $( '#days' );
$.each(days,function(key,value){
    elem.append('<li>'+key+'('+value+')</li>');
});

.each() would be better in this case. The pattern is cleaner.

With a for loop, you'd want to use obj.hasOwnProperty(key) so that you don't dredge through inherited properties... Which adds another layer of indenting:

var elem = $( '#days' );
for( var key in days ){
  if( days.hasOwnProperty( key ) ){
    elem.append('<li>'+key+'('+days[key]+')</li>');
  }
}

Answer 2

It is clear without any performance tests that native javascript for loop is faster, but there is no big difference for small arrays like 10-20 small items. So use whichever you want.