Function scope

MDN
#1

Hi, in the Functions — reusable blocks of code section of the MDN js course, they mention how by using parameters, you can eliminate the problem of “myValue” variable not being defined in the other subfunctions of the big function.

function myBigFunction() {
var myValue = 1;

subFunction1(myValue);
subFunction2(myValue);
subFunction3(myValue);
}

function subFunction1(value) {
console.log(value);
}

function subFunction2(value) {
console.log(value);
}

function subFunction3(value) {
console.log(value);
}

For some reason i cant wrap my head around how this works. Why is the parameter set to “myValue” in the big function yet in each individual sub function its only set to “value”. I would very much appreciate an explanation on scope and parameters in general. Thank you!

#2

So the way scope works is that variables declared with var exist in the scope of the function they are defined inside.

(this is a bit different for values defined using other keywords like let or const; don’t worry about those for now)

So myValue in this block exists only inside myBigFunction(); it doesn’t exist inside any of the other functions unless we pass it into those functions as an argument/parameter, in which case it does exist inside them.

Sorry for the myValue/value confusion - basically, when you define a function, the name you give the parameter can be anything; it is just the variable name that the value has inside the function block. So I could replace value in the above code with dog, cat or chicken and it would still work, as long as I refer to it using the same name inside the function.

On the other hand, when I am calling the function, I am specifying the value I am giving to that parameter, not the name of the parameter. So when we call subFunction1(myValue), we are giving the function’s value parameter a value of myValue (which contains the number 1).

The functions in this simple example require you to pass them a value that they can log to the console, which could be just about anything. All these would work:

  • subFunction1(200)
  • subFunction1('I am a string')
  • subFunction1(true)
  • subFunction1([1,2,3])

Does this help, or do you need more explanation? This is all useful to me when trying to work out how to make the course better, so thanks!

1 Like
#3

right so when you define a function, its parameter is just a placeholder name for the actual value you want to pass it when you declare / call it. Okay that makes so much more sense now, thank you!!

#4

Cool, glad that helped. Do you think I need to update the article text at all?

#5

I would probably suggest making it clear that the parameter being passed when a function is called is different to when it is being defined.
Also in the article about return values i believe it isnt explicitly mentioned anywhere that when you return a value in a function, the function ends and no code after it is run.
Thanks for the course btw, keep it up!