Return to Answer

This answer is an aggregate of the solutions that were provided in this post with some performance feedbacks. I think there is 2 use-cases and the OP didn't mention if he needs to access the keys in order use them during the loop process.

I. the keys need to be accessed,

✔ the of and Object.keys approach

✔ the in approach

Use this one with cautious, as it could print prototype'd properties of obj

✔ the ES7 approach

for (const [key, value] of Object.entries(obj)) {

}

However, at the time of the edit I wouldn't recommend the ES7 method, because JavaScript initializes a lot of variables internally to build this procedure (see the feedbacks for proof). Unless you are not developing a huge app which deserves optimization, then it is ok but if optimization is your priority you should think about it.

II. we just need to access each values,

✔ the of and Object.values approach

• For Object.values case, using a native for loop with cached variables in Firefox seems to be a little faster than using a for...of loop. However the difference is not that important and Chrome is running for...of faster than native for loop, so I would recommend to use for...of when dealing with Object.values in any cases (4th and 6th tests).

• In Firefox, the for...in loop is really slow, so when we want to cache the key during the iteration it is better to use Object.keys. Plus Chrome is running both structure at equal speed (1st and last tests).

You can check the tests here : https://jsperf.com/es7-and-misc-loops

This answer is an aggregate of the solutions that were provided in this post with some performance feedbacks. I think there is two use cases and the OP didn't mention if he needs to access the keys in order use them during the loop process.

I. The keys need to be accessed

✔ The of and Object.keys approach

✔ The in approach

Use this one with caution, as it could print prototype'd properties of obj

✔ The ES7 approach

for (const [key, value] of Object.entries(obj)) {
}

However, at the time of the edit I wouldn't recommend the ES7 method, because JavaScript initializes a lot of variables internally to build this procedure (see the feedbacks for proof). Unless you are not developing a huge application which deserves optimization, then it is OK, but if optimization is your priority, you should think about it.

II. We just need to access each value

✔ The of and Object.values approach

• For Object.values case, using a native for loop with cached variables in Firefox seems to be a little faster than using a for...of loop. However, the difference is not that important and Chrome is running for...of faster than native for loop, so I would recommend to use for...of when dealing with Object.values in any cases (4th and 6th tests).

• In Firefox, the for...in loop is really slow, so when we want to cache the key during the iteration it is better to use Object.keys. Plus Chrome is running both structure at equal speed (first and last tests).

You can check the tests here: https://jsperf.com/es7-and-misc-loops

This answer is an aggregate of the solutions that were provided in this post with some performance feedbacks. I think there is 2 use-cases and the OP didn't mention if he needs to access the keys in order use them during the loop process.

I. the keys need to be accessed,

the Object.keys approach

let k;
for (k of Object.keys(obj)) {
 /* k : the key
 obj[k] : the value */
}

the ES7 approach

for (const [key, value] of Object.entries(obj)) {
 
}

However, at the time of the edit I wouldn't recommend the ES7 method, because JavaScript initializes a lot of variables internally to build this procedure (see the feedbacks for proof). Unless you are not developing a huge app which deserves optimization, then it is ok but if optimization is your priority you should think about it.

II. we just need to access each values,

the Object.values approach

let v;
for (v of Object.values(obj)) {
}

More feedbacks about the tests :

• Caching Object.keys or Object.values performance is negligible

For instance,

const keys = Object.keys(obj);
let i;
for (i of keys) {
 //
}
// same as
for (i of Object.keys(obj)) {
 //
}

• For Object.values case, using a native for loop with cached variables in Firefox seems to be a little faster than using a for...of loop. However the difference is not that important and Chrome is running for...of faster than native for loop, so I would recommend to use for...of when dealing with Object.values in any cases (4th and 6th tests).

• In Firefox, the for...in loop is really slow, so when we want to cache the key during the iteration it is better to use Object.keys. Plus Chrome is running both structure at equal speed (1st and last tests).

You can check the tests here : https://jsperf.com/es7-and-misc-loops

This answer is an aggregate of the solutions that were provided in this post with some performance feedbacks. I think there is 2 use-cases and the OP didn't mention if he needs to access the keys in order use them during the loop process.

I. the keys need to be accessed,

✔ the of and Object.keys approach

let k;
for (k of Object.keys(obj)) {
 /* k : key
  * obj[k] : value
 */
}

✔ the in approach

let k;
for (k in obj) {
 /* k : key
 *  obj[k] : value */
}

