Can there be multiple objects with the same name in javascript?

Question

I have been reading about function closure in google map api. They use the following example:

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 < 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);
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>

html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }

 <div id="map"></div>

They are defining the marker variable in each loop iteration.

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

Answer 1

marker is a variable and every time loop iterates , a new object is created using new operator

Now every time marker variable gets updated it references to different object ,just variable assignments changes and objects are still in memory

Consider an example

var student = {
marks: 100
}

var student1 = student;
student = {
marks: 200
}

console.log(student1.marks); //100
console.log(student.marks); //200

See obects are still in memory only my student variable reference changes

Answer 2

Marker still gets overridden, but for this case it doesn't matter because they're not referring to those objects again. I can declare a variable within a loop, then perform an action right after, but as long as I don't need to refer to each individual object outside of the loop they should still serve their purpose, which in this case is to display the markers and show a secret message. For example, in the code below I use the same variable to make 5 buttons, and once I hover them each will alert me that I have hovered.

var buttons = ['button1', 'button2', 'button3', 'button4', 'button5'];

    for(var i = 0; i < buttons.length; ++i)
    {
        var btn = document.createElement("BUTTON");
        var t = document.createTextNode(buttons[i]);
        btn.appendChild(t);           
        document.body.appendChild(btn); 
        hover(btn, buttons[i]);
    } 

    function hover(thing,text)
    {
        thing.addEventListener('mouseover',function(){alert("hovered over "+ text);});
    }

Answer 3

Hi I thought this problem before. Sometime I have to pass specific parameter from the marker, so I put the marker into array and control the marker by index. This is my code snipped.

  var markersArray = []; //goolge map array
        function GmapCreateMaker(index, x, y, content, iconurl) { //creat Goole map icon
            var myLatlng = new google.maps.LatLng(y, x);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map
            });
            markersArray.push(marker);
            if (index == alldataarr.length - 1) {//Check All GMAP ICON ARE PUT INTO ARRAY
                showOverlays();
            }
        }
        function showOverlays() {  //put gmap icon on map
            for (i in markersArray) {
                markersArray[i].setMap(map);
            }
        }