So, you may have noticed that here at Switch On The Code, we like to use objects a lot in our javascript code. This is because, well, they are just so flexible and useful in javascript - there have been many times in other languages that I wished objects acted like they do in javascript. Here today we are going to give you two more reasons to like javascript objects - and these are the javascript for and with statements.
What are these for and with statements, you might ask? Well, they are some syntactic sugar that makes interacting with objects in javascript extremely easy in certain situations. The for statement allows you to loop through the public variables on the given object, and the with statement allows you to reference the public elements of an object without the full explicit reference (i.e., something like obj.abc).
Ok, so lets take a look at the for statement first. Here is a sample of code using it:
{
var abc = 'q';
this.one = '1';
this.two = '2';
}
var obj = new foo();
obj.three = '3';
for(varKey in obj)
{
alert(varKey);
alert(obj[varKey]);
}
Here we have defined an object foo with a private member abc with the value 'q', and two public members one and two with the values '1' and '2' respectively. We then create an instance of foo and set obj equal to it. We create another public member three on the fly, and give it the value '3'. And then we have the for loop - the output of which will be a series of alert boxes with the following content:
1
two
2
three
3
What happens here is that the variable varKey is set equal to the name of the next public member of obj in each iteration of the loop. That is why the alert(varKey); statement prints out the name of the variable. To actually get the value of the variable we can't use the dot syntax (obj.varKey) - because that would end up actually trying to access the variable named varKey on obj, and such a variable does not exist. So instead, we use the [] syntax to access the value of the variable. As you can tell, it only shows to the public members of the object, we don't get access to the private members (in this case the variable abc).
Ok, now for the with statement. Here is another code sample:
{
var abc = 'q';
this.one = '1';
this.two = '2';
}
var obj = new foo();
obj.three = '3';
var bar = 'bar';
var one = '9';
alert(one);
with(obj)
{
alert(one);
alert(two);
alert(three);
alert(bar);
alert(abc);
}
Here again, we define foo and then instantiate it. We set up some other variables, and then we have a whole bunch of alerts - some outside and some inside our with block. This is what the output will look like:
1
2
3
bar
"Error: abc is not defined"
First, we have the variable one defined as '9' globally, and we alert that and so we get the value '9'. Then we enter the with block, which means that the statements are now being evaluated in the scope of the public members of obj, and then (and only if it doesn't exist in the public members of obj) in the global scope. This means that the second alert shows the value of the variable one from obj - i.e., '1'. The alert(bar); line shows 'bar', because the variable bar does not exist in obj and the global variable is used. The final alert line, alert(abc); will actually throw a "abc is not defined" javascript error, because abc is a private member and therefore not accessible.
And that is all we have on the table for today. Go out and enjoy that syntax! In some situations it can come in extremely handy. And, as always, please post any questions you might have in the comments.
09/14/2007 - 13:18
nice, i came across your site when i was trying to descript js events and how they are used... ...now you are bookmarked, some good reads
easy to follow for noobs
and great insight for us to remind us where we came from and why we are here
12/22/2009 - 12:15
very nice tutorial suite. site is definitely bookmarked. thanks!