Use this one with cautious, as it could print prototype'd properties of obj

✔ the ES7 approach

for (const [key, value] of Object.entries(obj)) {
 
}

However, at the time of the edit I wouldn't recommend the ES7 method, because JavaScript initializes a lot of variables internally to build this procedure (see the feedbacks for proof). Unless you are not developing a huge app which deserves optimization, then it is ok but if optimization is your priority you should think about it.

II. we just need to access each values,

✔ the of and Object.values approach

let v;
for (v of Object.values(obj)) {
}

More feedbacks about the tests :

• Caching Object.keys or Object.values performance is negligible

For instance,

const keys = Object.keys(obj);
let i;
for (i of keys) {
 //
}
// same as
for (i of Object.keys(obj)) {
 //
}

• For Object.values case, using a native for loop with cached variables in Firefox seems to be a little faster than using a for...of loop. However the difference is not that important and Chrome is running for...of faster than native for loop, so I would recommend to use for...of when dealing with Object.values in any cases (4th and 6th tests).

• In Firefox, the for...in loop is really slow, so when we want to cache the key during the iteration it is better to use Object.keys. Plus Chrome is running both structure at equal speed (1st and last tests).

You can check the tests here : https://jsperf.com/es7-and-misc-loops

This answer is an aggregate of the solutions that were provided in this post with some performance feedbacks. I think there is 2 use-cases and the OP didn't mention if he needs to access the keys in order use them during the loop process.

1. If the keys need to be accessed,

We can use Object.keys, e.g :

let k;
for (k of Object.keys(obj)) {
 // now 'obj[k]' refers to the value and 'k' to the key;
}

Using ES7

@Kévin Berthommier provides this ES7 solution :

for (const [key, value] of Object.entries(obj)) {
 //
}

However, I wouldn't recommend to use this method unless you have just a little set of data to deal with. This method sure looks neat but if we look at the performance feedbacks (both Firefox and Chrome) the execution time is really slow because JavaScript initialize a lot of variables internally to build this structure.

2. If we just want to access each values,

We can use Object.values, e.g :

let v;
for (v of Object.values(obj)) {
 // now 'v' refers to the value in the iteration
}

More feedbacks about the tests :

• Caching Object.keys or Object.values performance is negligible

For instance,

const keys = Object.keys(obj);
let i;
for (i of keys) {
 //
}
// same as
for (i of Object.keys(obj)) {
 //
}

• For Object.values case, using a native for loop with cached variables in Firefox seems to be a little faster than using a for...of loop. However the difference is not that important and Chrome is running for...of faster than native for loop, so I would recommend to use for...of when dealing with Object.values in any cases (4th and 6th tests).

• In Firefox, the for...in loop is really slow, so when we want to cache the key during the iteration it is better to use Object.keys. Plus Chrome is running both structure at equal speed (1st and last tests).

You can check the tests here : https://jsperf.com/es7-and-misc-loops

This answer is an aggregate of the solutions that were provided in this post with some performance feedbacks. I think there is 2 use-cases and the OP didn't mention if he needs to access the keys in order use them during the loop process.

I. the keys need to be accessed,

the Object.keys approach

let k;
for (k of Object.keys(obj)) {
 /*  k  : the key
 obj[k] : the value */

}

the ES7 approach

for (const [key, value] of Object.entries(obj)) {
 
}

However, at the time of the edit I wouldn't recommend the ES7 method, because JavaScript initializes a lot of variables internally to build this procedure (see the feedbacks for proof). Unless you are not developing a huge app which deserves optimization, then it is ok but if optimization is your priority you should think about it.

II. we just need to access each values,

the Object.values approach

let v;
for (v of Object.values(obj)) {
}

More feedbacks about the tests :

• Caching Object.keys or Object.values performance is negligible

For instance,

const keys = Object.keys(obj);
let i;
for (i of keys) {
 //
}
// same as
for (i of Object.keys(obj)) {
 //
}

• For Object.values case, using a native for loop with cached variables in Firefox seems to be a little faster than using a for...of loop. However the difference is not that important and Chrome is running for...of faster than native for loop, so I would recommend to use for...of when dealing with Object.values in any cases (4th and 6th tests).

• In Firefox, the for...in loop is really slow, so when we want to cache the key during the iteration it is better to use Object.keys. Plus Chrome is running both structure at equal speed (1st and last tests).

You can check the tests here : https://jsperf.com/es7-and-misc-loops