JavaScript: Global variable seems to be overwritten

Question

I'm currently working on the following code which should only save the first position. Anything detected afterwards should be ignored:

var markerPos;
var markerAlreadyDetected = false;

AFRAME.registerComponent('barcode_marker', {
    init: function () {
        const marker = document.querySelector('#marker');

        marker.addEventListener('markerFound', function () {
            console.log("Marker Already Detected:", markerAlreadyDetected);

            if (!markerAlreadyDetected) {
                markerAlreadyDetected = true;
                markerPos = marker.getAttribute('position');
                console.log("Saved new marker location.", markerPos);
            } else {
                console.log("Already detected marker.");
            }

            console.log("Saved marker position:", markerPos);
        });
    }
});

Eventhough the if(!markerAlreadyDetected) executes properly, the global variable seems to be changing everytime, the marker gets detected.

Here's some console output.

Answer 1

This post was originally posted by VLAZ as a comment.

You're assigning an object, which means it can change freely without you reassigning it. If you need to maintain a concrete state of the object, you need to make a clone of it or just take the primitive values you need from it.