Difference between ( for... in ) and ( for... of ) statements?

Question

I know what is a for... in loop (it iterates over the keys), but I have heard about for... of for the first time (it iterates over values).

I am confused about for... of loop.

var arr = [3, 5, 7];
arr.foo = "hello";
    
for (var i in arr) {
  console.log(i); // logs "0", "1", "2", "foo"
}
    
for (var i of arr) {
  console.log(i); // logs "3", "5", "7"
  // it doesn't log "3", "5", "7", "hello"
}

I understand that for... of iterates over property values. Then why doesn't it log "3", "5", "7", "hello" instead of "3", "5", "7"?

Unlike for... in loop, which iterates over each key ("0", "1", "2", "foo") and also iterates over the foo key, the for... of does not iterate over the value of foo property, i.e., "hello". Why it is like that?

Here I console for... of loop. It should log "3", "5", "7","hello" but it logs "3", "5", "7". Why?

Example Link

Connecticut

in the case you miss it, here is the inception link developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… – Vauntcourier

As far as my understanding goes, for ... of was brought into the language to fix the problems with using for ... in with Arrays. Array.prototype could be amended in such a way that extra properties are available, making it unsafe to iterate them as you could get non numeric keys that you weren't expecting. – Sharolynsharon

For future readers: this is probably not a duplicate of JavaScript of Keyword (for…of loops), since it asks about a specific behavior of the feature, rather than asking for a general overview. – Mortgagor

Just get to used to saying "for <key> in" and "for <value> of" and realize IE doesn't support for..of – Chekiang

@Chekiang "realize IE doesn't support for..of" While that's technically true, most modern projects use Babel anyway. – Pallaton

Answer 1

for in loops over enumerable property names of an object.

for of (new in ES6) does use an object-specific iterator and loops over the values generated by that.

In your example, the array iterator does yield all the values in the array (ignoring non-index properties).

Asphyxia

IE doesn't yet support For of, Chrome, Firefox, and Edge do – Deathwatch

A mnemonic: 'o'f -> not 'o'bjects, 'i'n -> not 'i'terables – Rectus

another mnemonic: for... of :: arrays :: arrays always have a length, so you can think for.. [nth element] of.. [q elements] – Sardella

Another mnemonic...for..in..keys === foreign keys === use for...in for keys! As such, use for...of for values. – Seed

these names are confusion prone... bad choice of names – Shandishandie

@Rectus For that mnemonic, you have to remember that it's "NOT" rather than "IS". And midst all the other mnemonics that flip the negative, you forget which ones are flipped and which ones are not. So any mnemonic that relies on a negation is doesn't work at scale imo. If you're focused only on javascript, good enough. – Henrietta

in gives you index. This is more than enough to remember the difference. If you apply logic on other fronts. – Cadet

Not particularly relevant anymore but was it acceptable to use for...in with non-enumerables before ES6? Found some old code that uses it like that, just curious really – Dragoon

@AllieHowe What do you mean by "non-enumerables"? If the object has properties that are not enumerable, for … in won't enumerate them. – Asphyxia

From some article I read: Think about pearls of a necklace and words in a dictionary. Pearls of a necklace is an array of pearls. Words in a dictionary is an object. Use of to loop through arrays. Use in to loop through objects. – Marshall

for...in ⇒ keys in an object — for...of ⇒ items of an array – Ambassadoratlarge

Honestly the best mnemonic for me is "for...in was first and got the good name for the easier thing, enumerable properties. for...of does iterators which came later and is more difficult, so its name sucks" – Levanter

NodeList looks like any array but it requires for of. Why is that? – Chaparral

@Chaparral Any array should be used with for … of, not with for … in? But yes, a nodelist is not an array (mostly for history reasons), at least it has been made iterable for convenience. – Asphyxia

The mnemonic I use is "for...in is 'foreign'--because you shouldn't use it." XD Object.keys(obj) is almost always a better choice. – Birgit

