Uncaught TypeError: items is not iterable

Question

My understanding is that for...in loops are designed to iterate over objects in Javascript. See this post and this post.

Take the following example. This returns 'Uncaught TypeError: items is not iterable' in my console.

var text = {
  name: "Coptic",
  ranges: [[994, 1008], [11392, 11508], [11513, 11520]],
  direction: "ltr",
  year: -200,
  living: false,
  link: "https://en.wikipedia.org/wiki/Coptic_alphabet"
};

function dominantDirection(items) {
  for (let item of items) {
    if (item.direction === 'ltr') {
      return 'ltr';
    } else {
      return 'rtl';
    }
  }
}

console.log(dominantDirection(text));

If I wrap the object in an array[] it works fine. However my second example works as expected.

var object1 = {a: 1, b: 2, c: 3};
var string1 = "";

function loopObj() {
  for (var property1 in object1) {
    console.log(string1 = string1 + object1[property1]);
  }
}

console.log(loopObj());

Why does the first example require an array and the second does not?

Answer 1

In your first example you used for..of which cannot be used on objects but on strings and arrays. To iterate an object either use for..in construct or you get the keys of the object into an array by using Object.keys().

Example using Object.keys():

const text = {
  name: "Coptic",
  ranges: [[994, 1008], [11392, 11508], [11513, 11520]],
  direction: "ltr",
  year: -200,
  living: false,
  link: "https://en.wikipedia.org/wiki/Coptic_alphabet"
};

for (let key of Object.keys(text)) {
  
  console.log(`${key}: ${text[key]}`);
}

Or you could also use the new Object.entries() to get the key and value like below:

const text = {
  name: "Coptic",
  ranges: [[994, 1008], [11392, 11508], [11513, 11520]],
  direction: "ltr",
  year: -200,
  living: false,
  link: "https://en.wikipedia.org/wiki/Coptic_alphabet"
};

for (let [key, value] of Object.entries(text)) {
  
  console.log(`${key}: ${value}`);
}