We have been working with variables in several different ways in JavaScript. This seems like a good time to revisit some of the ideas, now that there are more examples to work with.
There aren't really any new ideas being introduced here, but there may be some details you missed when you saw the concepts for the first time.
First, remember that variables (including functions) can be named whatever you want (as long as it's letters, digits, and underscores). When naming your variables, try to be as descriptive as possible.
For example, we have been naming the Raphaël SVG objects paper, because the Raphaël documentation calls them “paper” objects, and it make some sense to be drawing on a “paper”. When drawing circles in Working with SVG, we used a variable to store the radius of the circles, and called it radius: again, this is a descriptive name that gives a really good hint how it's being used.
What Variables Are For
Whenever we're using a variable, the reason is always the same: to store some value so we can use it later.
For example, the paper objects were created (with the Raphael() function), and then we had to use them many times because functions in the paper object are used to draw things in the SVG image.
When drawing shapes on the paper objects, we often store the resulting shape object (a Raphaël element object) in a variable, because we need to use the .attr() function in it later to change its appearance:
elli = paper.ellipse(50, 20, 40, 10)
elli.attr({
'fill': '#0f0',
'stroke': '#999',
'stroke-width': '4'
})
If we didn't need to call .attr() (because we like the default appearance, presumably), then we could have just called paper.ellipse(…) and not used a variable for the result (but using a variable doesn't really hurt: it's just not necessary if we're not going to use it).
When drawing circles in Working with SVG, we needed to store the radius so we could use it as the radius of a circle, and also change the value in the variable so it would be different the next time we used it.
In the repeating animation in Animating SVG, we created the variable circ in the setup function. We didn't use it in setup, but did use it in anim_right and anim_left where we needed to call .animate() on it.
In all of these cases, we needed to get the value we stored in the variable back later: either to calculate with it, or call a function in the object.
Variable Values
There are basically two things you can do with variables: store values in them with a variable assignment statement (like var_name = 6), and retrieve the stored value by referring to the variable by name.
Remember that using a variable's name is just a way to refer to its value. For example, even though we wrote the first example here, the second would have been exactly the same.
newstyle = {
'font-family': 'sans-serif',
'color': '#f60'
}
$('#styling').css(newstyle)
$('#styling').css({
'font-family': 'sans-serif',
'color': '#f60'
})
In the first example, the object named newstyle (which was named that because it seemed descriptive) was created holding an object and then used. In the second was just written where it was needed, without being assigned to a variable first.
The result is the same. In the first example, the variable name gives a hint about what's happening and there is less stuff packed into one statement, which both make the code easier to read. We could also use newstyle many times if we needed to. The one real drawback is that the second example requires less typing.
The code in the Guide tends to put values is variables: I think it makes the code more readable. You're welcome to do either if it makes sense.
Of course, if you need to modify a variable (like we did with radius) then it must be in a variable so we can manipulate the stored value.
This ability to substitute variable values in to the place they are used even extends to functions in JavaScript. These are also the same:
setup = function() {
$('button').click(do_things)
}
$(document).ready(setup)
$(document).ready(function() {
$('button').click(do_things)
})
It's possible to put the actual function definition directly in line as the argument to the ready() function (or any other function where you need to give a function as the argument). This is an anonymous function: a function that doesn't have a name.
Anonymous functions are actually more idiomatic JavaScript: that style is very common. I find it very difficult to read, and have avoided it in this Guide (and will continue to).