Note that for...in could be used for iterables such as array-like objects, but is considered bad practice cause it doesn't guarantee order, iterates over inherited enumerable properties, and is usually slower #501004 – Evangelist

@AidenCullo No it could not! It does not iterate them, it enumerates their properties, if they have any. It does not work on Map instances for example. – Asphyxia

One more mnemonic! for...of replaces for (let i = 0; ...), so for...0f. I haven't been able to remember the difference reliably without this one. – Rivulet

I keep for...in and for...of straight in my mind by simply remembering that the words in and enumerable both begin with the same syllable, therefore they go together. – Jauregui

Answer 2

I found a complete answer at Iterators and Generators (Although it is for TypeScript, this is the same for JavaScript too)

Both for..of and for..in statements iterate over lists; the values iterated on are different though, for..in returns a list of keys on the object being iterated, whereas for..of returns a list of values of the numeric properties of the object being iterated.

Here is an example that demonstrates this distinction:

let list = [4, 5, 6];

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

for (let i of list) {
   console.log(i); // "4", "5", "6"
}

Another distinction is that for..in operates on any object; it serves as a way to inspect properties on this object. for..of on the other hand, is mainly interested in values of iterable objects. Built-in objects like Map and Set implement Symbol.iterator property allowing access to stored values.

let pets = new Set(["Cat", "Dog", "Hamster"]);
pets["species"] = "mammals";

for (let pet in pets) {
   console.log(pet); // "species"
}

for (let pet of pets) {
    console.log(pet); // "Cat", "Dog", "Hamster"
}

Manning

Futhermore, calling something like for(let i of {}) { console.log(i); } would throw an TypeError: VM391:1 Uncaught TypeError: {} is not iterable at <anonymous>:1:14, at least in Chrome – Wiretap

TS for the win - the example is incorrect, the latter should return "mammals", not // "Cat", "Dog", "Hamster" – Chastain

I remember it by: for "in" for index. And then for "of" would be the values of each index/key/item. – Thermosetting

Nice, this is going to be king for me: using for-ins for iteration of items I usually have to create a let thisItem = items[all]; variable, for...of helps shortcut that! – Refund

I remember it by: for...in as Object.keys(), guess what? Arrays are objects, sot that would also returns their indeces. :) – Soma

@Thermosetting Thank you, I finally have a way to remember it. for...in-dex – Pero

A note worth mentioning here: Indexes returned by for...in are strings! ...in case you need to use the index here as a number you need to convert it e.g Number(i) – Gone

@Gone That's why you shouldn't use in for arrays. Use a traditional for loop to run over an array and you will deal with numbers, the string to number conversion is unnecessary and the in approach should be slower because of that. in is more suited to iterating keys of an object, which one can call "indexes" to make this mnemonic work. – Slantwise

Answer 3

Difference for..in and for..of:

Both for..in and for..of are looping constructs which are used to iterate over data structures. The only difference between them is the entities they iterate over:

1. for..in iterates over all enumerable property keys of an object
2. for..of iterates over the values of an iterable object. Examples of iterable objects are arrays, strings, and NodeLists.

Example:

let arr = ['el1', 'el2', 'el3'];

arr.addedProp = 'arrProp';

// elKey are the property keys
for (let elKey in arr) {
  console.log(elKey);
}

// elValue are the property values
for (let elValue of arr) {
  console.log(elValue)
}

In this example we can observe that the for..in loop iterates over the keys of the object, which is an array object in this example. The keys are 0, 1, 2 (which correspond to the array elements) and addedProp. This is how the arr array object looks in chrome devtools:

You see that our for..in loop does nothing more than simply iterating over these keys.

---

The for..of loop in our example iterates over the values of a data structure. The values in this specific example are 'el1', 'el2', 'el3'. The values which an iterable data structure will return using for..of is dependent on the type of iterable object. For example an array will return the values of all the array elements whereas a string returns every individual character of the string.

