Can someone explain this JavaScript mystery?
<p>I was writing a simple recursive function in JavaScript and encountered some really weird behavior. At first I thought it's bug in a browser, but I tried it in FireFox, Chrome and IE9 and they all behave exactly the same way.</p>

<p>The HTML file below runs a simple JS function on page load. The function is recursive (calling itself exactly once). Essentially the function creates a new Array object and returns it. The weird thing is that after the function calls itself recursively, x and y reference to the same object, which as far as I understand it should not happen. Also if you uncomment the last line before <em>return x</em>, the alert <em>"x == y"</em> alert is not shown.</p>

<pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml" &gt;
&lt;head&gt;
&lt;title&gt;JavaScript weirdness...&lt;/title&gt;
&lt;script type="text/javascript" language="javascript"&gt;
    function RecursiveF(n) {
        x = [ n ];

        if (n &gt; 0) {
            y = RecursiveF(n - 1);
            if (x == y)
                alert('x == y');
        }

        //if (n == 0) return [ n ];

        return x;
    }
&lt;/script&gt;
&lt;/head&gt;&lt;body onload="javascript:RecursiveF(1);"&gt;&lt;/body&gt;&lt;/html&gt;
</code></pre>

<p>Any hints to why <em>"x == y"</em> alert appears in this page? </p>
