Why Start With Functions
Functions are Objects
- Assign them to variables
- Add them to objects as properties
- Pass them to functions
- Return them from functions
- Function Keyword - this simply let’s you know the object is a function.
- Function Name - a function name is optional. If a function does not have a name, as is the case when using function expressions (see below), it’s called an anonymous function. Function names can also be used by the function to call itself recursively and are used by debuggers and dev tools to ID the function.
- Function Parameters - parameters appear in between parenthesis and are separated by commas. Once inside the function the parameters are stored as variables.
- Function Statement - a set of statements that make up the body of the function.
There are two forms of function literals that are very similar but differ in small but important ways.
1. Function Declarations - Function keyword followed by the name
1 2 3 4 5
Note: function declarations are hoisted to the top of the context, meaning it doesn’t matter when the function is defined because the program knows about it as soon as it’s ran. Read more about hoisting here or watch the video below.
2. Function Expressions - sets the function to a variable and are not hoisted.
1 2 3 4 5
Functions don’t care how many parameters are passed to them. This means they won’t throw an error regardless of how many params are sent. However, while they don’t care they do know how many params they’re “able” to take through their length property.
1 2 3 4 5 6 7
Above you can see length returns 1 because this function only takes a single param. Yet, if you pass in additional params no error occurs and the function simply ignores the extras.
How Params are Stored
The names of the params are stored as variables inside the function. In addition to the parameters passed into the function it has two bonus parameters:
This is beyond the scope of this post so don’t worry about it now.
Arguments is an array like structure that contains all the parameters passed into the function. Just like an array it can store any number of values that are referenced by indices (0, 1, 2, etc.), and has a length property stating how many values are present.
1 2 3 4 5 6
In this example the function takes no params, but can still access any parameters passed into it through its
arguments object. Here it’s accessing the first parameter in the
arguments object in the same way you’d get the first element in an array.
This is sort of weird/confusing and thus generally not done. Normally you’d have a set number of params the function expects and only use those.
Sometimes It’s a Good Thing
However, the ability to take any number of arguments can prove useful at times.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
Using the arguments object and a while loop the function is able to sum all the parameters given to it regardless of how many are sent it.
Function overloading is a concept in some OO languages where you can create two functions with the same name but different implementations. The program would then choose which one to use based on the number of params that were sent to the function.
Since functions can accept any number of params you can’t do this. If you define two methods with the same name the one that was defined last effectively overwrites the first one you defined.
1 2 3 4 5 6 7 8 9
Here you can see the second sayHi function overwrote the first one.
The way to mimic function overloading is to use conditionals to react differently depending on what params are sent to the function.
1 2 3 4 5 6 7 8 9
- jQuery track - Codecademy