Why use the functional parameters of Vs. Global variables

Question

Yes, I know that this is probably a very stupid question, but it has been undermining me for some time.

Okay, that's why I’ve been studying JavaScript for some time now and understood perfectly.,. except for the functions "parameters" (I think they are called).

I was taught that they work like this:

function test(number) { document.write(number); }; test(1); test(12); 

That makes sense to me. However, recently I came across some that were a little different.

 var counterDays = document.getElementById('days'); var counterHours = document.getElementById('hours'); var counterMinutes = document.getElementById('minutes'); var counterSeconds = document.getElementById('seconds'); var date = new Date('December 28, 2016 00:00:00'); function updateTimer(date) { var time = date - new Date(); return { 'days': Math.floor(time / (1000 * 60 * 60 * 24)), 'hours': Math.floor((time/(1000 * 60 * 60)) % 24), 'minutes': Math.floor((time / 1000 / 60) % 60), 'seconds': Math.floor((time / 1000) % 60), 'total': time }; }; function startTimer(counterDays, counterHours, counterMinutes, counterSeconds, date) { var timerInterval = setInterval(function() { var timer = updateTimer(date); //Changes the text of the 'counter' counterDays.innerHTML = timer.days; counterHours.innerHTML = timer.hours; counterMinutes.innerHTML = timer.minutes; counterSeconds.innerHTML = timer.seconds; window.onload = function() { startTimer(counterDays, counterHours, counterMinutes, counterSeconds, date); }; 

  <span id="days">&nbsp;</span> <span id="hours">&nbsp;</span> <span id="minutes">&nbsp;</span> <span id="seconds">&nbsp;</span> 

I seriously don't understand why updateTimer always needs date in parentheses when the date variable is an existing variable in the global scope. Same thing with startTimer . I do not understand why I need to convey this. Why not just access the variable inside the function, since they have a global scope, and you need to do this. Instead, I need to pass the variable as a parameter for the function to work.

I tried and tried, but the only way to get this function to work is to pass variables. Why is this?

As I was still learning, I searched the Internet for more information about functions and their parameters, but everyone shows me something similar to my first example. I know that all this probably just turned on my head, but for life I just do not understand.

Note. I'm still involved, so sorry if this whole question is just plain stupid.

Also, the JS code I'm having a problem with doesn't actually start. This is because I don’t want to embed all my code, but rather from the code I'm having problems with.

Answer 1

Instead, I need to pass a variable as a parameter in order to work.

You do not need to define your functions with parameters. You can call them using higher region variables.

https://developer.mozilla.org/en-US/docs/Glossary/Scope

It:

 var x = 'baz'; function foo(x) { return x; } foo(x); 

will do the same thing:

 var x = 'baz'; function foo() { return x; } foo(); 

Recording functions that enter parameters as input help keep your code modular and side-effect, among many other benefits ...

1.) The second example will always throw an error if x is not available in a higher area

2.) If another function changed the value of x, this will affect the output of the second example and lead to unexpected and potentially difficult debugging of behavior in your application. While I can always be sure of the output of the first example

3.) The easiest way to read and maintain code written in the style of the first example

Answer 2

As i see your code

 var timer = updateTimer(date); 

Remember to remove the date parameter here, as well as in the called function. Now the date variable will work like a global one. So be it

 function updateTimer() { //date variable will be present here as global variable } var timer = updateTimer();