HTML Academy
Inside out variables
Getting to know events19/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”
Closures
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Becoming Independent

We found out that when we redefine global variables, it affects the output of the functions that use these variables. However, as a general rule of thumb it is not worth doing this. It is not a best practice. Redefining variables that are used by a function can lead to unexpected consequences and bugs in the code. That is why we have parameters that allow us to reuse functions whereby we explicitly pass the required values.

We already have a clear understanding of how parameters work if we want to immediately call a function and obtain the output of its execution.

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

eatDinner('steak');
// Outputs: I ate steak.

What should we do if we want to record a certain value in the function but obtain the result later? We do the same thing with events: we create a function, and we use certain values inside it, but we do not obtain an immediate result. It only happens when some event occurs. Of course, everything doesn’t always go smoothly, like we can see in the case of our gallery. However, we are getting closer to solving our problem.

Let’s return to the example of the child at school. What if our student doesn’t want to eat celery? And he doesn’t want to be limited to the food that is served to him in the cafeteria? In that case, he will need to bring his own food with him from home! In that case, he will always have a lunchbox in his backpack with what he would prefer to eat. He can get it out at any time and have a bite to eat. How can we implement this in the code?

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

var schoolkid = collectContainer();
// The variable contains the eatDinner function,
// which the collectContainer function returned.

// We call the eatDinner function from the schoolkid variable.
schoolkid();
// Outputs: I ate pasta.

Don’t worry if you’re confused. In the next assignment, we will provide a detailed analysis of how this code works and why. In the meantime, let’s just make sure that this code actually executes as shown in the example.

Comments

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

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. After the collectContainer function is redefined, create a variable schoolkid.
  2. Indicate that the schoolkid variable is equal to the collectContainer function call.
  3. After that, output the schoolkid variable to the console.
  4. After that call the resulting function: schoolkid().

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.