Functions
Arguments
functions are a way to store code for later. Here’s the basic syntax. You start with the JS keyword function, then give it a name, which should be descriptive of what the function is/does. You can name a function using the same rules we used for naming variables. Next, in parentheses you’ll specify the parameters/arguments that the function can take, that will be variables passed in to let us change the behavior of our function each time we call it. If you leave this blank, it just means it takes no arguments. Finally, the curly braces mark the start and end of the function body.
Now, to call a function, you put parentheses after it. This is also where you would pop in any arguments, if needed. Notice how if you don’t write the parentheses, it doesn’t call the function, but instead just displays it.
The undefined comes from the console giving us the value of the previous expression given. Every time we call a function, some kind of value is evaluated from it.
Now, we can call this function in our code whenever and however often it’s needed.
Now, let’s say we wanted this to say a different name each time we called it. That’s what arguments are for. They’re defined in the parentheses after the function name, and are named like normal variables. We’ll call this one name and add it in.
The undefined’s are because we never defined the name for the argument. We can fix that by putting something in the parentheses of the function calls.
We can create as many arguments as needed, just separate them by commas.
Once again, it’s coming up undefined because we didn’t define the argument in the function.
If you pass in more values than there are arguments, it will pretty much ignore it. If you call too few, it will set whatever arguments don’t have a value to undefined. What if you didn’t want to pass in a greeting argument? In this case we’ll use an if block. I did it this way, they did it a slightly different way that’s better imo.
Return Values
While arguments may be the input to the function, there’s also an output to a function call – the return value. This is the value the function will evaluate to when called. In the example below, we called the sayHello function. The undefined in grey below with the arrow pointed left is the return value for the sayHello function we called. It’s undefined because we did not provide a return value.
You can define that using the return keyword, then providing a value.
Or, maybe you don’t want to provide a return value. If you just write return, it will give you undefined again, which is no different than not writing return at all. So, writing that wouldn’t make much sense.
Return values are good when you want it to return something you want to use later. In the example below, we return the length of the value entered for the name argument. So, the return value is dependent on the name being passed in.
Another thing to note: any code entered after the return call in a function will not be executed. So the console.log entered below after return won’t appear.
For our function, greeting is optional, but we don’t want name to be because we need it for our return value. If it is blank we get this error, because it’s trying to call the length of undefined.
So, we’ll use an if block again, and make it so that if an name isn’t entered, and therefore is undefined, we’ll just return 0 and not do any of the rest of the code.
Scope
Let say we define a variable called color. Then, in a function we define a new variable with the same name, in which we then console.log to see what the value for color is. We end up getting green. This is because we created the second variable in a new scope, which is a new namespace for the variable. If we create a variable in a function, it will not collide with anything in a higher scope, like within the global scope for instance.
So, the second color variable does not interact with the first in any way. As shown below when we console.log outside of the function.
So if you’re in a function, can you reach variables at a higher scope? Yep!
But what if we wanted to reach the global color variable from within our function, after we defined a new variable color in our function? It’s actually pretty tough to do. Essentially we’ve shadowed the variable by creating a two variables at different scopes with the same name. Avoid this by not giving variables at different scopes the same name.
What if you’re in a function and want to modify a variable at a higher scope, like number here? You can, and it will update the global scoped variable.
This may be a problem – you’re no longer defining a new variable called number. Instead you’er setting a new value for the global scoped one already created, which can lead to issues and be confusing to debug. So, make sure to include the var keyword, or avoid shadowing your variables altogether.
Now, what if you were to write a variable name and set it to a value, never having used the var keyword, like with shape below?
In this case, because JS didn’t know what level to define the variable, it created a global variable called shape, and sets its value to “square”. This is kind of bad because what it’s doing isn’t obvious, which can lead to some bugs. If we were to put a var keyword before it, it would change this and only create the variable for that function’s scope level, giving us the expected undefined error when we try to call it globally.
So, each function creates a brand new scope.
Anonymous functions
You can define functions without names. These are called anonymous functions. Below, we see a function made using the named function syntax. It’s name myFunction acts as a variable that is storing code and can be called by its name when needed.
There’s a different way we could do this though, by defining a variable and setting it equal to a function. It works exactly the same. However, this is called an anonymous function, a function without a name.
Let’s say we wanted to create an anonymous function that called a function twice. The argument will be the function being called, and we’ll call it twice within this new function.
Now, when we pass in the variable into this second function, we DON’T want to include the parentheses because that would actually pass the function (myFunction)’s return value into the second variable callTwice, which we do not want.
Instead, we don’t include the parentheses there, and they are instead added in CallTwice’s code.
Had we used the named function syntax, it would work exactly the same.
So why use a named function over an anonymous one? Let’s say we had an undeclared variable in our myFunction function. We’d get an error as expected, and in the console it would tell us what line it’s on, and if you click on it it actually shows you in the code.
But sometimes that’s not enough. If we called myFunction multiple times, sometimes we want to see which instance raised that error. If you click the little triangle to the left of the error it will open what’s called the call stack, which starting at the top is the closest it actually got called. since the error happened in myFunction, it appears at the top. Next we see callTwice, which called it, then the anonymous function on line 23, which put the whole thing into motion. So it lists it with the top being most recent, and the bottom being least recent.
Now, if you use an anonymous function rather than the named function syntax like below, some older browser wouldn’t know the name for the first line of the call stack. This shouldn’t be an issue in chrome and other modern browsers now though.
Now, you can use an anonymous function without storing it into a variable. Sometimes you only need to use it one time.
Now, what if we put the undeclaredVariable in there? We can see now the call stack is slightly less helpful. It can’t give us a name for the first line of the call stack, because there is none, it’s anonymous.
If we give it a name using the namedFunction syntax, it will tell us in the call stack.
In this case, since we never planned on using it again and we’re only using it inside this one function, you don’t really have to give it a name. However, if this was being passed to several other functions, then things could get confusing when debugging.
Remember that functions create their own scope, and in JS that’s the only way to do that. A self executing anonymous function is when you create a function and call it immediately. Let’s create a function and call it immediately:
Another way to do this is to wrap it in parentheses, which will not act as a function call but rather a mathematical expression, and will evaluate to whatever the value inside is. Here, they evaluate to the anonymous function object inside, and we can call it immediately with another set of parentheses, which are function execution parentheses, which also means they can take arguments.
The benefit of this is because you can create all the variables you want, do all the things you need in the function, without having to worry about the variables being leaked to the global scope and being accessible by other code.
Examples
The browser code that we use to interact with a page,even though we interact with it through JavaScript, is a completely different subject than JS the language we’ve been learning.It differs for each browser, which is what can make JS so difficult. The Document Object Model (DOM) is the interface our code can use to interact with the web page. It’s how we would change a style or the contents of a div, for instance.
jQuery is a JS library that’s been written to take into account all of the differences between browsers and provide useful and easy to use functions to manipulate the page. It makes things way easier than the examples we’re about to do.
Let’s say we want to create an object that holds the button on our page. document isn’t part of the JS language but it is part of the JS DOM, which is the environment you’ll be using JS inside the browser. It’s highlighted bc JS recognizes it as part of the DOM. .getElementById is a common method exposed to us by the browser. Since it’s a method, we’ll use parentheses to call it. Just like a normal function, we pass the value of the id of the element we want to get. Once we do that, we’ve stored the button element on the page into our button variable.
However, if we try calling the variable now we get null, because we didn’t actually store it in there yet.
The reason for this is the placement of the link to the js file in our html. As soon as it gets to that line, 15 in this case, it runs that code. Since it comes before the button element in the markup, it can’t find it.
To fix this, just put the script at the bottom.
Now, when we call the variable it display the html for that element. If you mouse over it, it will show you where it is on the page.
Now let’s do some stuff. To make something happen when they click the button, you can use .onclick, which sets a property on the button, in this case a function. So, whenever the button is clicked, it runs the function. NOTE: this is old and not the best way to do this.
But what if we wanted two things to happen when we call onclick? If you try just writing it twice it doesn’t work. This is because onclick can only hold one thing.
A better way to do this is with the method addEventListener. NOTE: it doesn’t work in IE. It takes a few arguments, the first is the event we want to listen for, in this case click, a special event keyword. The second is the function to be called. You can see now both things work, because addEventListener doesn’t interact with onclick at all.
However, you can use as many addEventListener’s as you’d like, which is preferable here.
We can also make it interact with the other DOM element, input, and change its value attribute with the setAttribute method.
Objects
The object is one of the core foundations of JS. It is simply a data type that associates string “keys” and values. First you declare a variable, then you create the object with curly braces, then you have key value pairs, separated by colons. { “key”: “value” }. We can access a value by doing .keyname after the objects name.
You can assign new values to your keys by doing objectname.keyname = new value.
So, these keys and values are like variables, only they’re associated with an object.
You can have multiple key value pairs by separating them with a comma. The values don’t have to be strings, they can be anything you can store in a variable, like an array for instance.
And once again you can change the value for the key.
The best way to write these is with each key value pair on its own line.
So long as your key names are valid variable names, you don’t actually need the quotes, though it may be safer with them. If the key name has a space, then you do need the quotes.
But then how do we access that? We can’t do kyle.favorite color, but there is another way to specify the key we want to set on an object, with square brackets.
You can use this to assign to the value as well.
Object Methods
We can create functions on our objects to create methods. You can add a function as a key’s value, just like any other value, then since it’s a method, you call it with parentheses.
We see this all the time with console.log. console is an object, and log is a key on it that stores a function. What we put in the parentheses is the argument passed to it. A method is a function that is a property of an object. Normally, greet() above would be considered a function, but because it is associated with the object kyle, we consider it a method on the object kyle.
Now, what if we want the “Hello I am Kyle” part of the greet method to pull what’s been entered in the name key, so it auto updates if that key changes? You can do this with kyle.name. Note that we concatenated the two with the + operator.
But even that might not be good. What if we wanted to make another object for another person? We’d have to change it to nick.name in the function.
Ideally we’d have the same method for both, relative to the person we’re talking about. We’ll do this by creating an argument “person”, and then calling the name for that argument in our function. Then, we simply pass the name we need into the method.
Once again, this isn’t ideal. JS provides us a special kind of variable, that acts like one but technically isn’t one. It’s called this. So, instead of using person, we’ll use this.
Now, since the methods are the same for both, we could even just have the second greet’s value be kyle.greet. Notice we leave off the parentheses, because we don’t want to call it, we just want the code.
It works because this is always bound to the value at the very last second. This is special because it’s given its value not when we write our method, but when we call our method.
But, what happens when we try to take the greet method and store it into a variable? It won’t display the name, because we’re calling it as a normal function, and not as a property of Kyle. So, this.keyname only works when it’s within the object.
So what does this look like outside of an object? this actually refers to the global object, known as window, and adds it as a property to it. Anytime you create a global variable, it actually gets added to the global object as a property. So if we do window.kyle, it shows us the object we made earlier. So for the whatIsThis function, this.name is calling the name property of the window object. window actually has a name property, and it is an empty string, which explains why it was blank above.
But what if we change window.name, by setting a variable called name and giving it a value? It would work. window.name would now be that value, and the kyleGreet function would use that.
So this can be dangerous. If we call our method in the incorrect way and use this outside of an object, we might accidentally write to the global namespace, which is hard to debug. So, this should only be used within a method (aka a function) in an object, not within a normal function.
Call and Apply Methods
The call and apply methods let you control the value of this.
As we saw above with the variable kyleGreet, as soon as we store a method of an object into a variable, we lose the reference to that object when using this. This results in it being bound to the global window variable. So how do we call a function as though it were a method on an object? We want kyleGreet to be called with the context of the original kyle object.
We can do that with a special method built onto all JS functions called call. To use it, instead of invoking the function with parentheses, you use the .call method, because a function is actually an object, meaning it has its own key value properties. When you use it, it actually invokes itself. So when you do kyleGreet.call(), it just invokes the function like you’d expect. However, it differs than normally invoking a function, is it takes an extra argument at the beginning of the method call, which is what value should be bound to this in the invocation of this function.
Since we want this to be bound to the object kyle, we’ll pass in kyle.
This is great, because we can change what we’re referencing on the fly. If we want this to reference nick object instead, we just have to type that in. Or if we pass an empty object, it will give us undefined, because obviously it doesn’t have any keys or values.
You could even define the object and key value pair right within the argument.
Also, since call is a method for all objects you could do this. You have the object kyle, and you’re getting what’s in the greet key for that object, which is the function, and since that’s a function you’re calling it with .call, and using the argument to say you actually want to pull from the nick object.
apply is another method built in to all functions, but differs in how it takes arguments. Let’s modify our function in the kyle object so it takes arguments now. We added two parameters it takes, first is the person you’re greeting, the second our current mood. The || means “or” in JS. So, we’re saying name equals name, which means you put something in there for it it will equal true, and therefore what you put in, or, if you didn’t, name won’t equal anything and will be false, and will therefore be undefined. If that’s the case, it will default to “You”. So we’re saying if this is false, provide this default value. This makes these values optional to enter.
We can now pass in values like we would for any function.
For the call method you can just pass in the arguments after the first argument, which is the context of the object you want to reference.
For the apply method, the first argument is still the context of the object you want to reference, but instead of listing the arguments after with spaces and commas, you do it as an array. So it takes two arguments – the context, then the array of arguments for the function.
They may seem the same, but apply gives you a useful, dynamic way to call functions. Lets say you needed to call a function with a variable number of arguments, but you’re not sure how many of those there will be. If we tried the example below it wouldn’t work right.
But, if we did it with apply, it would be expecting an array so it would. We;d just have to make sure to include the object context in the first argument.
Prototypes 1
Prototypes let us organize our code so objects can share info easier. The greet method we made under the kyle object can be used for any of the other object because this waits until the exact moment its invoked to reference it’s object. We took advantage of this by doing greet: kyle.greet under the nick object. But that and a lot of the other keys overlapped a bit. It’d be easier if we could just create a generic person object, and just change what we need to from person to person.
This is the foundation of how JS works, and lets us do Object Oriented Programing, which is programming based around creating and using objects. Note that this is different than classic object oriented programming, which other languages use.
You start by creating a prototype object, like personPrototype below, then copy that and just override what you need to. JS has prototypal inheritance, where it will inherit keys from the prototype. You start by creating a constructor function, which is a special function for creating and initializing a new object. It’s good to give it a name starting with a capital letter, as that will clarify what this function is and how it works.
New we say the new person’s name equals the keyword new, then the Person constructor function, where we pass in the argument we want to change. new actually changes what this is. It creates a new object for us, and binds this to it inside of our constructor function.
Another special property of this constructor function when you use new, which is what triggers all of this, is that it returns this if we don’t return anything.
But what is we call jim without the “return this”? We get the name key and value, but not the greet method or species. For jim.greet() it says undefined is not a function because there is not greet key for the jim object at this time.
Like call and apply, there is another special property on functions called the prototype, which is itself just an object. You call it on the constructor function, then set it equal to the object that’s your prototype. This makes everything fall into place. It updates the key specified in the constructor function, and inherits the rest from the prototype we set up before.
Prototypes 2
Doing this changes this in the constructor function in a special way. Instead of just being an object, it now has a property that lets it know what its prototype is. To see this, let’s call our new object jim in the console. We can see it has a secret link to our prototype object defined in the constructor method.
So if we call jim.name, it looks for the name key on the object jim. But, if we call jim.greet, jim doesn’t have any key called greet, but it does have its secret pointer to a prototype that does contain greet. When we call jim.greet, it sees that jim doesn’t have it, so it checks the prototype to see if that has it, and if it does, it returns that instead.
prototype actually has another special prototype, which is the base Object, which in turn has a few methods defined on itself. This is methods like toString() are defined for everything, because everything eventually links back to this Object. It’s like a chain, we have the object jim, which points to the prototype that made it, which in turn points to the base object.
So what happened in our code to do this? When we called new, what actually happens is it takes the prototype value of the function we’re calling(Person), and creates a new object based on that prototype. By default it’s just an object that points to Person.prototype. Next, it gives that object to the value this, which let’s you start assigning things to it.
Now, this only affects things at the top level, so in this case jim and NOT the personPrototype, which is good because you wouldn’t want each new object created from the prototype to affect it, because that would mess us other objects created by the prototype. When looking for keys, JS starts at the top and works its way down, so it would first look for species under the jim object, and if it didn’t find it it, it would go to the prototype.
Note that when you look up jim there are two names listed, but his is higher up so that’s what is used.
So, now we can create multiple people off the same prototype.
We can change values too for individual people, without affecting the prototype. nick now has species defined on the object itself, so it doesn’t have to pull it from the prototype.
Now, personPrototype is just an object like any other, so what happens if we assign to it directly? Like what if we wanted to change species for all people at once? We can do that. This is because the nick and jim objects are linking to the prototype each time one of those keys is called, so it will just use the new value.
It’s a live pointer. We could even add new keys and values to it. Note, in the example below I’m using Person.prototype, but I could have just as well used personPrototype, because they’re the same thing.
So what happens if you forget to use the new keyword? jim will be undefined, and it won’t work. this actually calls window.name, which as we saw is undefined. Constructor functions always start with a capital letter, because it reminds you to use new.
Kyle's Awesome Awful Websites 