for...of loop is used to iterate value from array, map, set. This loop iterates the value one by one but in the for...in loop it is used to iterate keys from Array, Map, Set. But normally we use for...in in loop used in object iteration.
Syntax
for( variable of object){
statement.
}
Example
<!doctype html>
<html lang='en'>
<head>
<!-- Required meta tags -->
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<!-- Bootstrap CSS -->
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' integrity='sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T' crossorigin='anonymous'>
<title>Execption handling</title>
</head>
<body>
<div class='container mt-5'>
<h1 class='text-center'>for...of loop()</h1>
<form class='mt-5'>
<div class='form-group'>
<input type='number' class='form-control' id='val1' placeholder='Enter value ' />
</div>
<div class='form-group'>
<input type='button' id='btn1' class='btn btn-warning mx-3' value='Add Data' onclick='loadData()' />
<input type='button' id='btn' class='btn btn-primary mx-3' value='Show Me' onclick='myFunc()' />
</div>
</form>
<p id='res' class=''></p>
<script type='text/javascript'>
var ary=[];
var i = 0;
var para = document.getElementById('res');
function myFunc() {
if (ary.length === 0) {
para.innerHTML = 'Please add value !!!';
para.className = 'alert alert-danger';
} else {
para.className = 'alert alert-success';
para.innerHTML = '';
for(let data of ary)
para.innerHTML +=data +', ';
}
}
function loadData() {
var a = document.getElementById('val1');
var x = Math.floor((Math.random() * 10000) + 1);
a.value = x;
ary[i++] = x;
para.className = 'alert alert-success';
para.innerHTML = x+' Add in array';
}
</script>
</div>
<script src='https://code.jquery.com/jquery-3.3.1.slim.min.js' integrity='sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo' crossorigin='anonymous'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js' integrity='sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1' crossorigin='anonymous'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js' integrity='sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM' crossorigin='anonymous'></script>
</body>
</html>
Output