Scaly

why for of not outputting "arrProp" ? – Orchitis

@AlifRamdani In this case, specifically because the object in question is an Array. That's what @Willem meant with "The values which an iterable data structure will return using for..of is dependent on the type of iterable object." In the case of an Array, that's just numerical indexes. – Cataplasia

Answer 4

For...in loop

The for...in loop improves upon the weaknesses of the for loop by eliminating the counting logic and exit condition.

Example:

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const index in digits) {
  console.log(digits[index]);
}

But, you still have to deal with the issue of using an index to access the values of the array, and that stinks; it almost makes it more confusing than before.

Also, the for...in loop can get you into big trouble when you need to add an extra method to an array (or another object). Because for...in loops loop over all enumerable properties, this means if you add any additional properties to the array's prototype, then those properties will also appear in the loop.

Array.prototype.decimalfy = function() {
  for (let i = 0; i < this.length; i++) {
    this[i] = this[i].toFixed(2);
  }
};

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const index in digits) {
  console.log(digits[index]);
}

Prints:

0

1

2

3

4

5

6

7

8

9

function() {  for (let i = 0; i < this.length; i++) {   this[i] = this[i].toFixed(2);  } }

This is why for...in loops are discouraged when looping over arrays.

NOTE: The forEach loop is another type of for loop in JavaScript. However, forEach() is actually an array method, so it can only be used exclusively with arrays. There is also no way to stop or break a forEach loop. If you need that type of behavior in your loop, you’ll have to use a basic for loop.

For...of loop

The for...of loop is used to loop over any type of data that is iterable.

Example:

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const digit of digits) {
  console.log(digit);
}

Prints:

0

1

2

3

4

5

6

7

8

9

This makes the for...of loop the most concise version of all the for loops.

But wait, there’s more! The for...of loop also has some additional benefits that fix the weaknesses of the for and for...in loops.

You can stop or break a for...of loop at anytime.

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const digit of digits) {
  if (digit % 2 === 0) {
    continue;
  }
  console.log(digit);
}

Prints:

1

3

5

7

9

And you don’t have to worry about adding new properties to objects. The for...of loop will only loop over the values in the object.

Jessiajessica

"The for...in loop improves upon the weaknesses of the for loop by eliminating the counting logic and exit condition" - no, that's not what it does. Not at all. – Asphyxia

@Asphyxia Could you maybe clarify why you think that's not what it does, and what you actually think it improves on? – Jessiajessica

It doesn't improve on anything, it has its own raison d'être. It does something totally different than a for (var index=0; index<arr.length; index++) loop (where the index counter is an integer, unlike in your example). – Asphyxia

kind of makes it confusing that the array values you chose for the example correspond with the array index values... – Competition

Your example uses an array containing numbers from 0 to 9, which will confuse people as if they are indices, please change your source data to something more contextual. – Soapbox

@Asphyxia Mind explaining what you are talking about when claiming he ain't using index counter as an integer, because for as far as I can tell is that most if not all indexing variables used in provided answer are of integer type? – Arrange

@Arrange In for (const index in digits), the index is a string. It's neither a counter nor an integer, and that is very much a problem. Just never use for…in enumerations on arrays! – Asphyxia

@Asphyxia Totally agree. Furthermore, I wouldn't recommend name that variable index at all and name it key, propertyName (or something like that) instead. E.g. for (const key in digits). Because it is the meaning of it. – Peduncle

Answer 5

Here is a useful mnemonic for remembering the difference between for...in Loop and for...of Loop.

"index in, object of"

for...in Loop => iterates over the index in the array.

for...of Loop => iterates over the object of objects.

Nesselrode

what is "object of objects"? it's better to say "the keys of the object" but anyway, you will later remember "index of" instead of "index in" and "keys in" instead of "keys of" so that mnemonic is not perfect – Millur

Answer 6

