Why Use Function Parameters Vs. Global Variables?

Question

Yes, I know that this is probably a very stupid question, but this has been bugging me for a while.

Ok, so I have been learning JavaScript for a while now and have understood everything perfectly. . .except for function "parameters" (I believe they are called).

I was taught that they work like so:

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

test(1);
test(12);

This makes perfect sense to me. However, recently, I've come 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>

What I seriously do not understand is why the updateTimer always needs date within the parentheses, when the variable date is an already existing variable within the global scope. Same with startTimer. I don't understand why I need to pass that in. Why not just access the variable within the function, as they do have a global scope, and be done with it. Instead I need to pass in the variable as a parameter, for the function to work.

I've tried and tried, but the only way to make the function work is by passing in the variables. Why is that???

As I am still learning, I've searched the internet for more information on functions and their parameters, but all show me something similar to my first example. I know this is all probably just going over my head, but for the life of me, I just do not understand.

Note: I am still learning, so sorry if this whole question is plain stupid.

Also, the the code for the JS that I am having a problem with won't actually run. This is due to me not wanting to put in all of my code, but rather just the code I am having trouble with.

"Why not just access the variable within the function, as they do have a global scope, and be done with it.". Imagine your program grows in size 10x or 100x larger. It will become unmanageable. — Evan Trimboli
– Evan Trimboli, Commented Dec 24, 2016 at 3:12
I am sorry, but I don't understand why removing the parameters would make my program grow in size. . . — BZCC
– BZCC, Commented Dec 24, 2016 at 3:23
You don't need to pass them as parameters. But it makes the program more manageable. Look up the words "encapsulation" and "abstraction." You don't want to try to hold the entire structure of a system in your head at once; maybe you can do it, but anyone else who works on your code can't (and when they change something, it will destroy your mental model). — Kittsil
– Kittsil, Commented Dec 24, 2016 at 3:33
@BZCC It is a good question, and one that most new programmers will ask in some form. For posterity (to make future askers able to find it better), you could give it a more explicit title. Like, "Why use function parameters instead of global variables?" — Kittsil
– Kittsil, Commented Dec 24, 2016 at 19:24

Maxwelll · Accepted Answer · 2016-12-24 03:59:51Z

9

Instead I need to pass in the variable as a parameter, for the function to work.

You dont need to define your functions with parameters. You can invoke them leveraging higher scope variables

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

This:

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

will do the same thing as:

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

Writing functions that take parameters as input helps keep your code modular and side effect free among many other benefits...

1.) The second example will always throw an error if x is not accessible at a higher scope

2.) If another function mutated the value of x it would affect the output of the second example and would lead to unexpected and potentially hard to debug behavior in your application. Whereas I can always be sure of the output of the first example

3.) It is much easier to read through and maintain code that is written in the style of the first example

edited Dec 24, 2016 at 3:59

answered Dec 24, 2016 at 3:23

Maxwelll

2,2121 gold badge19 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kittsil Over a year ago

Good answer. It would be really great if you went into more detail about why it's a good idea to be modular.

BZCC Over a year ago

Thank you so much! Now I know!

Hameed Syed · Accepted Answer · 2016-12-24 03:21:25Z

2

As I see see your code

var timer = updateTimer(date);

Kindly remove date parameter here as well as in the called function. Now the date variable will work as in global scope. So it will be

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

edited Dec 24, 2016 at 3:21

answered Dec 24, 2016 at 3:14

Hameed Syed

4,3532 gold badges23 silver badges35 bronze badges

3 Comments

BZCC Over a year ago

Sorry, but you aren't really answering my question.

Hameed Syed Over a year ago

Simple, don't pass the argument date in the calling function and don't receive the parameter in the called function. Hence forth date that you have declared will be treated as global scope. Got it?

BZCC Over a year ago

Ok, I understand and I am sorry if I sound plain stupid, but I was wanting to know more of what was the purpose of those parameters rather than how to remove them. Unfortunately, there has already been another answer which has answered this question, Thanks for trying to help anyways :)

Collectives™ on Stack Overflow

Why Use Function Parameters Vs. Global Variables?

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related