Please explain how does this JS piece of code work? – Blancer.com Tutorials and projects

my javascript is rusty, and I am having trouble understanding the code is hosted at w3schools – https://www.w3schools.com/howto/howto_js_cascading_dropdown.asp. But the full code I will add below.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
var subjectObject = {
  "Front-end": {
    "HTML": ["Links", "Images", "Tables", "Lists"],
    "CSS": ["Borders", "Margins", "Backgrounds", "Float"],
    "JavaScript": ["Variables", "Operators", "Functions", "Conditions"]    
  },
  "Back-end": {
    "PHP": ["Variables", "Strings", "Arrays"],
    "SQL": ["SELECT", "UPDATE", "DELETE"]
  }
}
window.onload = function() {
  var subjectSel = document.getElementById("subject");
  var topicSel = document.getElementById("topic");
  var chapterSel = document.getElementById("chapter");
  for (var x in subjectObject) {
    subjectSel.options[subjectSel.options.length] = new Option(x, x);
  }
  subjectSel.onchange = function() {
    //empty Chapters- and Topics- dropdowns
    chapterSel.length = 1;
    topicSel.length = 1;
    //display correct values
    for (var y in subjectObject[this.value]) {
      topicSel.options[topicSel.options.length] = new Option(y, y);
    }
  }
  topicSel.onchange = function() {
    //empty Chapters dropdown
    chapterSel.length = 1;
    //display correct values
    var z = subjectObject[subjectSel.value][this.value];
    for (var i = 0; i < z.length; i++) {
      chapterSel.options[chapterSel.options.length] = new Option(z[i], z[i]);
    }
  }
}
</script>
</head>   
<body>

<h1>Cascading Dropdown Example</h1>

<form name="form1" id="form1" action="/action_page.php">
Subjects: <select name="subject" id="subject">
    <option value="" selected="selected">Select subject</option>
  </select>
  <br><br>
Topics: <select name="topic" id="topic">
    <option value="" selected="selected">Please select subject first</option>
  </select>
  <br><br>
Chapters: <select name="chapter" id="chapter">
    <option value="" selected="selected">Please select topic first</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">  
</form>

</body>
</html>

How does this part of the code work?

for (var x in subjectObject) {
    subjectSel.options[subjectSel.options.length] = new Option(x, x);
  }
  subjectSel.onchange = function() {
    //empty Chapters- and Topics- dropdowns
    chapterSel.length = 1;
    topicSel.length = 1;
    //display correct values
    for (var y in subjectObject[this.value]) {
      topicSel.options[topicSel.options.length] = new Option(y, y);
    }
  }
  topicSel.onchange = function() {
    //empty Chapters dropdown
    chapterSel.length = 1;
    //display correct values
    var z = subjectObject[subjectSel.value][this.value];
    for (var i = 0; i < z.length; i++) {
      chapterSel.options[chapterSel.options.length] = new Option(z[i], z[i]);
    }
  }

Im not understanding completely how the code works. Please correct me where I falter.

var subjectSel = document.getElementById("subject"); this gets the value of the option that is currently selected in the dropdown right?
im not sure what this means for (var x in subjectObject) { subjectSel.options[subjectSel.options.length] = new Option(x, x);. is it counting the number of options in the dropdown? what is new Option(x, x)?
subjectSel.onchange basically says if the 1st dropdown changes then do the following code. does chapterSel.length = 1; select the 1st option in the 2nd dropdown being what is already in the html – please select subject first?
for (var y in subjectObject[this.value]) { topicSel.options[topicSel.options.length] = new Option(y, y); } . What happens here? similar to the first dropdown, is it counting the number of the options in the dropdown?

Im not sure at what point or how it is determined which piece of information in the subjectobject object is put into which dropdown. how is the following 3 lines associated:

for (var x in subjectObject) {
 for (var y in subjectObject[this.value]) {
var z = subjectObject[subjectSel.value][this.value];
    for (var i = 0; i < z.length; i++) {

I can guess that it is linked to the object subjectobject, and I can see that “this.value” is getting nested further and further to select the relevant values. can you explain further how it is picking the value of the array and not the id, i.e. html,css, javascript, and not 0,1,2?

thanks in advance for your help