for of is used to iterate over iterables and for in is used to iterate over object properties

Here's a trick to remember:

for of is not for objects (so it's for iterables)

for in is not for iterables (so it's for objects)

Another trick:

for in returns object indices (keys) while for of returns values

Pearlene

ah gotcha - so its the opposite of what i might expect it to be. that should make it easy to remember. 😁 thank you for your answer. – Bateau

Answer 7

//for in, iterates keys in an object and indexes in an array

 let obj={a:1, b:2}
    
    for( const key in obj)
      console.log(obj[key]); //would print 1 and 2
      console.log(key);      //would print a and b

 let arr = [10, 11, 12, 13];

  for (const item in arr) 
    console.log(item);   //would print 0 1 2 3

//for of, iterates values in an array or any iterable

let arr = [10, 11, 12, 13];

for (const item of arr )
  console.log(item);  //would print 10  11  12  13

Restrained

Answer 8

Short answer: for...in loops over keys, while for...of loops over values.

for (let x in ['a', 'b', 'c', 'd'] {
    console.log(x); 
}

// Output
0
1
2
3


for (let x of ['a', 'b', 'c', 'd'] {
    console.log(x); 
}

// Output
a
b
c
d

Gosney

Answer 9

Another difference between the two loops, which nobody has mentioned before:

Destructuring for...in is deprecated. Use for...of instead.

Source

So if we want to use destructuring in a loop, for get both index and value of each array element, we should to use the for...of loop with the Array method entries():

for (const [idx, el] of arr.entries()) {
    console.log( idx + ': ' + el );
}

Charissa

Yes @GalMargalit, I read it carefully. I agree that the for each...in is deprecated (first point), but I did not write about it... I wrote that "Destructuring for...in is deprecated. Use for...of instead." (second point): developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… Do you agree with me @GalMargalit? – Charissa

Haha you are right, I didn't read carefully! True, I was basically thinking the same thing and thought you are referring to another. – Tamar

Answer 10

The for...in statement iterates over the enumerable properties of an object, in an arbitrary order. Enumerable properties are those properties whose internal [[Enumerable]] flag is set to true, hence if there is any enumerable property in the prototype chain, the for...in loop will iterate on those as well.

The for...of statement iterates over data that iterable object defines to be iterated over.

Example:

Object.prototype.objCustom = function() {}; 
Array.prototype.arrCustom = function() {};

let iterable = [3, 5, 7];

for (let i in iterable) {
  console.log(i); // logs: 0, 1, 2, "arrCustom", "objCustom"
}

for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); // logs: 0, 1, 2,
  }
}

for (let i of iterable) {
  console.log(i); // logs: 3, 5, 7
}

Like earlier, you can skip adding hasOwnProperty in for...of loops.

Huckaby

Answer 11

The for-in statement iterates over the enumerable properties of an object, in arbitrary order.

The loop will iterate over all enumerable properties of the object itself and those the object inherits from its constructor's prototype

You can think of it as "for in" basically iterates and list out all the keys.

var str = 'abc';
var arrForOf = [];
var arrForIn = [];

for(value of str){
  arrForOf.push(value);
}

for(value in str){
  arrForIn.push(value);
}

console.log(arrForOf); 
// ["a", "b", "c"]
console.log(arrForIn); 
// ["0", "1", "2", "formatUnicorn", "truncate", "splitOnLast", "contains"]

Mckellar

for in will only show the keys if they are added by us, it's not gonna show formatUnicorn – Appendectomy

"formatUnicorn", "truncate", "splitOnLast", "contains" print out because stackoverflow override String.prototype. – Catharinecatharsis

Answer 12

There are some already defined data types which allows us to iterate over them easily e.g Array, Map, String Objects

Normal for in iterates over the iterator and in response provides us with the keys that are in the order of insertion as shown in below example.

  const numbers = [1,2,3,4,5];
   for(let number in number) {
     console.log(number);
   }

   // result: 0, 1, 2, 3, 4

Now if we try same with for of, then in response it provides us with the values not the keys. e.g

  const numbers = [1,2,3,4,5];
   for(let numbers of numbers) {
    console.log(number);
  }

  // result: 1, 2, 3, 4, 5

So looking at both of the iterators we can easily differentiate the difference between both of them.

Note:- For of only works with the Symbol.iterator

So if we try to iterate over normal object, then it will give us an error e.g-

const Room = {
   area: 1000,
   height: 7,
   floor: 2
 }

for(let prop in Room) {
 console.log(prop);
 } 

// Result area, height, floor

for(let prop of Room) {
  console.log(prop);
 } 

Room is not iterable

Now for iterating over we need to define an ES6 Symbol.iterator e.g

  const Room= {
    area: 1000, height: 7, floor: 2,
   [Symbol.iterator]: function* (){
    yield this.area;
    yield this.height;
    yield this.floors;
  }
}


for(let prop of Room) {
  console.log(prop);
 } 

//Result 1000, 7, 2

This is the difference between For in and For of. Hope that it might clear the difference.

Extrajudicial

while you are defining Symbol.iterator, why have you used function* and not function, what is the difference and what is the point of using function* here, please explain. – Donovan

function* defines a generator function. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…* – Steamheated

Answer 13

Just remember that for in is used for objects, while for of is used for arrays, strings, etc.

However, you don't even need to use for in. You can always use for of instead:

const person = {name: 'John', age: 31};

for (let key in person) {
   console.log(key, ': ', person[key]);  // name: John
}                                        // age: 31

for (let [key, value] of Object.entries(person)) {
   console.log(key, ': ', value); // The same output
} 

Wedlock

Answer 14

The for-in loop

for-in loop is used to traverse through enumerable properties of a collection, in an arbitrary order. A collection is a container type object whose items can be using an index or a key.

var myObject = {a: 1, b: 2, c: 3};
var myArray = [1, 2, 3];
var myString = "123";

console.log( myObject[ 'a' ], myArray[ 1 ], myString[ 2 ] );

for-in loop extracts the enumerable properties (keys) of a collection all at once and iterates over it one at a time. An enumerable property is the property of a collection that can appear in for-in loop.

By default, all properties of an Array and Object appear in for-in loop. However, we can use Object.defineProperty method to manually configure the properties of a collection.

var myObject = {a: 1, b: 2, c: 3};
var myArray = [1, 2, 3];

Object.defineProperty( myObject, 'd', { value: 4, enumerable: false } );
Object.defineProperty( myArray, 3, { value: 4, enumerable: false } );

for( var i in myObject ){ console.log( 'myObject:i =>', i ); }
for( var i in myArray ){ console.log( 'myArray:i  =>', i ); }

In the above example, the property d of the myObject and the index 3 of myArray does not appear in for-in loop because they are configured with enumerable: false.

There are few issues with for-in loops. In the case of Arrays, for-in loop will also consider methods added on the array using myArray.someMethod = f syntax, however, myArray.length remains 4.

The for-of loop

It is a misconception that for-of loop iterate over the values of a collection. for-of loop iterates over an Iterable object. An iterable is an object that has the method with the name Symbol.iterator directly on it one on one of its prototypes.

Symbol.iterator method should return an Iterator. An iterator is an object which has a next method. This method when called return value and done properties.

When we iterate an iterable object using for-of loop, the Symbol.iterator the method will be called once get an iterator object. For every iteration of for-of loop, next method of this iterator object will be called until done returned by the next() call returns false. The value received by the for-of loop for every iteration if the value property returned by the next() call.

var myObject = { a: 1, b: 2, c: 3, d: 4 };

// make `myObject` iterable by adding `Symbol.iterator` function directlty on it
myObject[ Symbol.iterator ] = function(){
  console.log( `LOG: called 'Symbol.iterator' method` );
  var _myObject = this; // `this` points to `myObject`
  
  // return an iterator object
  return {
    keys: Object.keys( _myObject ), 
    current: 0,
    next: function() {
      console.log( `LOG: called 'next' method: index ${ this.current }` );
      
      if( this.current === this.keys.length ){
        return { done: true, value: null }; // Here, `value` is ignored by `for-of` loop
      } else {
        return { done: false, value: _myObject[ this.keys[ this.current++ ] ] };
      }
    }
  };
}

// use `for-of` loop on `myObject` iterable
for( let value of myObject ) {
  console.log( 'myObject: value => ', value );
}

The for-of loop is new in ES6 and so are the Iterable and Iterables. The Array constructor type has Symbol.iterator method on its prototype. The Object constructor sadly doesn't have it but Object.keys(), Object.values() and Object.entries() methods return an iterable (you can use console.dir(obj) to check prototype methods). The benefit of the for-of loop is that any object can be made iterable, even your custom Dog and Animal classes.

The easy way to make an object iterable is by implementing ES6 Generator instead of custom iterator implementation.

Unlike for-in, for-of loop can wait for an async task to complete in each iteration. This is achieved using await keyword after for statement documentation.

Another great thing about for-of loop is that it has Unicode support. According to ES6 specifications, strings are stored with UTF-16 encoding. Hence, each character can take either 16-bit or 32-bit. Traditionally, strings were stored with UCS-2 encoding which has supports for characters that can be stored within 16 bits only.

Hence, String.length returns number of 16-bit blocks in a string. Modern characters like an Emoji character takes 32 bits. Hence, this character would return length of 2. for-in loop iterates over 16-bit blocks and returns the wrong index. However, for-of loop iterates over the individual character based on UTF-16 specifications.

var emoji = "😊🤣";

console.log( 'emoji.length', emoji.length );

for( var index in emoji ){ console.log( 'for-in: emoji.character', emoji[index] ); }
for( var character of emoji ){ console.log( 'for-of: emoji.character', character ); }

Inimitable

Answer 15

for...of loop works only with iterable objects. In JavaScript, iterables are objects which can be looped over.

String, Array, TypedArray, Map, and Set are all built-in iterables, because each of their prototype objects implements an @@iterator method. So, for...of loop works on the mentioned object types.

Object in JavaScript is not iterable by default. So, for...of loop does not work on objects.

In simple words, for...of works with strings and arrays but not with objects.

for...in works with those properties whose enumerable flag is set to true.

Enumerable flag for properties created via simple assignment or property initializer are by default true. Enumerable flag for properties created via Object.defineProperty are by default false.

Here is a more detailed post with examples: https://dev.to/swastikyadav/difference-between-forof-and-forin-loop-in-javascript-j2o

Spacesuit

Answer 16

In simple terms forIN iterates over the KEYS IN the array(index)/object(key),
whereas forOF iterates over the VALUES OF the array(value).

Hibernia

Answer 17

A see a lot of good answers, but I decide to put my 5 cents just to have good example:

For in loop

iterates over all enumerable props

let nodes = document.documentElement.childNodes;

for (var key in nodes) {
  console.log( key );
}

For of loop

iterates over all iterable values

let nodes = document.documentElement.childNodes;

for (var node of nodes) {
  console.log( node.toString() );
}

Disabled

Answer 18

When I first started out learning the for in and of loop, I was confused with my output too, but with a couple of research and understanding you can think of the individual loop like the following : The

1. for...in loop returns the indexes of the individual property and has no effect of impact on the property's value, it loops and returns information on the property and not the value. E.g

let profile = { name : "Naphtali", age : 24, favCar : "Mustang", favDrink : "Baileys" }

The above code is just creating an object called profile, we'll use it for both our examples, so, don't be confused when you see the profile object on an example, just know it was created.

So now let us use the for...in loop below

for(let myIndex in profile){
    console.log(`The index of my object property is ${myIndex}`)
}
 // Outputs : 
        The index of my object property is 0
        The index of my object property is 1
        The index of my object property is 2
        The index of my object property is 3

Now Reason for the output being that we have Four(4) properties in our profile object and indexing as we all know starts from 0...n, so, we get the index of properties 0,1,2,3 since we are working with the for..in loop.

2. for...of loop* can return either the property, value or both, Let's take a look at how. In javaScript, we can't loop through objects normally as we would on arrays, so, there are a few elements we can use to access either of our choices from an object.

   • Object.keys(object-name-goes-here) >>> Returns the keys or properties of an object.

   • Object.values(object-name-goes-here) >>> Returns the values of an object.

   • Object.entries(object-name-goes-here) >>> Returns both the keys and values of an object.

---

Below are examples of their usage, pay attention to Object.entries() :

Step One: Convert the object to get either its key, value, or both.
Step Two: loop through.


// Getting the keys/property

   Step One: let myKeys = ***Object.keys(profile)***
   Step Two: for(let keys of myKeys){
             console.log(`The key of my object property is ${keys}`)
           }

// Getting the values of the property

    Step One: let myValues = ***Object.values(profile)***
    Step Two : for(let values of myValues){
                 console.log(`The value of my object property is ${values}`)
               }

When using Object.entries() have it that you are calling two entries on the object, i.e the keys and values. You can call both by either of the entry. Example Below.

Step One: Convert the object to entries, using ***Object.entries(object-name)***
Step Two: **Destructure** the ***entries object which carries the keys and values*** 
like so **[keys, values]**, by so doing, you have access to either or both content.


    // Getting the keys/property

       Step One: let myKeysEntry = ***Object.entries(profile)***
       Step Two: for(let [keys, values] of myKeysEntry){
                 console.log(`The key of my object property is ${keys}`)
               }

    // Getting the values of the property

        Step One: let myValuesEntry = ***Object.entries(profile)***
        Step Two : for(let [keys, values] of myValuesEntry){
                     console.log(`The value of my object property is ${values}`)
                   }

    // Getting both keys and values

        Step One: let myBothEntry = ***Object.entries(profile)***
        Step Two : for(let [keys, values] of myBothEntry){
                     console.log(`The keys of my object is ${keys} and its value 
is ${values}`)
                   }

Make comments on unclear parts section(s).

Craftsman

The very first line you mentioned is wrong. You mentioned >> "for...in loop returns the indexes of the individual property". Actually in terms of Object, (for . . . in) returns the object key. Also, we can not perform for . . . of on object. We can perform (for . . in) and (for . . . of) on Array. – Quindecennial

Answer 19

Everybody did explain why this problem occurs, but it's still very easy to forget about it and then scratching your head why you got wrong results. Especially when you're working on big sets of data when the results seem to be fine at first glance.

Using Object.entries you ensure to go trough all properties:

var arr = [3, 5, 7];
arr.foo = "hello";

for ( var [key, val] of Object.entries( arr ) ) {
   console.log( val );
}

/* Result:

3
5
7
hello

*/

Malcommalcontent

Answer 20

Unique data constructors like this are usually used for obfuscators or alternatively to create <cencored>. brrr

var arr = [3, 5, 7];
arr.foo = "hello";

console.log(typeof arr) // object
console.log(Object.keys(arr)) // ["0", "1", "2", "foo"]
console.log(Object.values(arr)) // ["3", "5", "7", "hello"]
// console.log(Object.entries(arr))
for (var index in arr) { 
  console.log(index); // logs "0", "1", "2", "foo"
}
for (var value of arr) {
  console.log(value); // logs "3", "5", "7"
}
for (var objValue of Object.values(arr)) {
  console.log(objValue); // logs "3", "5", "7", "hello"
}

Dextral

Answer 21

Simple answer is for..of you can use async inside it while for..in does not.

Metternich