HTML Academy
Closures
Getting to know events21/25
Back to the list of tasks
  • 1. Introduction to events
  • 2. How to add a handler
  • 3. How events are arranged
  • 4. Default actions
  • 5. Please pass the function
  • 6. Hiding the popup
  • 7. Pressing a key
  • 8. Choosing a key
  • 9. With one click
  • 10. Summary of “Events in JavaScript”, part 1
  • 11. First program: “Don’t be shy”
  • 12. Welcome to our photo gallery
  • 13. Click ’em all!
  • 14. Adding an image
  • 15. A bug has crept into the system
  • 16. Scope
  • 17. Global scope
  • 18. Inside out variables
  • 19. Becoming Independent
  • 20. Closures
  • 21. Let’s prepare for school
  • 22. Fixing the gallery
  • 23. Getting to the heart of the matter
  • 24. Summary of “Events in JavaScript”, part 2
  • 25. The Second Program: “Señor Tomato”
Fixing the gallery
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Let’s prepare for school

Everything works. Global variables do not affect the function in any way.

Our example works, but it is tightly associated with the value inside the collectContainer function. Maybe the student doesn’t want to just eat pasta every time? We need to offer him a choice. And more often than not, we pass some values to the function, and we do not rigidly record them inside the local scope. Add a parameter to the collectContainer function.


var collectContainer = function (food) {
  return function () {
    console.log('I ate ' + food);
  };
};

var schoolkid = collectContainer('pasta');
schoolkid();
// Outputs: I ate pasta.

Now the value of food will be taken from the parameter, and not from the local variable of the collectContainer function. Everything will work exactly the same. The function that collectContainer returns will remember the value of the parameter and use it when it makes a call.

We made the internal function anonymous because the name eatDinner is not used anywhere. It does not affect the operation of the function in any way.

Imagine now that we have two students. Each of them brings a lunchbox of food from home.

Make sure that when the global variables are redefined that it does not affect the operation of our collectContainer function.

Note that each time that we call the collectContainer function and write the result to a variable, a new closure is created in the memory that will remember the value of the food parameter at the time that it is created.

Comments

  • script.js
JavaScript
var food = 'salad'; var collectContainer = function (food) { return function () { console.log('I ate ' + food); }; }; var schoolkidFirst = collectContainer('pasta');

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

Console

The code has changed, click “Run” or turn autorun on.

Result

Goalscompleted
  1. Create a similar variable schoolkidSecond after the schoolkidFirst variable. Pass the string 'dumplings' as an argument.
  2. Then below it redefine the value of the global variable food to 'celery'.
  3. Then call the function from the schoolkidFirst variable.
  4. Below that call the function from the schoolkidSecond variable.
  5. Let’s now break our closure by removing the food parameter from the collectContainer function. Let’s feed our students celery! Mu-ha-ha!

Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2025

VISAMastercard

Log in

or

Forgot your password?

Sign up

Sign up

or
Log in

Restore access

Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

Forgot to connect your email to the profile? Email us and we’ll help.