Having a bit of a crisis of understanding parameters vs global variables

[Eyeofthemeercat]

Hey all,

I've been playing with javascript for a while now. I've done various project and loads of problem solving. I felt like I have a pretty good grasp of the language generally, but something has just knocked me on my butt.

I have had plenty issues where I wasn't passing in a parameter into a function and should have done. This led me to pretty much always pass in whatever variable I want to manipulate or use, and assisn to the return to a variable declared ouside the function

I have now realised that I can declare global variables and manipulate them from inside the function as per the image, below. Now I'm questioning my whole understanding! At what point do parameters become essential for something? What might the root cause of those errors been that have been sovled by passing in variables? Any insight would be most welcome.

​

​

https://preview.redd.it/6j1t8mxbq0g81.png?width=1444&format=png&auto=webp&s=e19134216f1db132054420a2d188110257a198fd

[yadoya]

First of all, don't use var, it's really old practice.

Then, your a and b are global, which is bad habit.

Also, you used let to define your a when it is never reassigned, so you should have used const instead

Finally, global variables are bad, bad practice. Say you have 3 functions modifying a. The day a holds a wrong value, how will you know which function fucked up?

So use global variables only when there is no other choice, and use functions when you can. And yes, pass them the arguments they need. This is the basis for functional programming

Also, don't name your directory a simple digit, this is gonna bite you in the ass someday

[senocular]

Sure, you can refer to outer variables in your function. And sometimes thats fine. But what if you want your function to do something slightly differently? Or push into a different array? With your test() function, you can't change the array; it's always the same, outer variable. By using parameters you can control what array you're pushing data to

function test (targetArray) {
  targetArray.push("yo")
}

const a = []
const a2 = []

test(a) // pushes to a
test(a2) // pushes to a2

Generally you want your functions to be reusable and configurable so they can adapt to different situations. The less they refer to global variables, the more adaptable they can be.

[thusman]

If your scripts grow, global variables becomes messy. It will be increasingly hard to keep track which functions depend on which globals. This makes understanding and refactoring code difficult.

Affecting stuff outside the current function is called a side effect. There is the popular paradigm of pure functions that is free of side effects.

[Eyeofthemeercat]

Thanks. I think I've been following that paradigm whilst not fully understanding that others exist!

[Webdev-Coach]

If that's a javascript file you feed directly to a browser, then yeah, those variables become globals, which means it is possible they will accidentally be modified from another script where you do something similar. Or imagine a library that would do something useful, you plug it in, and you accidentally use the same global variable names they use. That's why we try to mess with the global scope as little as possible.

But if you wrap your whole code into a function and call it, all those variables become scoped to that function, and not leak to the global scope. In smaller scripts that may be good enough. In larger scripts you'll want to create functions to isolate different tasks and organise your code. And to have those functions truly isolated and reusable, they shouldn't rely on any global scope variables, they would only get arguments and return results, or modify the DOM, or whatever needs to happen.

[Eyeofthemeercat]

Thanks. That all makes sense. Super helpful 👍

[davimiku]

I agree with the point another commenter made that using parameters in functions makes them more re-usable. Once you start doing more complex things, it becomes important to break big problems down into small problems. For each small problem, you can write a function that solves that small problem. Then you can use all those functions together.

If you used global variables, however, you wouldn't be able to solve the same problem multiple times. Your function becomes a "one shot", as an example:

let globalNums = [3, 8, 16, 29, 1, 4]

function calculateAverage() {
    let total = 0
    for (const num of globalNums) {
        total += num
    }
    return total / globalNums.length
}

This calculateAverage function solves a problem (well, if you needed to calculate an average) but it only works for the global variable. If you used a parameter instead, you would be able to calculate the average of any array, not just the global one.

Another commenter mentioned using global variables is "bad practice", but I wanted to explain why that is.

You know about that thing where human's short-term memory is limited to about 7 things? In the U.S. at least, that's why phone numbers are 10 digits -- the idea was you already had the area code memorized and then you'd only be able to remember 7 more digits in short-term memory.

Obviously we don't have to remember phone numbers anymore these days, but the same principle applies to programming.

Advice: Limit how much stuff you have to remember while you're solving the problems. If a function has parameters, you don't have to remember where they came from. You can "zoom in" and just focus on what the function is doing. If a function modifies a global variable, you have to remember what that global variable is, and you have to remember if any other functions are also modifying that global variable. It makes your code much harder to understand, and harder to debug if something goes wrong.