<?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>A Log on JavaScript &#187; function scope</title>
	<atom:link href="http://www.jslog.com/tag/function-scope/feed" rel="self" type="application/rss+xml" />
	<link>http://www.jslog.com</link>
	<description></description>
	<lastBuildDate>Thu, 21 Jul 2011 11:00:10 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>No for loops &#8211; Number prototype instead</title>
		<link>http://www.jslog.com/loop-using-number-prototype</link>
		<comments>http://www.jslog.com/loop-using-number-prototype#comments</comments>
		<pubDate>Fri, 26 Nov 2010 17:19:02 +0000</pubDate>
		<dc:creator>radu</dc:creator>
				<category><![CDATA[quick tips]]></category>
		<category><![CDATA[array]]></category>
		<category><![CDATA[function scope]]></category>
		<category><![CDATA[prototype]]></category>

		<guid isPermaLink="false">http://www.jslog.com/?p=233</guid>
		<description><![CDATA[Recently I got borred with the for loops and I added the &#8220;times&#8221; function on the prototype of Number. As a result, I can easily iterate over arrays or I can simply call a function how many times I want like this:

     (5).times(function(index /* zero based */){
     [...]]]></description>
			<content:encoded><![CDATA[<p>Recently I got borred with the for loops and I added the &#8220;times&#8221; function on the prototype of Number. As a result, I can easily iterate over arrays or I can simply call a function how many times I want like this:</p>
<pre class="prettyprint">
     (5).times(function(index /* zero based */){
           console.log(index);
     })
     //or using array length
     arr.length.times(function(){ ... });

     //optionally specify scope for the callback function:
    n.times(function(){ .... }, scope);
</pre>
<p>Together with this, I&#8217;m using another goodie. Whenever I have a function that expects a parameter which can either be a simple value or an array, convert that value to array in one line, like: </p>
<pre class="prettyprint">
    var arr = [].concat(valueOrArray);
</pre>
<p>See below the source code.</p>
<pre class="prettyprint">/**
 * extend the Number prototype
 * @param func
 * @param scope [optional]
 */
Number.prototype.times = function(func, scope){
    var v = this.valueOf();
    for (var i=0; i < v; i++){
        func.call(scope||window,i);
    }
};

function test(valueOrArray){
    var arr = [].concat(valueOrArray)
    arr.length.times(function(i){
        console.log(arr[i]);
    })
}

test([1,3,4])
//output: 1   3   4

test(123)
//output: 123</pre>
<p>As for the performance, I have tested the <b>times</b> function against the for loop, and it seems to give about same results at a first glance. Any feedback on this?</p>
<p>P.S. Iterating over arrays gets even easier by adding an <b>'each'</b> function to the Array prototype. Adding to the prototype of standard JavaScript objects is a debatable practice, and should not be abused.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.jslog.com/loop-using-number-prototype/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Quick tip: use &#8220;scope&#8221; config option</title>
		<link>http://www.jslog.com/use-scope-config-option-quick-tip</link>
		<comments>http://www.jslog.com/use-scope-config-option-quick-tip#comments</comments>
		<pubDate>Wed, 24 Feb 2010 20:53:22 +0000</pubDate>
		<dc:creator>radu</dc:creator>
				<category><![CDATA[ExtJS]]></category>
		<category><![CDATA[quick tips]]></category>
		<category><![CDATA[ExtJS events]]></category>
		<category><![CDATA[function scope]]></category>
		<category><![CDATA[functions]]></category>

		<guid isPermaLink="false">http://www.jslog.com/?p=159</guid>
		<description><![CDATA[You should make use of the scope config option in components
.

in Ajax calls
var MyPanel = Ext.extend(Ext.Panel, {
    doSave: function(){
	Ext.Ajax.request({
	    url: 'your_url',
	    params: ....
	    success: function(response){
		response = Ext.decode(response.responseText);
		this.onSuccess(response)
	    },
	    scope: this //the scope in which the success callback [...]]]></description>
			<content:encoded><![CDATA[<h2>You should make use of the <strong>scope</strong> config option in components</h2>
<p>.</p>
<ul>
<li>in Ajax calls
<pre class="prettyprint">var MyPanel = Ext.extend(Ext.Panel, {
    doSave: function(){
	Ext.Ajax.request({
	    url: 'your_url',
	    params: ....
	    success: function(response){
		response = Ext.decode(response.responseText);
		this.onSuccess(response)
	    },
	    scope: this //the scope in which the success callback is called
	})
    },
    onSuccess: function(){ .... }
}</pre>
<p>In this example, specifying the scope is very useful. By default, the success callback on Ajax calls is executed with the scope being the browser &#8216;window&#8217; object, which is not very useful. In the code above, we execute the success callback in the &#8216;this&#8217; scope, &#8216;this&#8217; being the instance of <b>MyPanel</b> which executes the <b>doSave</b> method. This is why we can safely call <b><code>this.onSuccess(response)</code></b>, as &#8216;this&#8217; is a MyPanel object, which has the onSuccess method.<br /> I find the scope config property very useful, so even though specifying the scope of a function is very natural in JavaScript, the fact that ExtJS made it so natural and easy deserves being noted. Well done ExtJS!
</li>
<li>in Buttons
<pre class="prettyprint">{
    xtype: 'button',
    text: 'Save',
    handler: function(){
	//do something on pressing the button
    },
    scope: myScope //scope of the handler
}</pre>
</li>
<li>with Stores
<pre class="prettyprint">new Ext.data.Store({
    //...other config options
    autoLoad: {
	callback: function(){ ... },
	scope: aScope //for the callback function after loading the store
    }
})</pre>
</li>
<li>in listeners
<pre class="prettyprint">new Ext.Panel({
    listeners: {
	scope: window, //the scope of all listeners in this config
	show: function(){ ... },
	afterrender: function(){ ...this is 'window' }
    }
})</pre>
</li>
<li>in <a href='http://www.extjs.com/deploy/dev/docs/?class=Ext.Action'>actions</a> </li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.jslog.com/use-scope-config-option-quick-tip/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

