JavaScript: Introduction to closures

This is an introduction to closures in JavaScript. It is intended for JavaScript beginners and belongs to a small series of (future) blogs for JavaScript beginners.

Closures are an important concept in modern programming languages, and one should be able to understand and use them well.

Closures are functions which reference (i.e. use) variables that are defined outside of those functions. This is not an exact definition, but it will help for the following examples.

In JavaScript, closures are usually realized as functions which are defined of other functions.

Have a look at the following code:

1: function foo() {
2:   
3:   function gee() {
4:     return 1;
5:   };
6:   
7:   return gee();
8: }
9: 
10: print( foo() );

The function foo contains an inner function gee. The ability of a function to have inner functions is an interesting point. In other languages like in Java that is not possible. gee is our first closure here.

The function – or the closure - gee returns the number 1, and the method foo returns the value, that gee returns, i.e. 1. So far nothing special…

By the way, the print method at the bottom of the code, is a method of the Aptana JavaScript library. You can download the Aptana Studio here.

The output of the code above is

1

Now check this code:

1: function foo() {
2:   
3:   var a = 2;
4:   
5:   function gee() {
6:     return a;
7:   };
8:   
9:   return gee();
10: }
11: 
12: print( foo() );

2

This time the method gee uses a variable which has been defined outside of gee, but inside of foo. This is an important feature. The variable a is not a global variable, because it has been defined by using the keyword “var”, but the scope of visibility of this variable contains everything inside of the foo method, and sowith the function gee.

Please keep in mind that from within an function which is defined inside of another function, all variables which are defined in the outer function can be used.

1: function foo() {
2:   
3:   var a = 2;
4:   
5:   function gee() {
6:     return a;
7:   };
8:   
9:   a = 10;
10:   
11:   return gee();
12: }
13: 
14: print( foo() );

10

This time the variable a is defined, then gee, then the value of a is changed. What happens here, is that gee gets a reference to the variable a, so the value 2 is not copied somehow within the function definition of gee (then 2 would be printed), but gee gets a reference to the variable a, so 10 is printed.

1: function foo() {
2:   
3:   var a = 2;
4:   
5:   function gee() {
6:     
7:     var b = 3;  
8:     
9:     function hii() {
10:       return a * b;
11:     }    
12:     
13:     return hii();
14:   };
15:   
16:   a = 10;
17:   
18:   return gee();
19: }
20: 
21: print( foo() );
22: 

30

Now we have three functions which are somehow combined. The same principles as above work now, so the function foo and therefore hii return 3 times 10.

The following example shows that an inner function can also access the parameters of the outer function.

1: function foo( a ) {
2:   return function() {
3:     return a * 2;
4:   };
5: }
6: 
7: print( foo(1) );
8: print( foo(1)() );

And one can see that foo(1) returns what comes after the return statement, i.e. the anonymous, inner function. As it is common in JavaScript, the toString method of a function returns the source code of that function. And as foo(1) is a function, we can call this function by adding (), so that we have foo(1)(), which generates the output “2”.

function () {     return a * 2; } 2

Now we have two inner functions (or closures), so that we can call the inner-most function with three parentheses: foo(1)()(). That means, 1 is given to a, then the first inner function is called which has a local variable b, and finally the inner-most function is called which returns the result 6.

1: function foo( a ) {
2:   return function(){
3:     var b = 3;
4:     return function(){
5:       return a * 2 * b;
6:     };
7:   };
8: }
9: 
10: print( foo(1)()() );
11: var f = foo(1);
12: var g = f();
13: print( g() );

6 6

One can also see that one can assign a function to a variable, like f, then call the function by f(), and assign this to a variable, like g, which then can be called by g() - nothing very complicated, just a little bit unusual for people who come from other languages like Java.

The following code example shows a function foo which returns a closure. That closure is again returned to a variable with a more meaningful name as in the examples above.

1: function foo( a ) {
2:   return function( b ) {
3:     return a * b;
4:   };
5: }
6: 
7: print( foo(2)(5) );
8: 
9: var doubleIt = foo(2);
10: 
11: print( doubleIt( 1 ) );
12: print( doubleIt( 2 ) );
13: print( doubleIt( 3 ) );

This example returns the following numbers, i.e. twice the value of the input.

2  4 6

The interesting point is that one can give the closure foo(2) a new and more meaningful name, so that doubleIt seems to be like a new function which can used in the program later.

It is like converting a given API to something more specific and more useful in the current application or the current context.

