- [Narrator] In the previous example, I treat the variable containing the anonymous function as if it were a function itself. You see it right here, I'm calling the variable name, then adding parenthesis after it, pretending its a function, and then passing arguments into that parenthesis. These arguments are then passed to the anonymous function inside the variable, the function runs, some result is returned, and then we're console logging the result as if everything here was a function. It begs the question, what happens if we just console log out the variable itself? Well, let's try it.
Save that, and you see we actually get the function in the console. This is important, because later we'll hook up anonymous functions to events, and in that case, we actually want the function to be returned, not the result of the function. More on that later in the course. This scenario brings up an important question: How do I populate the variable with the result of an anonymous function? The answer is you need to use an immediately invoked function expression that runs as soon as the browser encounters it.
Here's what that looks like. First, we wrap our entire anonymous function in parenthesis. Then, we invoke the function by adding a set of parenthesis at the end. And because we have arguments here, we need to place those arguments inside this new set of parenthesis. So I'll cut them out, and paste them in here. Now when the script is read from the top down, the browser says, "Hey, here is a variable, "and inside the variable we have an "immediately invoked function expression, "so I'm going to run the function right now, "with these arguments, and return "the result back into the variable." That means, now we can console log out just theBiggest, and get the result.
This is a radically different way of doing things from what I showed you with both named functions and anonymous functions. And it has some significant consequences. Remember the example we used previously where I set up two variables, firstFraction seven/nine, and secondFraction... 13/25, and then used these two variables as the arguments sent to the function? Well, guess what. If I do that here, and save it, well guess what, if I do that here, and save, I end up in trouble.
In my console, I get B and undefined, and that's because I'm running the ternary operator here and I'm saying if A is bigger than B, then give us A and the result of A, otherwise give us B and the result of B, and in this case, we have otherwise meaning we don't have any values, so we'll always get the letter B and then undefined, which is nothing. Why is this happening? Well, it's because this isn't an immediately invoked function expression. The browser runs the function when it's encountered, so you'll remember previously when we made our named function, we placed it at the top, and then we called the function later on after we defined the variables? Well now, if we want to use external variables, those variables have to be defined before we list out our immediately invoked function expression.
So, cut the variables out, move them to the top, save, and everything works again. So why would you want to use an immediately invoked function expression? Good question. The benefit of this function is that it runs immediately where it's located in the code, and produces a direct output. That means, on first run, it is unaffected by code which appears further down in the script, which can be useful. These functions are great for quickly populating a variable or argument in a larger function or a property in an object, and are often hooked to event listeners for an immediate output.
However, when you use these, you need to be very careful about how you structure your script, because as you see, they are invoked immediately, they don't wait for you to call the biggest variable, they just run as soon as the browser encounters them.
Author
Updated
4/1/2019Released
5/17/2017Through practical examples and mini-projects, this course helps you build your understanding of JavaScript piece by piece, from core principles like variables, data types, conditionals, and functions through advanced topics including loops, closures, and DOM scripting. Along the way, you will also be introduced to some ES6 and the basics of JavaScript libraries.
- What is JavaScript?
- Working with data
- Using functions and objects
- Working with JavaScript and the DOM
- Changing DOM elements
- Handling events
- Working with loops
- Making images responsive using markup
- Troubleshooting code
- Validating functionality
- Minifying JavaScript
Skill Level Beginner
Duration
Views
Related Courses
-
Introduction
-
Welcome1m 7s
-
-
1. JavaScript: An Introduction
-
What is JavaScript?2m 38s
-
-
2. The Basics
-
Introducing the browser console10m 31s
-
3. Working with data
-
Data types in JavaScript4m 2s
-
Arrays2m 20s
-
4. Functions and Objects
-
Functions in JavaScript3m 28s
-
Build a basic function3m 29s
-
Anonymous functions5m 11s
-
Variable scope3m 17s
-
ES2015: let and const6m 12s
-
Make sense of objects3m 19s
-
Object constructors6m 16s
-
Closures8m 11s
-
-
5. JavaScript and the DOM, Part 1: Changing DOM Elements
-
Access and change elements4m 33s
-
Access and change classes3m 45s
-
Access and change attributes4m 53s
-
Add DOM elements6m 56s
-
6. Project: Create an Analog Clock
-
Use CSS to move clock hands3m 49s
-
7. JavaScript and the DOM, Part 2: Events
-
What are DOM events?1m 31s
-
Some typical DOM events1m 59s
-
Add and use event listeners6m 51s
-
-
8. Project: Typing Speed Tester
-
Rundown of HTML markup2m 58s
-
Build a count-up timer5m 56s
-
Add a reset button5m 3s
-
-
9. Loops
-
Loops3m 37s
-
Looping through arrays4m 7s
-
Break and continue loops7m 9s
-
-
10. Project: Automated Responsive Images Markup
-
Project breakdown1m 55s
-
Rundown of project setup3m 26s
-
-
11. Troubleshooting, Validating, and Minifying JavaScript
-
Troubleshooting JavaScript7m 20s
-
Online script linting5m 57s
-
Automate script linting8m 24s
-
Online script minification2m 50s
-
Automate script minification2m 24s
-
12. Bonus Chapter: Ask the Instructor
-
What are arrow functions?3m 11s
-
What does the % symbol do?3m 47s
-
-
Conclusion
-
Next Steps1m 55s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Immediately invoked functional expressions