-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathFunctionStatementsandfunctionExpressions.html
More file actions
executable file
·1 lines (1 loc) · 30.3 KB
/
FunctionStatementsandfunctionExpressions.html
File metadata and controls
executable file
·1 lines (1 loc) · 30.3 KB
1
<html><head><meta content="text/html; charset=UTF-8" http-equiv="content-type"><style type="text/css">ol{margin:0;padding:0}table td,table th{padding:0}.c3{-webkit-text-decoration-skip:none;color:#007791;font-weight:400;text-decoration:underline;vertical-align:baseline;text-decoration-skip-ink:none;font-size:11.5pt;font-family:"Arial";font-style:normal}.c0{color:#29303b;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11.5pt;font-family:"Arial";font-style:normal}.c6{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Arial";font-style:normal}.c4{padding-top:0pt;padding-bottom:0pt;line-height:1.15;orphans:2;widows:2;text-align:left;height:11pt}.c1{padding-top:0pt;padding-bottom:8pt;line-height:1.15;orphans:2;widows:2;text-align:left}.c2{background-color:#ffffff;max-width:468pt;padding:72pt 72pt 72pt 72pt}.c5{background-color:#e6f2f5}.title{padding-top:0pt;color:#000000;font-size:26pt;padding-bottom:3pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.subtitle{padding-top:0pt;color:#666666;font-size:15pt;padding-bottom:16pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}li{color:#000000;font-size:11pt;font-family:"Arial"}p{margin:0;color:#000000;font-size:11pt;font-family:"Arial"}h1{padding-top:20pt;color:#000000;font-size:20pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h2{padding-top:18pt;color:#000000;font-size:16pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h3{padding-top:16pt;color:#434343;font-size:14pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h4{padding-top:14pt;color:#666666;font-size:12pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h5{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h6{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;font-style:italic;orphans:2;widows:2;text-align:left}</style></head><body class="c2"><p class="c1"><span class="c0">So now that we've seen that functions are objects in JavaScript.</span></p><p class="c1"><span class="c3">We're going to see how the JavaScript programming language lets us do some</span></p><p class="c1"><span class="c0">really interesting and powerful things with this concept.</span></p><p class="c1"><span class="c0">The concept of first class functions.</span></p><p class="c1"><span class="c0">To start we need to understand the difference and</span></p><p class="c1"><span class="c0">the usage of function statements and function expressions.</span></p><p class="c1"><span class="c0">Well, that sounds complicated.</span></p><p class="c1"><span class="c0">It isn't.</span></p><p class="c1"><span class="c0">Big word alert.</span></p><p class="c1"><span class="c0">An expression.</span></p><p class="c1"><span class="c0">An expression is a unit of code that results in a value.</span></p><p class="c1"><span class="c0">And that's it.</span></p><p class="c1"><span class="c0">So when we say a function statement, statements just do work.</span></p><p class="c1"><span class="c0">But a function expression or</span></p><p class="c1"><span class="c0">any expression in JavaScript ends up creating a value and</span></p><p class="c1"><span class="c0">that value doesn't necessarily have to save inside a variable.</span></p><p class="c1"><span class="c0">All right, let's look at an example.</span></p><p class="c1"><span class="c0">So I have my empty app,js file and</span></p><p class="c1"><span class="c0">I'm just going to declare a variable, let's just say a.</span></p><p class="c1"><span class="c0">Now I'm going to run this, and I'll open a console here in Google Chrome.</span></p><p class="c1"><span class="c0">Now I have a sitting there in memory, and</span></p><p class="c1"><span class="c0">I can write some code on the fly here in the console.</span></p><p class="c1"><span class="c0">So, what is an expression?</span></p><p class="c1"><span class="c0">We said an expression returns a value.</span></p><p class="c1"><span class="c0">So I have a unit of codes, code that I've written.</span></p><p class="c1"><span class="c0">And that unit,</span></p><p class="c1"><span class="c0">essentially a line of code, although it can be split into multiple physical lines,</span></p><p class="c1"><span class="c0">sometimes it's run as a unit.</span></p><p class="c1"><span class="c0">I have a unit of code, I'm setting a equal three.</span></p><p class="c1"><span class="c0">Remember that equals is an operator,</span></p><p class="c1"><span class="c0">a function that takes these two values, does some work and then returns a value.</span></p><p class="c1"><span class="c0">So this will return three because I passed a on the left side and three on the other.</span></p><p class="c1"><span class="c0">And it returns whatever is on the right side.</span></p><p class="c1"><span class="c0">The second parameter.</span></p><p class="c1"><span class="c0">So, I run that, and I get a value back.</span></p><p class="c1"><span class="c0">Three.</span></p><p class="c1"><span class="c0">Because the equals operator returns a value.</span></p><p class="c1"><span class="c0">This happens to set some values in memory, but</span></p><p class="c1"><span class="c0">I can run a different expression like one plus two.</span></p><p class="c1"><span class="c0">This is a valid expression.</span></p><p class="c1"><span class="c0">And the plus sign as an operator, takes these two values, and adds them, and</span></p><p class="c1"><span class="c0">returns the result.</span></p><p class="c1"><span class="c0">And I can run it, and it just happens to return three in this case,</span></p><p class="c1"><span class="c0">but notice that I didn't set it equal to anything in memory.</span></p><p class="c1"><span class="c0">So the expression evaluated.</span></p><p class="c1"><span class="c0">That is to say it ran and returned this value, this result here.</span></p><p class="c1"><span class="c0">But I didn't do anything with that value.</span></p><p class="c1"><span class="c0">But in both cases this is an expression.</span></p><p class="c1"><span class="c0">Because it returned a value.</span></p><p class="c1"><span class="c0">Get that?</span></p><p class="c1"><span class="c0">That line of code results in a value.</span></p><p class="c1"><span class="c0">Now that value could be a number or a string or an object, whatever the case.</span></p><p class="c1"><span class="c0">But it's still ends up being a value.</span></p><p class="c1"><span class="c0">So I could go a equals, and I'll use an object literal greeting hi, and</span></p><p class="c1"><span class="c0">it still works the same way.</span></p><p class="c1"><span class="c0">It puts it into memory and the equals operator returns a value.</span></p><p class="c1"><span class="c0">Got that?</span></p><p class="c1"><span class="c0">So when we're talking about a statement, on the other hand,</span></p><p class="c1"><span class="c0">let's say I do an if statement, If a equals three and then do something.</span></p><p class="c1"><span class="c0">Inside the parentheses of an if statement,</span></p><p class="c1"><span class="c0">you put an expression because that results in a value.</span></p><p class="c1"><span class="c0">But the if statement itself is just a statement.</span></p><p class="c1"><span class="c0">It's called an if statement because it doesn't return a value.</span></p><p class="c1"><span class="c0">I can't say variable b equals and then if, because this just does work.</span></p><p class="c1"><span class="c0">No value is returned.</span></p><p class="c1"><span class="c0">The if is a statement, and inside the if statement you have an expression,</span></p><p class="c1"><span class="c0">because the expression this triple equals returns a value ultimately true or false.</span></p><p class="c1"><span class="c0">Get that.</span></p><p class="c1"><span class="c0">So statement just does work and an expression results in a value.</span></p><p class="c1"><span class="c0">In JavaScript, because functions are objects, I have both function statements</span></p><p class="c1"><span class="c0">and function expressions, which are extraordinarily powerful.</span></p><p class="c1"><span class="c0">Let's show the difference.</span></p><p class="c1"><span class="c0">I'll clear this out.</span></p><p class="c1"><span class="c0">I'm going to do a function statement.</span></p><p class="c1"><span class="c0">I'll make a function called greet and I'll console.log('hi').</span></p><p class="c1"><span class="c0">This is a function statement.</span></p><p class="c1"><span class="c0">When it's run, when it's evaluated, it doesn't result in a value.</span></p><p class="c1"><span class="c0">The function is placed into memory, but it's just a statement.</span></p><p class="c1"><span class="c0">It doesn't return a value until the function is executed.</span></p><p class="c1"><span class="c0">So when I see this, it does say okay, I'm putting the function in memory.</span></p><p class="c1"><span class="c0">But this unit of code doesn't result in a value.</span></p><p class="c1"><span class="c0">But it does do some special things.</span></p><p class="c1"><span class="c0">We've already seen that it gets hoisted.</span></p><p class="c1"><span class="c0">That is, during the creation phase of the execution context,</span></p><p class="c1"><span class="c0">the global execution context, in this case, it's put into memory.</span></p><p class="c1"><span class="c0">And so it's available ahead of time.</span></p><p class="c1"><span class="c0">I can call greet before I declare it, before I make that function's statement.</span></p><p class="c1"><span class="c0">So it's available to me in memory.</span></p><p class="c1"><span class="c0">That's fine.</span></p><p class="c1"><span class="c0">It's still an object.</span></p><p class="c1"><span class="c0">It's name is greet and its code property contains the code you wrote inside of it.</span></p><p class="c1"><span class="c0">Now I'm going to use a function expression, watch.</span></p><p class="c1"><span class="c0">I'll type a variable name, let's call this anonymousGreet.</span></p><p class="c1"><span class="c0">I use the equals operator.</span></p><p class="c1"><span class="c0">And here I could put a number or a string or an object,</span></p><p class="c1"><span class="c0">maybe using the object literal syntax.</span></p><p class="c1"><span class="c0">Instead I'll use a function expression.</span></p><p class="c1"><span class="c0">I'll say function and</span></p><p class="c1"><span class="c0">then I'll give myself some whitespace just to make it clear.</span></p><p class="c1"><span class="c0">I'll make the same function.</span></p><p class="c1"><span class="c0">Now wait a minute, does that look strange?</span></p><p class="c1"><span class="c0">What are we doing?</span></p><p class="c1"><span class="c0">Well remember functions in JavaScript are objects.</span></p><p class="c1"><span class="c0">So I'm creating an object on the fly and setting it equal to this variable.</span></p><p class="c1"><span class="c0">That is this variable, it's spot in memory that it points to.</span></p><p class="c1"><span class="c0">It's address in memory that it points to will contain a function object.</span></p><p class="c1"><span class="c0">Make sense?</span></p><p class="c1"><span class="c0">So what's really going on here?</span></p><p class="c1"><span class="c0">Well, remember what happened.</span></p><p class="c1"><span class="c0">Let's look at our function declaration again, our function statement.</span></p><p class="c1"><span class="c0">This is the one that gets pulled up into memory</span></p><p class="c1"><span class="c0">when the execution context is created.</span></p><p class="c1"><span class="c0">And it has this name property, and this code property, that get set.</span></p><p class="c1"><span class="c0">So I have an object in memory, the name is greet, because that's where I</span></p><p class="c1"><span class="c0">put before before those parentheses, and it has a line of code.</span></p><p class="c1"><span class="c0">And when I call it.</span></p><p class="c1"><span class="c0">It's connected to that spot in memory where this function object lives,</span></p><p class="c1"><span class="c0">and those parens then invoke the code part of the function.</span></p><p class="c1"><span class="c0">Now what about my function expression?</span></p><p class="c1"><span class="c0">In this case, I have an equals operator that's putting this object into memory.</span></p><p class="c1"><span class="c0">And pointing that anonymous greet variable at that address.</span></p><p class="c1"><span class="c0">Remember, it's not really looking at the name of the function or</span></p><p class="c1"><span class="c0">anything like that.</span></p><p class="c1"><span class="c0">It knows the address in memory just like you have an address for where you live.</span></p><p class="c1"><span class="c0">So we still get a function object.</span></p><p class="c1"><span class="c0">The JavaScript engine creates one.</span></p><p class="c1"><span class="c0">And in this case I didn't have a name.</span></p><p class="c1"><span class="c0">Because, I didn't put anything before the parenthesis, and I don't have to.</span></p><p class="c1"><span class="c0">Because, I have a variable that already knows where that object lives.</span></p><p class="c1"><span class="c0">So, I don't need a name to reference it by.</span></p><p class="c1"><span class="c0">So this is an anonymous function.</span></p><p class="c1"><span class="c0">You may have heard that phrase.</span></p><p class="c1"><span class="c0">That's all this really means.</span></p><p class="c1"><span class="c0">An anonymous function is a function that doesn't have a name in it's name property.</span></p><p class="c1"><span class="c0">But that's okay, because you can reference it with</span></p><p class="c1"><span class="c0">variable names that are pointing to the address where that object lives.</span></p><p class="c1"><span class="c0">And we have the same code property, the same line of code is inside of there.</span></p><p class="c1"><span class="c0">So how do we invoke this function?</span></p><p class="c1"><span class="c0">We need to point at the object.</span></p><p class="c1"><span class="c0">And then tell it to run its code.</span></p><p class="c1"><span class="c0">Can you guess?</span></p><p class="c1"><span class="c0">That's right.</span></p><p class="c1"><span class="c0">The variable is already pointing to where it lives.</span></p><p class="c1"><span class="c0">And then I put parentheses, which invokes the code.</span></p><p class="c1"><span class="c0">So if I do that here, anonymousGreet and then parentheses, and run this.</span></p><p class="c1"><span class="c0">That runs the same code as well.</span></p><p class="c1"><span class="c0">So I use an anonymous function in this case.</span></p><p class="c1"><span class="c0">And this right here by itself.</span></p><p class="c1"><span class="c0">In this case, is an expression.</span></p><p class="c1"><span class="c0">Because it results in a value.</span></p><p class="c1"><span class="c0">I end up with the function object when this part of the code is evaluated,</span></p><p class="c1"><span class="c0">or considered, or executed.</span></p><p class="c1"><span class="c0">This is just a function statement.</span></p><p class="c1"><span class="c0">Because when the code is executing,</span></p><p class="c1"><span class="c0">even though this function has been placed into memory.</span></p><p class="c1"><span class="c0">When this part is actually run through in the execution phase,</span></p><p class="c1"><span class="c0">it doesn't really do anything.</span></p><p class="c1"><span class="c0">It just says, oh yeah, there's a function there.</span></p><p class="c1"><span class="c0">It keeps going.</span></p><p class="c1"><span class="c0">When this line is executed.</span></p><p class="c1"><span class="c0">This statement results in an object being created.</span></p><p class="c1"><span class="c0">It returns an object essentially.</span></p><p class="c1"><span class="c0">So it's an expression.</span></p><p class="c1"><span class="c0">It results in a value.</span></p><p class="c1"><span class="c0">The value being a new function object.</span></p><p class="c1"><span class="c0">And I can make this anonymous.</span></p><p class="c1"><span class="c0">You might think well why shouldn't I have a name there?</span></p><p class="c1"><span class="c0">Well, that's a lot to type, why bother?</span></p><p class="c1"><span class="c0">Good code is about being clear and understandable,</span></p><p class="c1"><span class="c0">while at the same time minimizing the amount of code that we need to write.</span></p><p class="c1"><span class="c0">So, the anonymous function is great for this.</span></p><p class="c1"><span class="c0">It's very clear that I'm creating a function object.</span></p><p class="c1"><span class="c0">And it's not difficult to understand how to invoke, how to call it.</span></p><p class="c1"><span class="c0">How to run the function.</span></p><p class="c1"><span class="c0">Now, that said, let me ask you a question.</span></p><p class="c1"><span class="c0">If I move this line above this line.</span></p><p class="c1"><span class="c0">Just like I did for calling greet before it was</span></p><p class="c1"><span class="c0">created here in the statement, in the code.</span></p><p class="c1"><span class="c0">This worked.</span></p><p class="c1"><span class="c0">What do you think will happen here and why?</span></p><p class="c1"><span class="c0">Think about what you know about the execution context being created,</span></p><p class="c1"><span class="c0">and then execute it.</span></p><p class="c1"><span class="c0">Executing code line by line.</span></p><p class="c1"><span class="c0">Knowing that it puts function statements, and variables into memory first.</span></p><p class="c1"><span class="c0">And what it does with variables when it puts them into memory And</span></p><p class="c1"><span class="c0">the how it runs line by line through the code.</span></p><p class="c1"><span class="c0">What do you expect to see?</span></p><p class="c1"><span class="c0">We already know that this will say hi.</span></p><p class="c1"><span class="c0">Because it will call this function, it's in memory.</span></p><p class="c1"><span class="c0">What do you think you'll see here?</span></p><p class="c1"><span class="c0">Uncaught TypeError: undefined is not a function.</span></p><p class="c1"><span class="c0">Did that surprise you?</span></p><p class="c1"><span class="c0">Well it shouldn't.</span></p><p class="c1"><span class="c0">Remember that this is hoisted.</span></p><p class="c1"><span class="c0">Meaning when the JavaScript engine sees the word function on a new line by itself,</span></p><p class="c1"><span class="c0">it says oh, you're creating a function here.</span></p><p class="c1"><span class="c0">And I'll put it in memory.</span></p><p class="c1"><span class="c0">But here it sees a variable.</span></p><p class="c1"><span class="c0">It puts it into memory and</span></p><p class="c1"><span class="c0">what does it set the variable equal to before it starts executing the code?</span></p><p class="c1"><span class="c0">All variables.</span></p><p class="c1"><span class="c0">That's right.</span></p><p class="c1"><span class="c0">The special primitive called undefined.</span></p><p class="c1"><span class="c0">And then it begins to run the code.</span></p><p class="c1"><span class="c0">So it runs greet, and it says, oh yes, I have that in memory.</span></p><p class="c1"><span class="c0">Then it sees the function statement, nothing to do there really.</span></p><p class="c1"><span class="c0">And then it sees this, and it says, oh, I see that in memory, it's undefined.</span></p><p class="c1"><span class="c0">Because we haven't hit the line where it's set equal to anything yet.</span></p><p class="c1"><span class="c0">And then we just tried to invoke it as if it was a function.</span></p><p class="c1"><span class="c0">And JavaScript said nope.</span></p><p class="c1"><span class="c0">The undefined primitive is not a function.</span></p><p class="c1"><span class="c0">It isn't until this line of code where it's set equal</span></p><p class="c1"><span class="c0">to this new function object that's created when it sees this code.</span></p><p class="c1"><span class="c0">So function expressions aren't hoisted.</span></p><p class="c1"><span class="c0">And that can confuse people.</span></p><p class="c1"><span class="c0">But if we think about it from the perspective of how JavaScript does this</span></p><p class="c1"><span class="c0">under the hood, it's not really surprising.</span></p><p class="c1"><span class="c0">It just only hoisted the variable.</span></p><p class="c1"><span class="c0">And so the variable doesn't contain an object until this line of code is run in</span></p><p class="c1"><span class="c0">the execution phase.</span></p><p class="c1"><span class="c0">So, I have to then have it first set equal.</span></p><p class="c1"><span class="c0">So that it's sitting in memory.</span></p><p class="c1"><span class="c0">And then I can invoke it, like this.</span></p><p class="c1"><span class="c0">Make sense?</span></p><p class="c1"><span class="c0">All right, I'll put this above as well so we can see the difference.</span></p><p class="c1"><span class="c0">Undefined is not a function.</span></p><p class="c1"><span class="c0">Now when I remove it one more time.</span></p><p class="c1"><span class="c0">It runs just fine.</span></p><p class="c1"><span class="c0">Because at this point, this equals operator has been run.</span></p><p class="c1"><span class="c0">And it's put the result of this statement, a new function object, into this variable.</span></p><p class="c1"><span class="c0">That is this variable points to a spot in memory.</span></p><p class="c1"><span class="c0">And inside that spot in your computer's memory, is sitting this function object.</span></p><p class="c1"><span class="c0">All right, so let's do one more cool thing.</span></p><p class="c1"><span class="c0">I'm gonna create a new function using a function statement called log.</span></p><p class="c1"><span class="c0">It'll just take a variable.</span></p><p class="c1"><span class="c0">Let's say variable a.</span></p><p class="c1"><span class="c0">And I'm going to console.log, whatever is passed into the function.</span></p><p class="c1"><span class="c0">Now I'm going to then call this function.</span></p><p class="c1"><span class="c0">If I pass a number, what's going to happen?</span></p><p class="c1"><span class="c0">Well it'll get that number and output it.</span></p><p class="c1"><span class="c0">And I'm just creating this on the fly.</span></p><p class="c1"><span class="c0">I didn't create a variable.</span></p><p class="c1"><span class="c0">And then pass the variable, although I could.</span></p><p class="c1"><span class="c0">I'm just creating that value on the fly.</span></p><p class="c1"><span class="c0">So when I run this I see three.</span></p><p class="c1"><span class="c0">That makes sense.</span></p><p class="c1"><span class="c0">What about a string?</span></p><p class="c1"><span class="c0">Hello.</span></p><p class="c1"><span class="c0">I'm just creating this string on the fly.</span></p><p class="c1"><span class="c0">I could set a variable.</span></p><p class="c1"><span class="c0">And then pass that variable, but I don't have to.</span></p><p class="c1"><span class="c0">I can just create the string on the fly.</span></p><p class="c1"><span class="c0">This is a string literal.</span></p><p class="c1"><span class="c0">I use quotes.</span></p><p class="c1"><span class="c0">I could use single quotes if I wanted, and</span></p><p class="c1"><span class="c0">that string is created, and the function outputs it.</span></p><p class="c1"><span class="c0">The function got it as a parameter.</span></p><p class="c1"><span class="c0">What about an object?</span></p><p class="c1"><span class="c0">Well, we've already seen that I can use curly braces, and create myself an object.</span></p><p class="c1"><span class="c0">So I might go, greeting: hi, and</span></p><p class="c1"><span class="c0">it just has single name value pair in this case, but the object is created.</span></p><p class="c1"><span class="c0">I could, set it equal to a variable, and pass that variable,</span></p><p class="c1"><span class="c0">but I can just create the object on the fly.</span></p><p class="c1"><span class="c0">So, greeting: hi, but it's inside that object.</span></p><p class="c1"><span class="c0">The object was created.</span></p><p class="c1"><span class="c0">Name value pair.</span></p><p class="c1"><span class="c0">All right.</span></p><p class="c1"><span class="c0">So that's great.</span></p><p class="c1"><span class="c0">But, remember what we just learned.</span></p><p class="c1"><span class="c0">A function is an object.</span></p><p class="c1"><span class="c0">And a function expression creates an object, a function object on the fly.</span></p><p class="c1"><span class="c0">So, I can do something that looks really strange.</span></p><p class="c1"><span class="c0">I can say function, and create a function on the fly.</span></p><p class="c1"><span class="c0">See what I did?</span></p><p class="c1"><span class="c0">This works an awful lot like an object literal.</span></p><p class="c1"><span class="c0">I'm creating a function on the fly, putting some code, it creates that object.</span></p><p class="c1"><span class="c0">Puts that code into that code property of that function object.</span></p><p class="c1"><span class="c0">It's just like a string, or a number, an object.</span></p><p class="c1"><span class="c0">I'm just creating a function on the fly, because functions are objects.</span></p><p class="c1"><span class="c0">And so that will get passed to the function.</span></p><p class="c1"><span class="c0">And look, it has the function.</span></p><p class="c1"><span class="c0">It's anonymous, but it's referenced with that a parameter.</span></p><p class="c1"><span class="c0">See how that works?</span></p><p class="c1"><span class="c0">First class functions, functions that can be passed around,</span></p><p class="c1"><span class="c0">created on the fly, used, and variables can be set equal to them.</span></p><p class="c1"><span class="c0">That's pretty neat.</span></p><p class="c1"><span class="c0">So, if I want to then invoke this function, the a parameter now points at</span></p><p class="c1"><span class="c0">a spot in memory, where this has been created, when I called the log function.</span></p><p class="c1"><span class="c0">It passed a function to a function, which is something you can do in JavaScript, and</span></p><p class="c1"><span class="c0">other languages that work like JavaScript, when it comes to functions.</span></p><p class="c1"><span class="c0">So I passed a function to a function, so</span></p><p class="c1"><span class="c0">now I have this a property, and it's pointing at a function object.</span></p><p class="c1"><span class="c0">So how do I get it to run?</span></p><p class="c1"><span class="c0">How can I run this function that I created, and gave to log?</span></p><p class="c1"><span class="c0">Well I just go parentheses, right?</span></p><p class="c1"><span class="c0">That tells the JavaScript engine to invoke, or run the function.</span></p><p class="c1"><span class="c0">Take a really good look at this.</span></p><p class="c1"><span class="c0">I'm calling log, and passing a function, using a function expression,</span></p><p class="c1"><span class="c0">creating the function right there, inside the parentheses where I'm</span></p><p class="c1"><span class="c0">passing it to here, and so a now is this function.</span></p><p class="c1"><span class="c0">It points to a spot in memory that contains this function object, and</span></p><p class="c1"><span class="c0">I can just tell it, okay now invoke your code, run your code.</span></p><p class="c1"><span class="c0">So what am I going to see?</span></p><p class="c1"><span class="c0">There's that third hi.</span></p><p class="c1"><span class="c0">Get it?</span></p><p class="c1"><span class="c0">So, I have a function statement, hoisted into memory,</span></p><p class="c1"><span class="c0">during the creation phase of the execution context.</span></p><p class="c1"><span class="c0">I have a function expression here,</span></p><p class="c1"><span class="c0">that's used as part of the equals operator, to set it equal to a variable.</span></p><p class="c1"><span class="c0">Then I can use that variable to invoke it.</span></p><p class="c1"><span class="c0">And I have a function expression, that I'm passing a function,</span></p><p class="c1"><span class="c0">as a parameter to another function.</span></p><p class="c1"><span class="c0">And then I can use it.</span></p><p class="c1"><span class="c0">This concept of first class functions then, where you can pass functions around,</span></p><p class="c1"><span class="c0">give functions to other functions, use them like you do variables,</span></p><p class="c1"><span class="c0">introduces an entirely new class of programming,</span></p><p class="c1"><span class="c0">called functional programming.</span></p><p class="c1"><span class="c0">And we'll talk about that in a bit.</span></p><p class="c1"><span class="c0">But just for now, realize that, when you see this style</span></p><p class="c1"><span class="c0">of syntax, it's a function expression, and</span></p><p class="c1"><span class="c0">it's available because of first class functions.</span></p><p class="c1"><span class="c0 c5">Because functions in JavaScript are objects.</span></p><p class="c4"><span class="c6"></span></p></body></html>