<?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>Uxebu.com - the Ajax and JavaScript Experts &#187; jquery</title>
	<atom:link href="http://uxebu.com/blog/tag/jquery/feed/" rel="self" type="application/rss+xml" />
	<link>http://uxebu.com/blog</link>
	<description>Web, Dojo, news</description>
	<lastBuildDate>Sun, 06 Jun 2010 22:28:09 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>dojo.map and jQuery.map</title>
		<link>http://uxebu.com/blog/2009/01/27/dojomap-and-jquerymap/</link>
		<comments>http://uxebu.com/blog/2009/01/27/dojomap-and-jquerymap/#comments</comments>
		<pubDate>Tue, 27 Jan 2009 16:32:03 +0000</pubDate>
		<dc:creator>Wolfram Kriesing</dc:creator>
				<category><![CDATA[dojo]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[filter]]></category>
		<category><![CDATA[functional]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[map]]></category>

		<guid isPermaLink="false">http://blog.uxebu.com/?p=117</guid>
		<description><![CDATA[In one of our current customer&#8217;s projects we are working with jQuery. And I am glad that the functional programming basics are already kind of standard across JS libraries. Especially with dojo I started to love the functional approaches and realized that they are really helpful in a lot of situations, especially when doing data [...]]]></description>
			<content:encoded><![CDATA[<p>In one of our current customer&#8217;s projects we are working with jQuery. And I am glad that the functional programming basics are already kind of standard across JS libraries. Especially with dojo I started to love the functional approaches and realized that they are really helpful in a lot of situations, especially when doing data processing. One of the best known functions is the map function, which &#8220;creates a new array with the results of calling a provided function on every element in this array&#8221; [from <a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Array/map">Mozilla's Core JS References</a>]. Though dojo and jQuery implement this function there are slight differences.<br />
<span id="more-117"></span></p>
<p>The root of all evil was a simple function that was searching for certain information in some data and returning me a piece of those, it looked like this:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&gt;&gt;&gt;</span> jQuery.<span style="color: #660066;">map</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#123;</span>id<span style="color: #339933;">:</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>id<span style="color: #339933;">:</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>n<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><span style="color: #000066; font-weight: bold;">return</span> n.<span style="color: #660066;">id</span><span style="color: #339933;">&gt;</span><span style="color: #CC0000;">1</span> <span style="color: #339933;">?</span> n.<span style="color: #660066;">id</span> <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
    .<span style="color: #660066;">filter</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>n<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #000066; font-weight: bold;">return</span> n<span style="color: #339933;">!=</span><span style="color: #003366; font-weight: bold;">null</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span></pre></div></div>

<p>Looks pretty simple, but it failed in IE. There is some problem with the filter() function in IE, it just barks when I run the following</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&gt;&gt;&gt;</span> jQuery.<span style="color: #660066;">map</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">filter</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
Object doesn<span style="color: #3366CC;">'t support this property or method</span></pre></div></div>

<p>May be I oversaw some really simple error I made. But anyway, that lead me to debugging this thing and trying stuff out and I discovered that the following happens.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&gt;&gt;&gt;</span> jQuery.<span style="color: #660066;">map</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span><span style="color: #CC0000;">2</span><span style="color: #339933;">,</span><span style="color: #CC0000;">3</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span></pre></div></div>

<p>But I was very sure that dojo would return an array of three elements with null each. So I tried that of course.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&gt;&gt;&gt;</span> dojo.<span style="color: #660066;">map</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span><span style="color: #CC0000;">2</span><span style="color: #339933;">,</span><span style="color: #CC0000;">3</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#91;</span><span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #009900;">&#93;</span></pre></div></div>

<p>Aha, that&#8217;s what I expected. So jQuery just does it a little different. Ok, good to know, this again means that I can cut my initial script shorter, by just removing the filter() call. Good thing.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&gt;&gt;&gt;</span> jQuery.<span style="color: #660066;">map</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#123;</span>id<span style="color: #339933;">:</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>id<span style="color: #339933;">:</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>n<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><span style="color: #000066; font-weight: bold;">return</span> n.<span style="color: #660066;">id</span><span style="color: #339933;">&gt;</span><span style="color: #CC0000;">1</span> <span style="color: #339933;">?</span> n.<span style="color: #660066;">id</span> <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span></pre></div></div>

<p>So that this works and only returns the id if it is larger than 1, which is actually the case that I need. While I find this quite handy and had wished for it a lot of times in dojo too, I see it as rather inconsistent, simply because it is a special case, you would need to know about.<br />
Since Firefox3 comes with the map() function already implemented (so it must be at least JavaScript 1.6) I tried the native method:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&gt;&gt;&gt;</span> <span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span><span style="color: #CC0000;">2</span><span style="color: #339933;">,</span><span style="color: #CC0000;">3</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">map</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">null</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#91;</span><span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #009900;">&#93;</span></pre></div></div>

<p>And as I expected it does return the elements in the array, just like dojo does.<br />
So note jQuery does it differently. Which is kind of ok, since the map() function is implemented in it&#8217;s own namespace and does not override the native map() function but I find it confusing.<br />
And dojo just does it as the map() function which is defined in the JavaScript spec.<br />
Just in case someone else stumbles over it &#8230;</p>
]]></content:encoded>
			<wfw:commentRss>http://uxebu.com/blog/2009/01/27/dojomap-and-jquerymap/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>
