Before we can use a function, we need to create one, right? Well, technically there are plenty of built-in functions that we can start using right away, but it’s just not right to get out of order. So, let’s define a function.
There are two syntaxes that can be used to declare functions: the regular function declaration and assigning a function expression to a variable/property. Take a look.
For the most part, they achieve the exact same results. The biggest difference relates to variable lifting in a pretty awesome way. Dustin Diaz explains this difference in function declarations. I prefer to stick with the second syntax, regardless of what double D says because I like having the name of the function out front where you can see and because I feel like it’s wrong to treat functions differently from everyone else. Plus, that’s the syntax you need to use if you want to assign a function as a property of an object. Speaking of objects…
Sadly, though, we can’t assign a beautiful object literal to a function because it would override the function itself. You can, however, still assign an object literal to one of the properties of the function. I’m sure you could have figured that out on your own, though.
Now that we have some functions, let’s use them! You’d think that calling a function would be the simple part, right? Well, there are actually so many ways to call a function that it’s probably the most difficult part to learn, unless you’re lazy and just use the normal way (which is possible, but can hinder you in more advanced code).
Let’s start with the normal way of calling a function. All you need is to add some parentheses after the name of the function, and possibly add some arguments inside those parentheses.
There is another cool thing about this too. You don’t need to define any parameters in your function declaration. Instead, all of the arguments can be can be accessed via
arguments within the function. Take a look.
arguments is an array-like structure. In reality it is a special type of object that acts like an array in many cases, but has its own functionality and often won’t have some functionality that an array does. So if you want it to be an array, use
slice to convert it to an array.
If you’re not sure what exactly is going on here, you’ll figure it out soon in a section below.
new on it to make a new object with it. Well, this is just another way of calling a function. I won’t bother going into any more detail here since I just talked about it last week. I do, however, want to mention that
prototype is a property of a function like we talked about earlier and which you will see in that post.
These two functions happen to be properties of every function. They can be used to call a function with a different context. The context is what controls the meaning of the
this keyword and being able to dynamically control the context can be pretty darn useful, especially in a callback situation.
This can allow you to essentially use any function as if it was part of any object even though it’s defined in a completely separate manner. In the above example, we only saw
call used. In that example, using
apply would have yielded the exact same result. The only difference between
apply is the way they send arguments into the function that they are calling. Another code sample might explain this better than just words, so I’ll show you one first.
foo function just logs each of its two arguments. Nothing special. The
bar function, however, calls
foo in three different ways to demonstrate
apply. For both
apply, the first argument is the context, which in the case of this example doesn’t really matter, so I just threw something in there. The difference between the two functions shows up after the first argument. For
call, you supply an arbitrary number of arguments, each of which gets passed in to the function being called as individual arguments. On the other hand,
apply takes only one more argument which must be an array or array-like structure (such as
arguments, like I demonstrated in the example). Each element of the array is then sent into the function being called as individual arguments.
Now that we understand
apply, we can use it for something cool (other than converting
arguments into an array as I showed earlier). We’re going to use them to call super functions on parent classes. Take a look:
That’s a really long and annoying way to say
I’m not too familiar with functional programming but you can do some things in really strange and amazing ways with a functional mindset. If you want to see a tidbit of functional programming, you can check out this post on DailyJS. I won’t get into that stuff myself because I’m not very good at it and there are far better resources for it available around the web.