Closures: Equivalent of PHP "use" keyword or C++ capture list in Javascript or a transpiler language

Question

in PHP we have the neat use keyword for allowing the usage of 'external' variables when using closures, like the following:

$tax = 10;
$totalPrice = function ($quantity, $price) use ($tax){  //mandatory 'use'
    return ($price * $quantity) * ($tax + 1.0);
};

If we omit the use ($tax) part, it will throw an error, which I like a lot.

Similarly in C++ 11, we do the same, specifying the external variables, called capture list, with brackets:

float tax = 10;
auto totalPrice = [tax](int quantity, float price){   //mandatory []
   return (price*quantity) * (tax + 1.0);
};

As in php, it will throw an error if the capture list is omitted.

In Javascript, we don't have an equivalent to this use keyword (or c++ []), we just do:

var tax = 10;
var totalPrice = function (quantity, price){  //no need for 'use' or similar
    return (price * quantity) * (tax + 1.0);  //tax is usable here :(
};

I don't like much that freedom, I strongly prefer to specify the variables that will be accessible by the closure function or get an error otherwise, for reasons outside the scope of this question.

So, I was wondering, is there a special keyword or operator for this in ES6, or in any language that transpiles to javascript? (CoffeeScript, TypeScript, etc) If so, in which language and what's the syntax?

Ideally I'd like to detect in transpilation time (or before), when a variable hasn't been explicitly 'authorized' to be used in a closure, pretty much like PHP/C++.

Thanks in advance

PS: Please don't ask me why I want this in js-like language, that debate is another topic.

EDIT: A linter that performs this check would also help

Answer 1

Unfortunately as you can immagine the keyword use doesn't exists in javascript but to achieve the result you are looking for there are several ways.

So this was your example in which totalPrice is a function and tax is global.

// Your example
var tax = 10;
var totalPrice = function (quantity, price) {
    return (price * quantity) * (tax + 1.0);
};
var price = totalPrice(1, 1);
console.log ("Price YE is : " + price);

So I think that probably the solution who simulate more the keyword use is to generate a function which initialise tax in a sub scope and return a function:

// Example 1 return function
function generatePriceCalculator(tax) {
    return function(quantity, price) {
        if ("undefined" === typeof tax) {
            throw "tax is undefined";
        }

        return (price * quantity) * (tax + 1.0);
    };
};

var priceCalculator = generatePriceCalculator(20);
var price1 = priceCalculator(1, 1);
console.log ("Price Example 1 is : " + price1);

As you can see generatePriceCalculator is setting the value for tax in the function that return.

Another option is to generate an external function to call inside the closure.

// Example 2 function return tax
function getTax() {
    return 30;
}
var totalPrice2 = function (quantity, price) {
    var tax = getTax();
    return (price * quantity) * (tax + 1.0);
};
var price2 = totalPrice2(1, 1);
console.log ("Price Example 2 is : " + price2);

You can see all of them here:

https://jsfiddle.net/jo9yzoke/1/

Answer 2

There is no such keyword in JavaScript.

In JavaScript variables are available to all child scopes, for example:

(function() {
  var outerVariable = true;
  (function() {
    console.log(typeof outerVariable); // boolean
    (function() {
      console.log(typeof outerVariable); // boolean
    }())
  }());
}());

However, you can't access variables which has been defined in a separate, not-parent scope, for example:

(function() {
  var someVariable = true;
}());
(function() {
  console.log(typeof someVariable); // undefined
}());

This is the reason why you should write JavaScript code in such a way that you always have access only to variables that you need. Consider following example:

(function() {
  var math = (function() {
    // inner variable
    var PI = 3.141592653589793;

    // inner function
    function multiply(...args) {
      return args.reduce((a, b)=> a * b);
    }

    // outer functions
    return {
      circleArea: function circleArea(r) {
        return multiply(r, r, PI);
      },
      circumference: function circumference(r) {
        return multiply(2, PI, r);
      }
    };
  }());

  console.log(math.circleArea(5)); // 78.53981633974483
  console.log(math.circumference(10)); // 62.83185307179586

  console.log(typeof PI); // "undefined"
  console.log(typeof multiply); // "undefined"
}());

Inside the IIFE which creates the math object, you can use PI variable and multiply function. The IIFE returns two function, which can access PI and multiply too, because they are still inside this IIFE. You can call math.circleArea() and math.circumference() from outside this IIFE, but you can access PI or multiply — they are undefined in this scope.

See also:

• How do JavaScript closures work?
• What is the purpose of wrapping whole Javascript files in anonymous functions like “(function(){ … })()”?

Answer 3

You could bind your external variables to the this keyword of your closure, using the .bind() function:

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Answer 4

Here's another alternative approach. If your goal in looking for an equivalent of use in javascript is to write cleaner code, you might want to take a look at window.variablename. Variables at the global scope in javascript are implicitly properties of the window object. So for example, you could write:

var window.tax = 10;
var totalPrice = function (quantity, price){  //no need for 'use' or similar
    return (price * quantity) * (window.tax + 1.0);  //tax is usable here :(
};

This makes it explicitly clear to someone reading the code, that tax referenced in the function is the tax that's part of the global scope (namely window.tax).

Answer 5

First of all: JS is not PHP nor C++ and wont ever be.

use() is not for JS. You have lots of possible examples to do what you need, it'a pretty flexible language. Except those in previous answers, I'd like to share one more example:

var tax = 'improper';

var priceFactory = function(tax) { 
    // private `tax` variable for this scope
    var tax = tax;

    // or a nightmare to check it
    // var tax = 'number' ==  typeof tax && tax || function() { throw "No tax given"; }();

    return function(quantity, price) {
        return (price * quantity) * (1 + tax / 100);
    }
};

var price = new priceFactory(10); // 10%

var totalPrice = price(1, 100)

Answer 6

I don't think JS will ever offer what you want. PHP has a strict scope. If I define a variable inside a function it's limited to that function. Likewise, something defined outside that function is not implicitly available inside the function. use, like global simply changes where and when you can use a variable inside a specific scope.

JS puts everything in the global scope by default. In fact, it's a form of bizarro world, in that you limit a variable's scope to within a function you either have to have it as an argument or explicitly limit the scope to that variable

function bob(x) {
    // x is implicitly local
    y = 1; //global
    var z = 2; //local
}

In other words, all variables in JS are use declared implicitly.