The following example shows this again with a function that simply calculates the sum of two numbers, but implemented by a closure.

1: function add( summand1 ) {  
2:   return function( summand2 ) {
3:     return summand1 + summand2;
4:   }
5: }
6: 
7: var threeAnd = add( 3 );
8: var fourAnd  = add( 4 );
9: var fiveAnd  = add( 5 );
10: 
11: print( threeAnd( 2 ) ); // 5
12: print( fourAnd(  2 ) ); // 6
13: print( fiveAnd(  2 ) ); // 7

The output is of course:

5 6 7

The three closures have meaningful names which say what the closure is going to do. In such a way you can easily create new "functions" based on already existing functions or closures.

 

Technorati: javascript, closure, closures

Java: char to int

Today I found some code (in a current project of a company), where they convert a Java char to an int like this:

int x = Integer.parseInt( String.valueOf( c ) );

where c is a char like '0', '1', ... (i.e. a digit as a char).

I would suggest to make a conversion like:

int x = c - '0';

That's easier and probably faster...

Top 200 blogs for developers

Jurgen Appelo published on this blog a list of the top 200 blogs for software developers.
This is a good and helpful list, I'm going through it, making bookmarks, checking what would be helpful for me.

http://www.noop.nl/2009/06/top-200-blogs-for-developers-q2-2009.html

My love from Iran

In a few hours I'm going to pick up the parents of my girl-friend from the airport.
My girl-friend is originally from Iran. She came to Austria when she was 18 years old. She came here alone, learnt German for one year, and then studied Information Technologies. I think that was a very hard and brave action. And it must have been some kind of a culture shock.

Today, after so many years, it is the first time that her parents come to Austria.
It was not so easy to invite them. I did not know about it, but it is quite difficult here in Austria to invite people from certain other countries, so that they are allowed to see Austria for a while. Actually the austrian embassy in Iran has to give the allowance to visitors, but they said no to the parents for my girl-friend. As I heard, the current people in the embassy suck a lot, so we thought we would have no chance, but my girl-friend called the Austrian ministry of foreign affairs and started to make a complaint. Suddenly, on the next day, the embassy called my girl-friend's parents and told them that they may go to Austria. So much about making complaints, sometimes they help.

For me my life changed very much because of my girl-friend. She is from another culture, and she sees many things in a different way than I do. And I learnt a lot about Iran.

Some time ago, I had thought that most people in Iran were muslims and convinced of their religion and some kind of fanatic. Then I was invited by so many iranian people living here in Austria, so that I had the chance to learn more.
First of all there seem to be two worlds in Iran: the official one of the government and the islam, and then the private one. One can see it on the photos. When women are walking on the streets, they have headscarfs, when they are in the house, maybe on a party, they have no headscarfs, but miniskirts. It's the opposite, very closed in the public, very open in the private area, somehow. In the beginning it confused me.

People from Iran are very hospitable, and they love their country, they are proud of it. I have the feeling, that it is sometimes difficult to find things where they can be proud of. They often talk about history, and how powerful Persia once was. But now it is not anymore.
And they seem not to like Turkish or Arabian people...

Iran nowadays is a lost country. It has a regime which surpresses the intelligent people of the country, so that more and more of them leave the country. And most of the people are very poor, and I read, that 70% of the people are younger than 30 years old.
This last fact gives me some hope. The young people like the Internet, they like Twitter, and so on. They are open-minded and curious to learn new things. Maybe there is a chance that they will change their regime some day.

We have to hope for this, because the Iran could be a wonderful country to live with a lot of great people.

Twitter

A few weeks ago I started to use Twitter.
I'm not a fan of spending too much time on the computer, even though I SPEND a lot of time sitting in front of this strange device. Nevertheless I was curious what Twitter really is and registered myself there.

Well, mot of the talks are not interesting for me, but when I search for java, javascript, jquery, or similiar topics I get a huge number of interesting articles.
This actually changed my life.
I got more links to exciting and interesting home pages than ever before, and I'm reading and learning new things now all the time. I'm quite thankful for this possibility.

I use the Xmarks plugin for Firefox where one can share one's bookmarks between the PCs at the office and at home. I made a new structure of my bookmarks, so that I can easily find things again, and I add the most helpful links I found on Twitter to my bookmarks quite often.

I am also impressed about the tweets about the election in Iran (#iranelection), there were so many people who were shocked by the behaviour of the iranish government, it was good to hear or read them. My Twitter icon is still green as a sign against the current actions of the government of Iran.