Can functions access variables defined in its own parent function?

Question

Mozilla's Developer Resource shows two contradicting explanation regarding the function scope.

Here indicates that even though a "variable is defined in the same scope as the function calls", the code will throw an error because "it is not defined inside the function definitions".

Example)

function myBigFunction() {
  var myValue;

  subFunction1();
}

function subFunction1() {
  console.log(myValue);
} //this will show a reference error

However, here indicates that a "function defined inside another function can also access all variables defined in its parent function and any other variable to which the parent function has access".

Example)

function getScore() {
  var num1 = 2,
      num2 = 3;

  function add() {
    return name + ' scored ' + (num1 + num2);
  }

  return add();
} //this is ok

Both are not contradictory but actually complementary. variable scopes goes like this function<-parent-function<---parents<---global. In first example the variable is in local scope so its not visible to other function. But in second example its inside a function which becomes its parent function. So it can access parent function's scope. — binariedMe
– binariedMe, Commented Feb 19, 2019 at 2:30
The variables are declared in the parent function for both examples though — Kevvv
– Kevvv, Commented Feb 19, 2019 at 2:41
In first example there is no parent function. parent function are those which encapsulate a function. In first example, two separate function are defined. — binariedMe
– binariedMe, Commented Feb 19, 2019 at 2:42
subFunction1(); is just called within the parent function and defined outside of parent function. Defined function signature is function subFunction1() {... — zer00ne
– zer00ne, Commented Feb 19, 2019 at 2:50
So is it fair to say that where the function's definition is declared matters? — Kevvv
– Kevvv, Commented Feb 19, 2019 at 2:50

Rajiv · Accepted Answer · 2019-02-19 03:47:15Z

2

In your first example

function myBigFunction() {
  var myValue;

  subFunction1();
}

function subFunction1() {
  console.log(myValue);
} //this will show a reference error

here myValue is included in a function myBigFunction() so it has a block scope.

Block scope means any code within that block (here function defines the block) can use that variable if function contain another function(function definition) and inner function using that variable then it will be passed in a closure to inner function. 2nd scenario exactly same what I explained here.

function getScore() {
  var num1 = 2,
      num2 = 3;

  function add() {
    return name + ' scored ' + (num1 + num2);
  }

  return add();
} //this is ok

In above example num1 and num2 are declared in function getScore(), and it has inner function add() since add function using num1 and num2 it will be passed as closure to add() function and there won't be any error while accessing those variables.

but in first example the variable is accessed out of scope and as the variable accessed outside of that function it won't be accessible and it will throw reference error.

I hope the explanation clear your understanding. to understand it thoroughly go through JavaScript scope and closure concept.

answered Feb 19, 2019 at 3:47

Rajiv

1,3051 gold badge15 silver badges30 bronze badges

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

1 Comment

Kevvv Over a year ago

Thanks for your answer. I think what you're trying to say is that the block scope only extends to the inner functions that have been defined WITHIN the parent function because technically the subFunction1() and add() are both "inner functions".

Zachary Bennett · Accepted Answer · 2019-02-19 02:31:44Z

1

The reason why the first example fails and the second 'works' has to do with scope and closure. You can think of a function's 'curly braces' as the enclosure around its scope - or sphere of influence.

The first example fails because myBigFunction()'s variable is not accessible to subFunction1()'s scope. myBigFunction() also doesn't wrap subFunction1() which would provide a closure. Check out closures here.

However, add() is declared within the scope of the getScore() function. getScore() 'wraps' add() - providing a closure so that add() has access to variables within getScore()'s scope.

answered Feb 19, 2019 at 2:31

Zachary Bennett

9729 silver badges15 bronze badges

4 Comments

Kevvv Over a year ago

Isn't the only difference between the two examples the calling of the function "add()"? They both show the inner function wrapped within the parent function.

Zachary Bennett Over a year ago

The first example doesn't show any 'wrapping'. The first example simple calls another function within it's scope. The difference is in the definition. Since subFunction1() wasn't defined within myBigFunction(), it doesn't have access.

Kevvv Over a year ago

When you say "wrapping", do you mean it as declaring the definition of a function within a parent function then?

Zachary Bennett Over a year ago

Yes. This creates a closure.

Jaime Argila · Accepted Answer · 2019-02-20 00:17:37Z

1

Use the this keyword to get parent variable i.e.

var bar = function () {
  this.foo = "example";//the only catch is you have to have the this key word when defining the term.
  var subfunction = function () {
    this.foo = "This an example!";
  }
}

(Hope this helps!)

edited Feb 20, 2019 at 0:17

answered Feb 19, 2019 at 23:47

Jaime Argila

4563 silver badges13 bronze badges

Collectives™ on Stack Overflow

Can functions access variables defined in its own parent function?

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related