Getting Good with JavaScript - Andrew Burgess [14]
Now that you're understanding that, chew on this for a while:
Example 3.8
var name = "Bob";
function greet(greeting) {
var name = "Alice";
return greeting + " " + name + ".";
}
alert( greet("Hello") ); // "hello Alice."
What does this return? The name variable inside the function "overwrites" our access to the outside name variable. Now, when we use name, it refers to Alice, not Bob. However, once we're back outside the function, name will once again refer to Bob, because there's no way for us to get to Alice outside of her function.
Anonymous Functions
Thus far, the functions we've made all have names. However, we can create functions without names, just be leaving the name out:
function () {
return "this function has no name";
}
Well, cool, I guess, you're saying. But what's the point? There's no way to call it. Well, we'll see many places where anonymous functions (for that is what nameless functions are) are useful; here's one that you might use often:
Example 3.9
var hi = function () {
return "Hi";
};
alert( hi() ); // Hi
Yes, that's right; we can assign a function (named or anonymous) to a variable, and execute it with that variable name. Remember, functions are objects and can be assigned to variables just like values.
Here's another use for anonymous functions:
var hi = (function () {
return function () {
return "Hi";
}
}());
Take a deep breath; this might look like rocket science, but there's not that much going on here. Start with what you know: we're assigning an anonymous function to the variable hi. That anonymous function returns another anonymous function. That's all good. Then, we're wrapping the first function in parentheses. This isn't required, but you can wrap pretty much anything you want to in parentheses in JavaScript; it just improves readability. In this case, we do it to remind ourselves that we're doing something else of interest: notice that, after the function, we have a set of parentheses. We know that a set of parentheses after a function name executes that function. Well, they do the same after a function itself: function () { /**/ }(). This is called an anonymous self-invoking function, because it has no name and it executes itself. Since it runs right away, hi is not assigned that function, but the function's return value: another function! In this case, it's just like doing this:
var hi = function () {
return "Hi";
};
So why not do that? Well, this is just an example. We'll see a real use for this pattern—assigning the returned value of anonymous self-invoking to a variable—later (if you can't wait, read the section on closure, on page 80).
I should note that, while this pattern is usually called an anonymous self-invoking function, not everyone agrees with that term. You'll see that name a lot, but Ben Alman—frequent contributor to jQuery and creator of many popular JavaScript projects—prefers the term immediately-invoked function expressions. You can read more about why he prefers that term in his blog post on the topic.
Type Methods
In the last chapter, we learned about the value and reference types that JavaScript offers us. Let's conclude by getting to know the methods of these types. Of course, we won't learn them all, but we'll cover all the important ones, the ones you'll use regularly.
ROCKSTAR TIP
What's the difference between a function and a method? Only where they exist. A method is just a function that is a property of an object. For example:
var console = {
log : function () {
// code here
}
};
You'd call this the same way you access "normal" properties: `console.log()`. Look familiar?
String Methods
length
This one is actually a property, not a method. Predictably, the length property of a string is the number of characters in the string.
Example 3.10
alert( "gobsmacked".length ); // 10
indexOf
This is the method you'll most often use when you're searching within a string. This method returns a number, the