<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>CodingSpot &#187; JavaScript</title>
	<atom:link href="http://codingspot.com/category/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://codingspot.com</link>
	<description>JavaScript, C#, Java, etc... software development</description>
	<lastBuildDate>Thu, 11 Feb 2010 06:26:01 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Answering the Juriy Zaytsev JavaScript Quiz</title>
		<link>http://codingspot.com/2010/02/answering-the-juriy-zaytsev-javascript-quiz/</link>
		<comments>http://codingspot.com/2010/02/answering-the-juriy-zaytsev-javascript-quiz/#comments</comments>
		<pubDate>Tue, 09 Feb 2010 06:17:51 +0000</pubDate>
		<dc:creator>cmsalvado</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[quiz]]></category>

		<guid isPermaLink="false">http://codingspot.com/?p=31</guid>
		<description><![CDATA[Juriy Zaytsev (aka kangax) made a really nice JavaScript quiz, which covers a lot of interesting subjects such as scoping, function expressions, variable and function declarations, references, order of evaluation, object instantiation and more. I&#8217;ve had a great time answering those questions, and I would like to share my answers with a brief explanation. #1 [...]]]></description>
			<content:encoded><![CDATA[<div>
Juriy Zaytsev (aka kangax) made a really nice <a href="http://perfectionkills.com/javascript-quiz/">JavaScript quiz</a>, which covers a  lot of interesting subjects such as scoping, function expressions, variable and function declarations, references, order of evaluation, object instantiation and more.</p>
<p>I&#8217;ve had a great time answering those questions, and I would like to share my answers with a brief explanation.</p>
</div>
<div>
<h3>#1</h3>
<pre><code>
    (function(){
      return typeof arguments;
    })();
</code></pre>
<p>It will return <code>"object"</code>, because <a href="http://bclary.com/2004/11/07/#a-10.1.8">arguments</a> is just that, a simple object.</p>
</div>
<div>
<h3>#2</h3>
<pre><code>
    var f = function g(){ return 23; };
    typeof g();
</code></pre>
<p>The answer is Error.</p>
<p>A <code>ReferenceError</code> will be generated, because the name (<code>Identifier</code>) of a <code>FunctionExpression</code> can be referenced only from inside its <code>FunctionBody</code>, to allow the function to make recursive calls. Unlike with a <code>FunctionDeclaration</code> the <code>Identifier</code> of a FunctionExpression doesn&#8217;t affect the enclosing scope.</p>
<p>There are a lot of misconceptions about the differences between function expressions and function definitions, I would highly recommend the following article also written by kangax:</p>
<ul>
<li>
    <a href="http://yura.thinkweb2.com/named-function-expressions/">Named function expressions demystified</a>
  </li>
</ul>
<p><em>Note:</em> In the Microsoft JScript implementation there is a <a href="http://groups.google.com/group/comp.lang.javascript/msg/5b508b03b004bce8">bug</a>, a serious deviation from the ECMA specification, where identifiers of function expressions leak to its enclosing scope.</p>
</div>
<div>
<h3>#3</h3>
<pre><code>
    (function(x){
      delete x;
      return x;
    })(1);
</code></pre>
<p>The answer is <code>1</code>, because argument identifiers are created as properties of the Variable Object, (the Activation Object in the case of Function Code), following the rules of a <a href="http://bclary.com/2004/11/07/#a-10.1.3">variable instantiation</a>   for the <a href="http://bclary.com/2004/11/07/#a-10.2.3">Function Code</a> execution context, those properties are created with the <code>{ DontDelete }</code> attribute, so they can&#8217;t be deleted.</p>
</div>
<div>
<h3>#4</h3>
<pre><code>
    var y = 1, x = y = typeof x;
    x;
</code></pre>
<p>The answer is <code>"undefined"</code>, because the Variable statement at parse time will define the variables (they will be &#8220;hoisted&#8221; to its enclosing scope, and initialized with the <code>undefined</code> value), then in execution time and due the <em>right-to-left</em> associativity of the <code><a href="http://bclary.com/2004/11/07/#a-11.13">AssignmentOperator</a></code> the first assignment will be done (<code>y = 1;</code>) then, the second assignment: (<code>y = typeof x;</code>) that will return <code>"undefined"</code> and this is the value that will be used in the very last one: (<code>x = "undefined";</code>).</p>
<p>That it&#8217;s easier to realize if we reorder the statements:</p>
<pre><code>
var y,x; // initialized with undefined
y = 1;
y = typeof x; // x is undefined, so "undefined" is returned
x = y; // "undefined"
x;
</pre>
<p></code></p>
</div>
<div>
<h3>#5</h3>
<pre><code>
    (function f(f){
      return typeof f();
    })(function(){ return 1; });
</code></pre>
<p>This one plays with the identifier names inside the scope of the function.</p>
<p>The answer is "number", because the <code>FunctionExpression</code> Identifier (the function name) is bound to the scope chain, but later is overwritten by the value of the <code>f</code> argument.</p>
</div>
<div>
<h3>#6</h3>
<pre><code>
    var foo = {
      bar: function() { return this.baz; },
      baz: 1
    };
    (function(){
      return typeof arguments[0]();
    })(foo.bar);
</code></pre>
<p>The answer is <code>"undefined"</code>, because the <code>foo.bar</code> function is executed with the <code>this</code> value pointing to the <code>arguments</code> object of the second function.</p>
<p>Remember that the <em>function context</em> (the <code>this</code> value) can be set <em>implicitly</em>, depending on how  a function is invoked, e.g.:</p>
<pre><code>
foo(); // a simple function call, this will point to the global object
(function () { })();

obj.method(); // this == obj inside method
obj['method']();
</code></pre>
<p>In this question the <code>[]</code> property accessor is used on the <code>arguments</code> object, causing the context change, we are executing the <code>foo.bar</code> function as if it were a "method" of the <code>arguments</code> object.</p>
</div>
<div>
<h3>#7</h3>
<pre><code>
    var foo = {
      bar: function(){ return this.baz; },
      baz: 1
    }
    typeof (f = foo.bar)();
</code></pre>
<p>The answer is <code>"undefined"</code>.</p>
<p>This case is similar to the previous one, because the assignment operator will simply return a reference to <code>foo.bar</code>, causing that when we invoke the function, the context point to the Global object.</p>
</div>
<div>
<h3>#8</h3>
<pre><code>
    var f = (function f(){ return "1"; }, function g(){ return 2; })();
    typeof f;
</code></pre>
<p>The answer is <code>"number"</code>, because the <a href="http://bclary.com/2004/11/07/#a-11.14">Comma Operator</a>, will return the value of the second operand, in this case a reference to the <code>g</code> function, that will be invoked and <code>f</code> will contain the returned <code>2</code> number literal. For example:</p>
<pre><code>
  (1,2) == 2; // true
</code></pre>
</div>
<div>
<h3>#9</h3>
<pre><code>
    var x = 1;
    if (function f(){}) {
      x += typeof f;
    }
    x;
</code></pre>
<p>The answer is <code>"1undefined"</code>, because the condition expression of the <code>if</code> statement is a Function Expression, it will evaluate to <code>true</code> and the <code>if</code> block will be executed, but the <code>f</code> identifier it's not available.</p>
<p>Inside the <code>if</code> statement, the <code>typeof</code> operator returns a <code>String</code> (<code>"undefined"</code> since <code>f</code> doesn't exist), and that causes the <code>String</code> concatenation when the <code>+=</code> operator is used.</p>
<p>The following can help to realize it:</p>
<pre><code>
    var x = 1;
    if (true) {
      x += typeof f; // f is not defined
    }
    x; // "1undefined"
</code></pre>
<p><em>Note:</em> In JScript implementations due the <a href="http://groups.google.com/group/comp.lang.javascript/msg/5b508b03b004bce8">bug</a> I mentioned early, the result of this code will be <code>"1function"</code> which is not correct.
</div>
<div>
<h3>#10</h3>
<pre><code>
    var x = [typeof x, typeof y][1];
    typeof typeof x;
</code></pre>
<p>The answer is <code>"string"</code>.</p>
<p>The first statement is just trying to confuse you, because as you know, the <code>typeof</code> operator will return always a <code>String</code> value, so you can figure out why <code>typeof typeof anything;</code> will return always <code>"string" also</code>.</p>
</div>
<div>
<h3>#11</h3>
<pre><code>
    (function(foo){
      return typeof foo.bar;
    })({ foo: { bar: 1 } });
</code></pre>
<p>The answer is <code>"undefined"</code>, because as the <code>foo</code> argument, we are passing this object: <code>{ foo: { bar: 1 } }</code>.</p>
<p><code>foo.bar</code> doesn't exist, the <code>bar</code> property is actually accessible by <code>foo.foo.bar</code>.</p>
</div>
<div>
<h3>#12</h3>
<pre><code>
    (function f(){
      function f(){ return 1; }
      return f();
      function f(){ return 2; }
    })();
</code></pre>
<p>The answer is <code>2</code>, because <a href="http://bclary.com/2004/11/07/#a-13">Function Declarations</a> are "hoisted" at parse time, the second <code>f</code> function will replace the first one, even if the second is defined after the <code>return</code> statement.</p>
</div>
<div>
<h3>#13</h3>
<pre><code>
    function f(){ return f; }
    new f() instanceof f;
</code></pre>
<p>The answer is <code>false</code> because the actual object that is instance of <code>f</code>, is the <code>this</code> value within the constructor, and returning a non-primitive from a constructor, causes that this object with the right <code>[[Prototype]]</code> property (<code>this</code>) to be lost.</p>
<p>So basically, <code>f</code> is not an instance of <code>f</code>, since:</p>
<pre><code>
    new f() == f; // true
</code></pre>
<p>We can check that behavior by looking how the <code><a href="http://bclary.com/2004/11/07/#a-13.2.2">[[Construct]]</a></code> internal operation works.</p>
</div>
<div>
<h3>#14</h3>
<pre><code>
    with (function(x, undefined){}) length;
</code></pre>
<p>The answer is <code>2</code>, because the <code>with</code> statement augments the scope chain with the properties of the passed object, in this case a function.</p>
<p>The <code><a href="http://bclary.com/2004/11/07/#a-15.3.5.1">length</a></code> property of functions objects contains the number of <em>expected</em> arguments, in this case two arguments.</p>
<p><em>Note: </em><code>undefined</code> has no special meaning, is just another identifier, in this example is used as an argument in the <code>FormalParameterList</code>.
</div>
]]></content:encoded>
			<wfw:commentRss>http://codingspot.com/2010/02/answering-the-juriy-zaytsev-javascript-quiz/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>

