The ability to retrieve variables within a certain scope from a function that is declared externally

Question

The ability to retrieve variables within a certain scope from a function that is declared externally

Is there a method to access and print the value of a closure variable, temp, from a function defined outside the closure but referenced within it without passing temp as an argument to the function?

var funcA, funcB;

funcA = function () {
   console.log(temp);
}

funcB = function () {var temp, funcC;
  temp = 1;
  funcC = funcA;
  funcC();
}
funcB();  // temp is undefined.

This solution works only when funcA is defined inside funcB:

funcB = function () {var temp, funcA, funcC;
  temp = 1;
  funcA = function () {
       console.log(temp);
  }
  funcC = funcA;
  funcC();
}
funcB(); // 1

I am attempting to simplify some complicated code by moving certain function definitions out of outer functions. Is there a way to define funcA externally to funcB but still reference the temp variable without needing to pass parameters?

Although Javascript is said to have lexical scoping rather than dynamic runtime scoping, can referencing a function (such as funcA via funcC) in funcB provide access to scoped variables while meeting the requirements of lexical scope?

javascript

Answer 1

Answer №1

After reading Akinkunle Allen's insightful comment, I was able to devise a solution to my issue.

function customFunc () {
  var innerFuncA, innerFuncB, temporary;

  innerFuncA = function () {
     console.log(temporary);
  }

  innerFuncB = function () {var innerFuncC;
    temporary = 1;
    innerFuncC = innerFuncA;
    innerFuncC(); 
  }
  return innerFuncB();
}

customFunc(); // Output: 1

Answer 2

After reading Akinkunle Allen's insightful comment, I was able to devise a solution to my issue.

function customFunc () {
  var innerFuncA, innerFuncB, temporary;

  innerFuncA = function () {
     console.log(temporary);
  }

  innerFuncB = function () {var innerFuncC;
    temporary = 1;
    innerFuncC = innerFuncA;
    innerFuncC(); 
  }
  return innerFuncB();
}

customFunc(); // Output: 1

Answer 3

Answer №2

A mixture of both positive and negative.

The use of the keyword var to declare variables can vary depending on the current scope. When var is utilized in the global scope, it becomes optional as the variable transforms into a property of the global object, which is usually represented by window in browsers.

Hence, the following code snippets yield the same outcome when executed within the global context:

var temp = 1;
window.temp = 1;
this.temp = 1;

All three statements above essentially refer to window.temp due to the global setting.

If var is used inside a function, the variable is bound to that specific function's scope. Since functions are objects in Javascript, local var variables will persist as long as the parent function remains in use elsewhere.

Javascript traverses through executing scopes to locate a variable identifier, enabling inner functions to access their outer function's variables (as demonstrated in your example).

You have the opportunity to manipulate the this reference within functions.

In Javascript, the identifier this is dynamic and can be altered. This allows passing a variable to an external function declared outside the calling function. By using this.temp to reference the variable, function funcA effectively displays its value.

funcB = function(otherFunc)
{
    this.temp = 1;
    otherFunc();
}

funcA = function()
{
    alert(this.temp);
}

funcB(funcA);

Check out the jsfiddle example linked below for further illustration.

Modifying this dynamically presents various advantages, particularly in enabling a function to accept closure references executed with a custom this reference.

For instance, consider a click event handler where this denotes the DOM element triggering the event.

Answer 4

A mixture of both positive and negative.

The use of the keyword var to declare variables can vary depending on the current scope. When var is utilized in the global scope, it becomes optional as the variable transforms into a property of the global object, which is usually represented by window in browsers.

Hence, the following code snippets yield the same outcome when executed within the global context:

var temp = 1;
window.temp = 1;
this.temp = 1;

All three statements above essentially refer to window.temp due to the global setting.

If var is used inside a function, the variable is bound to that specific function's scope. Since functions are objects in Javascript, local var variables will persist as long as the parent function remains in use elsewhere.

Javascript traverses through executing scopes to locate a variable identifier, enabling inner functions to access their outer function's variables (as demonstrated in your example).

You have the opportunity to manipulate the this reference within functions.

In Javascript, the identifier this is dynamic and can be altered. This allows passing a variable to an external function declared outside the calling function. By using this.temp to reference the variable, function funcA effectively displays its value.

funcB = function(otherFunc)
{
    this.temp = 1;
    otherFunc();
}

funcA = function()
{
    alert(this.temp);
}

funcB(funcA);

Check out the jsfiddle example linked below for further illustration.

Modifying this dynamically presents various advantages, particularly in enabling a function to accept closure references executed with a custom this reference.

For instance, consider a click event handler where this denotes the DOM element triggering the event.

The ability to retrieve variables within a certain scope from a function that is declared externally

Answer №1

Answer №2

Similar questions

Tips for transferring information between routes in Node.js using Express.js

Can one sever the connection using the bittorrent protocol?

Error: Angular 6 resolve consistently returns undefined

When the button is clicked, send data using 'POST' method to the php file and fetch

Consecutive POST requests in Angular 4

Remove background image when input form field is in focus

Conceal the legend in Highcharts using Python script with Django

Enhance user experience by implementing an autocomplete feature for a text input field

Rotate the mat-select arrow when the dropdown opens (moving in both upward and downward directions)

Implementing Asynchronous Rendering in React Router 4

Using an HTML element to pass a variable into a replace function

remain on the multi drop down page for a specified duration

Unable to send headers to the client in expressjs as they have already been set

Ways to eliminate existing information when conducting a search

Utilizing on() in conjunction with a map function

Dealing with name conflicts in Typescript when using multiple interface inheritance

Is it possible to communicate with a native chat application such as Pidgin using Node.js?

Is it possible for you to pinpoint the mistake in the code below?

What is the best way to prevent event bubbling in this particular code snippet?

Dynamic options can now be accessed and modified using newly computed getters and setters