Can there be multiple objects with the same name in javascript?
<p>I have been reading about function closure in google map api. They use the following example:  </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: {lat: -25.363882, lng: 131.044922 }
        });

        var bounds = {
          north: -25.363882,
          south: -31.203405,
          east: 131.044922,
          west: 125.244141
        };

        // Display the area between the location southWest and northEast.
        map.fitBounds(bounds);

        // Add 5 markers to map at random locations.
        // For each of these markers, give them a title with their index, and when
        // they are clicked they should open an infowindow with text from a secret
        // message.
        var secretMessages = ['This', 'is', 'the', 'secret', 'message'];
        var lngSpan = bounds.east - bounds.west;
        var latSpan = bounds.north - bounds.south;
        for (var i = 0; i &lt; secretMessages.length; ++i) {
          var marker = new google.maps.Marker({
            position: {
              lat: bounds.south + latSpan * Math.random(),
              lng: bounds.west + lngSpan * Math.random()
            },
            map: map
          });
          attachSecretMessage(marker, secretMessages[i]);
        }
      }

      // Attaches an info window to a marker with the provided message. When the
      // marker is clicked, the info window will open with the secret message.
      function attachSecretMessage(marker, secretMessage) {
        var infowindow = new google.maps.InfoWindow({
          content: secretMessage
        });

        marker.addListener('click', function() {
          infowindow.open(marker.get('map'), marker);
        });
      }
    &lt;/script&gt;
    &lt;script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&amp;callback=initMap"&gt;
    &lt;/script&gt;</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div id="map"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>They are defining the <code>marker</code> variable in each loop iteration. </p>

<blockquote>
  <p>Question: Why doesn't the <code>marker</code> declared in previous declaration get overridden by the <code>marker</code> declared in the next loop iteration? Why are multiple markers shown on the map? Since there is only one <code>marker</code> variable, there should be only one `marker shown on the map.</p>
</blockquote>