2018-10-12 15:37:13 -04:00 
										
									 
								 
							 
							
								
							 
							
								 
							
							
								---
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								title: For...Of Loop
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								---
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								The `for...of`  statement creates a loop iterating over iterable objects (including Array, Map, Set, Arguments object and so on), invoking a custom iteration hook with statements to be executed for the value of each distinct property.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								```javascript
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								    for (variable of object) {
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								        statement
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								    }
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								```
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								| | Description |
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								|----------|-------------------------------------|
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								| variable | On each iteration a value of a different property is assigned to variable. |
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								| object | Object whose enumerable properties are iterated. |
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								## Examples
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								### Array
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								```javascript
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								    let arr = [ "fred", "tom", "bob" ];
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								    for (let i of arr) {
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								        console.log(i);
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								    }
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								    // Output:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								    // fred
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								    // tom
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								    // bob
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								```
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								### Map
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								```javascript
							 
						 
					
						
							
								
									
										
										
										
											2018-11-24 08:41:42 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								    const m = new Map();
							 
						 
					
						
							
								
									
										
										
										
											2018-10-12 15:37:13 -04:00 
										
									 
								 
							 
							
								
							 
							
								 
							
							
								    m.set(1, "black");
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								    m.set(2, "red");
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-11-24 08:41:42 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								    for (let n of m) {
							 
						 
					
						
							
								
									
										
										
										
											2018-10-12 15:37:13 -04:00 
										
									 
								 
							 
							
								
							 
							
								 
							
							
								        console.log(n);
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								    }
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								    // Output:
							 
						 
					
						
							
								
									
										
										
										
											2018-11-24 08:41:42 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								    // [1, "black"]
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								    // [2, "red"]
							 
						 
					
						
							
								
									
										
										
										
											2018-10-12 15:37:13 -04:00 
										
									 
								 
							 
							
								
							 
							
								 
							
							
								```
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								### Set
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								```javascript
							 
						 
					
						
							
								
									
										
										
										
											2018-11-24 08:41:42 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								    const s = new Set();
							 
						 
					
						
							
								
									
										
										
										
											2018-10-12 15:37:13 -04:00 
										
									 
								 
							 
							
								
							 
							
								 
							
							
								    s.add(1);
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								    s.add("red");
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-11-24 08:41:42 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								    for (let n of s) {
							 
						 
					
						
							
								
									
										
										
										
											2018-10-12 15:37:13 -04:00 
										
									 
								 
							 
							
								
							 
							
								 
							
							
								        console.log(n);
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								    }
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								    // Output:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								    // 1
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								    // red
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								```
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								### Arguments object
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								```javascript
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								    // your browser must support for..of loop
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								    // and let-scoped variables in for loops
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								    function displayArgumentsObject() {
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								        for (let n of arguments) {
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								            console.log(n);
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								        }
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								    }
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								    displayArgumentsObject(1, 'red');
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								    // Output:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								    // 1
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								    // red
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								```
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								# Other Resources:
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								*  [MDN link ](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/for...of ) 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								*  [MSDN link ](https://msdn.microsoft.com/library/dn858238%28v=vs.94%29.aspx?f=255&MSPPError=-2147217396 ) 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								*  [arguments @@iterator ](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments/@@iterator )