So now that we know that functions are objects and that
we can also store functions in objects which essentially stores the object in an object I guess but an
object which can be executed as a function,
now that we know that, let's dive into a different way of creating functions.
This code here, where I stored a function in an object is a bit strange because effectively here, we're creating
that function on the right side of an assignment operator,
the colon here is doing nothing else than assigning this or this value to this or this key,
right?
So it's a bit like if we would say well we store this function let's say in a constant named start or
start game or whatever you want to name it, doesn't have to be the same name as here, it is like if I
would do that.
Now if I do that and I reload, we'll get an error, start game is not defined and this is coming from line
18.
So now this line here at the bottom complains that it can't find the start game function anymore, even
though it exists.
Now it's interesting to note that we didn't get any other error though,
so Javascript does not complain that we use this on the right side of an equal sign.
Now that's not something you should take for granted because for example, if we try to use an if statement
on the right side, then Javascript will complain,
even the IDE already complains that this is not allowed.
So it's not something we should take for granted that we can take a function on the right side of the equal
sign,
it's something special indeed, it's something which we can do in Javascript.
Now we store this function object, which it in the end is, in this start constant,
the implication of that however is a very important one,
previously we're not doing that. Javascript went through our file and registered all functions, no matter where
we placed them, even if we placed them below the place where we use them and was aware of them, it stored
these objects in some place in the global scope in the end,
right,
so we could call start game here.
Now when we store it in this variable here, the implication is that this function is still created but
it's not stored under this name here in the global scope anymore,
instead this is just some kind of internal name which is attached to the function but which is not available
in the global scope but instead, it's now stored in this constant.
So if we would want to call this function here now, we can also call it like this,
we have to refer to start down there,
so to this start constant or whatever you name this constant.
So if you named that start game which you can do, you can use the same name as here,
this will not clash because as I just explained, this will not be stored in a global scope anymore
when this is on the right side,
so you can you start game, well then obviously you can keep start game down there too
but if you use a different name which obviously is better for explaining this here, then you see you
have to use that name down there and if you do so and you save that and you reload, it will work again.
So you can store functions in variables or constants,
what are you doing here in the end is you're using this function as an expression instead of as a declaration.
So here, we're using this function as a declaration, as a statement, here since it's on the right side
of the equal sign,
we just use it as an expression.
Remember, expressions were essentially the thing that yielded you values, so something you could store
somewhere else,
I mentioned that earlier as well.
So now we're creating a function in this expression mode and therefore it generates a function object
just as it did before
but the difference is that Javascript will not go ahead and take that object and store it in the global
scope for us in the end under that name but that instead, we just store it in this variable, that variable
or that constant here is then stored in a global scope but we can therefore now only reference this
function by using that variable or constant name,
this is something we can do. And now we can also omit this name here if you want to because we don't
really need it here, right?
We can't reference that function by that name anyways and hence, we can also omit it.
This now is a so-called anonymous function and typically you then place the parentheses right after
the function keyword without a whitespace,
technically it doesn't make a difference,
it's just some code style and important, when using this function expression with or without a name,
you also typically add a semicolon after it.
You could do that after a function declaration as we used it before as well
but there you typically avoid it because it's like a statement
but here if it's on the right side, the convention is to add this semicolon.
So now if we do that, this will still work as before as you can tell
but now we also create this so-called anonymous function.
Now the concept of having an anonymous function is detached from the concept of storing a function in a
constant.
We can use anonymous functions in different places as well and I'll show you such a place in just a
second,
I just wanted to introduce it here as well
but let's actually take a step back from that and ignore the anonymous function thing right now and
just have a look at this function expression versus function declaration, function statement thing
why would you use that instead of the other syntax?