← Back tothis vs that

for ... in vs for ... of

Written byPhuoc Nguyen
08 Sep, 2020


  1. The values iterated on the `for ... in` and `for ... of` statements are different.
    `for ... in` iterates over the enumerable property keys of object. Whereas `for ... of` iterates over the values of the numeric properties of object.
    const list = ['a', 'b', 'c'];

    for (let i in list) {
    console.log(i); // '0', '1', '2'

    for (let i of list) {
    console.log(i); // 'a', 'b', 'c'
  2. Unlike `for ... in`, `for ... of` does not support plain objects:
    const person = {
    firstName: 'Foo',
    lastName: 'Bar',
    age: 42,

    // TypeError: `person` is not iterable
    for (let k of person) {
    It is because a plain object is not iterable. To fix that, we can use the `Object.keys()` method to iterate on the object properties:
    for (let k of Object.keys(person)) {
    console.log(k, ':', person[k]);

    // firstName: Foo
    // lastName: Bar
    // age: 42
  3. `for ... of` supports iterating over a Unicode string.
    const msg = 'Hell😀 W😀rld';

    // for ... in
    for (let i in msg) {

    // Output:
    // 'H', 'e', 'l', 'l', '�', ' ', 'W', '�', '�', 'r', 'l', 'd'

    // for ... of
    for (let c of msg) {

    // Output:
    // 'H', 'e', 'l', 'l', '😀', ' ', 'W', '😀', 'r', 'l', 'd'
  4. `for ... of` loop can wait for an async task to complete in each iteration via the `await` keyword:
    for await (... of ...) {

Good practices

  1. It is not recommended to add a custom method to primitive objects such as `Array`, `Boolean`, `Number`, `String`, etc. Since `for ... in` statement loops over the enumerable properties, it will include new methods which are added to the prototype.
    Array.prototype.isEmpty = function () {
    return (this.length = 0);

    const a = ['cat', 'dog', 'mouse'];
    for (let i in a) {
    console.log(i); // '0', '1', '2', 'isEmpty'
  2. Destructing `for ... in` is deprecated. Instead, use `for ... of`:
    const addressBook = new Map();
    addressBook.set('Foo', '111-222-333');
    addressBook.set('Bar', '444-555-666');

    for (const [name, phone] of addressBook) {
    console.log(name, ':', phone);

    // Foo: 111-222-333
    // Bar: 444-555-666

Good to know

By default, all properties of an array or object will appear in `for ... in`. However, this behavior is avoidable. Using `Object.defineProperty` can decide whether a property is enumerable or not.
let person = {
firstName: 'Foo',
lastName: 'Bar',

// The 'age' property is not enumerable
Object.defineProperty(person, 'age', {
value: 42,
enumerable: false,

for (let i in person) {
console.log(i); // 'firstName', 'lastName'

Questions? 🙋

Do you have any questions? Not just about this specific post, but about any topic in front-end development that you'd like to learn more about? If so, feel free to send me a message on Twitter or send me an email. You can find them at the bottom of this page.
I have a long list of upcoming posts, but your questions or ideas for the next one will be my top priority. Let's learn together! Sharing knowledge is the best way to grow 🥷.

Recent posts ⚡

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.
By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.
Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.
Phước Nguyễn