I would like to know if defining a function within a function is a good practice in JavaScript.
Here is an example:
module.exports = function() {
function foo() {
// do something
}
...
foo()
...
}
To me, this looks very strange. But I see this often when reading open source projects.
Is it better to define foo outside of the scope of module.exports in the above example? Why and why not?
In Javascript a function can be defined at the global scope or in any function scope. As a general good design practice, you want to limit the scope of a function to only that scope that needs to call it. That means that often you define locally used functions within other functions.
In addition, function declarations declared within another function scope can also access all the other variables within that scope which can be extremely useful.
This serves a number of general benefits:
It keeps the function private to only the scope that needs to use it (it cannot be called from outside the scope in which it is defined unless a reference is explicitly passed to some other function or variable outside the scope).
It keeps you from polluting a top level scope with zillions of named functions, some of which might even have conflicting names in a very large project. In node modules, this is not so much the case because a node module is already a limited scope.
It allows a function to have access to the other variables within that scope.
That was the "general" discussion. Now, within a node module, the code in the module is already within a private scope so it is not as important to declare a function within the exports function as you've done, but I generally follow a practice of declaring a function only in the scope in which it will be used.
In addition, many functions can be declared inline and anonymously and don't even need a name.
In your specific example:
module.exports = function() {
var cntr = 0;
function foo() {
// do something
}
...
foo()
...
}
It really depends upon what you're using foo for. If you are never using it in any other scope, then I would favor declaring it within that scope as you've done.
If you need or want to access other variables within that scope such as the cntr variable I've shown, then it must be declared within the scope.
Related
I am experimenting with closures but rather than enclosing a function within a function, I enclosed a function within a block. Since functions are not blocked-scoped and will be hoisted outside of the block I assumed that it wouldn't have access to the scope within the block. Yet, in this case, the function returns the block-scoped variable. Does this mean that the function is a closure?
{
let a = 'hi'
function test() {
return a
}
}
test() // hi
I'd be happy to call it a closure, at least according to Wikpedia's definition:
Operationally, a closure is a record storing a function together with an environment. The environment is a mapping associating each free variable of the function (variables that are used locally, but defined in an enclosing scope) with the value or reference to which the name was bound when the closure was created. Unlike a plain function, a closure allows the function to access those captured variables through the closure's copies of their values or references, even when the function is invoked outside their scope.
In your function test, the variable a is a free variable, used by the function but not defined inside the function. When you called the function outside the block, it retained the value of a. So, you've met the essential points of the definition of closure (according to Wikipedia).
Of course, you asked the question because it's kind of tricky. Normally with closures, we define a function inside an environment and then "export" it out by binding the function object to a name that has a wider scope. Because of the way JavaScript treats function declarations defined in a block (see Code Maniac's link to the ECMAScript specification on handling block-scoped function declarations) you do get this effect! So it's kind of a closure, even though you never explicitly exported the function.
Of course if you had written
{
let a = 'hi'
let test = () => a
}
test()
you get an error.
But this works:
let b;
{
let a = 'hi'
let test = () => a
b = test
}
b() // "hi"
so yes, the block is acting as the non-local environment from which variables can be captured. I'm thinking yes, it's okay to speak of this as being a closure, because it acts like one (even if this behavior comes from a pre-ECMAScript 2015, "optional", and non-strict treatment of function declarations inside of blocks). If it walks like a duck, and all that.
var main = {
doSomething: function(){
function firstOne(){}
function secondOne(){
$.ajax({
success: function(){
firstOne(); /* here I want the previous function */
}
});
}
}
}
How can I run the firstOne() function from the marked line? It's a noobish question perhaps, but I don't get the JS namespace (and I tried).
Is that kind of defining functions good from a JS good practices point of view?
What you do works. This passage of MDN explains why:
You can nest a function within a function. The nested (inner) function is private to its containing (outer) function. It also forms a closure.
...
Since a nested function is a closure, this means that a nested function can "inherit" the arguments and variables of its containing function. In other words, the inner function contains the scope of the outer function.
To summarize:
The inner function can be accessed only from statements in the outer function.
The inner function forms a closure: the inner function can use the arguments and variables of the outer function, while the outer function cannot use the arguments and variables of the inner function.
So this explains why you can call firstOne from within the Ajax callback.
Whether this is good design or not depends completely on what you are trying to achieve. If firstOne is something that you could reuse in several parts of your code, then it would certainly be a bad decision to define it as a nested function, where it can only be accessed in a local context. But if you had for example two Ajax calls within secondOne that both needed the same functionality in their callback, then it would be a good decision to wrap this in a local nested function. If you just need the behaviour once then it might be overkill (and extra typing) to declare it as a separate function.
Your code looks OK, and should run fine.
Unlike many other programming languages, Javascript has a scope lookup chain. If a function or variable is not found in the local scope, Javascript will look for it in the scope above that. If it's not found there either, it'll look for it further up in the chain, till it hits the head object (which in a browser would be the window object). If it's not found there, then it throws an error.
Since your firstOne() function is declared in the scope immediately above your AJAX object, Javascript should have no problem finding it for you. There's no need to manually reference the parent scope.
Whats the main purpose of Closures in JS. Is it just used for public and private variables? or is there something else that I missed. I am trying to understand closure and really want to know what are the main advantages of using it.
Closures have to do with how javascript is scoped. To say it another way, because of the scoping choices (i.e. lexical scoping) the javascript designers made, closures are possible.
The advantage of closures in javascript is that it allows you to bind a variable to an execution context.
var closedIn = {};
var f = function(){
closedIn.blah = 'blah'; // closedIn was just "closed in" because I used in the function, but it was defined outside the function.
}
in that example, you have a normal object literal called closedIn. It is accessed in a function. Because of that, javascript knows it has to bring closedIn everywhere it brings the function f, so it is available to f.
The this keyword is tricky. this is always a reference to the execution scope. You can capture the this of one context to use in another context as follows:
var that = this;
var f = function(){
that.somethingOnThat();
// `this` means the scope f, `that` means whatever 'this' was when defined outside of the function
}
This trick can be very useful somethings, if you are coding object oriented javascript and want a callback to have access to some external scope.
To quote from a Javascript book:
"Functions in JavaScript are lexically
rather than dynamically scoped. This
means that they run in the scope in
which they are defined, not the scopee
from which they are executed. When a
function is defined, the current scope
chain is saved and becomes part of the
internal state of the function."
So the clear advantage is that you can bring any object (functions, objects, etc) along with the scope chain as far as is necessary. This is can also be considered a risk, because your apps can easily consume lots of memory if you are not careful.
I think the best phrase to sum up the purpose of closures would be:
Data Encapsulation
With a function closure you can store data in a separate scope, and share it only where necessary.
If you wanted to emulate private static variables, you could define a class inside a function, and define the private static vars within the closure:
(function () {
var foo;
foo = 0;
function MyClass() {
foo += 1;
}
MyClass.prototype = {
howMany: function () {
return foo;
}
};
window.MyClass = MyClass;
}());
Closures are necessary in javascript due to the fact that most API's that require callback functions (for instance, an "onclick" function) do not provide other mechanisms to send parameters to those callback functions (or to explicitly set the "this" pointer). Instead, you need to use closures to allow the callback to access variables in the "parent" function.
I personally wish that they weren't necessary, since they can be hard to understand, make for hard to read code (it's not always clear what exactly is in scope), and make for weird bugs. Instead I wish there was a standard for callbacks that allowed you to send parameters, etc. But I accept that I am in the minority in this view.
As we know, the variables that are defined in functions, have local scope. We can't access them from outside of the function.
Problem 1:
local variables are created when the function is called and they will be destroyed when the function's task is finished. It means local variables have shorter life time than global variables. We may use global variables to overcome that issue.
Global variables are available when the program starts and are destroyed when it ends. They are also available throughout the program.
Problem 2:
Since global variables are accessible throughout the program, they are prone to change from everywhere.
What do we want?
We want to have data persistency + data encapsulation.
We can achieve them by using Closures. By using a closure we can have private variables that are available even after a function's task is finished.
Example:
function initCounter() {
let counter = 0;
return function () {
return ++counter;
}
}
// Each counter is persistent
const countJumps = initCounter();
countJumps();
countJumps();
alert("Jumps count is: " + countJumps());
const countClicks = initCounter();
countClicks();
countClicks();
countClicks();
countClicks();
alert("Clicks count is: " + countClicks());
// Each counter is isolated
alert(counter); // Error: counter is not defined
I've got an object in JS in which I'm trying to test out the Reactive Framework In an event subscription I'd like to call an instance method of the enclosing class where the subscription is defined, like this;
function MyClass()
{
var DoSomething = function(a,b) { ... }
var InstanceVariable = 1;
this.uiEvent = uiDiv.jqueryUiWidget("widget")
.toObservable("change")
.Subscribe(
function (event)
{
// Want to call the instance method in the enclosing class
DoSomething(1,2);
});
this.uiEvent2 = uiDiv.jqueryUiWidget("widget")
.toObservable("change")
.Subscribe(
function (event)
{
// Want to use the instance variable within here
alert(InstanceVariable);
});
}
How can I do this (since the "this" scope is that of the subscription)? Do I have to pass the function/variable through when setting up the subscription in some way?
If I attempt to do this, I get an error in all browsers saying that the instance variables or methods don't exist: "this" within the scope of the function where I want to call the instance members refers to the Observer and so has functions of OnNext, OnCompleted etc.
Many Thanks,
Paul
Seems to me like your code should work. If you are having any problems I suggest you describe them. However, if you are asking how it works, then you should know about closures. From Wikipedia:
In computer science, a closure is a first-class function with free variables that are bound in the lexical environment. Such a function is said to be "closed over" its free variables. A closure is defined within the scope of its free variables, and the extent of those variables is at least as long as the lifetime of the closure itself. The explicit use of closures is associated with functional programming and with languages such as ML and Lisp. Closures are used to implement continuation passing style, and in this manner, hide state. Constructs such as objects and control structures can thus be implemented with closures.
This means that DoSomething and InstanceVariable are accessible from any method that is defined within the scope where they are defined. There will be a new "instance" of these variables each time the MyClass constructor is called.
A local function in the closure declares a variable with the same name which exists in the closure. So, how could we access closure's variable from the local function?
function closure()
{
var xVar;
function func1()
{
var xVar;
// how to distinguish local and closure scopes.
return xVar;
}
return function () { return func1(); };
}
Creating a private object and making private variables as properties of this object could help. But I am wondering if there is a better and neat solution. Can a scope chain help?
I have edited to make it a complete closure. Anyway, closures are not much concern here, it could be considered for inner functions however, there may be a solution with closures somehow.
Thanks
You can't access the scope chain explicitly in JS. Your problem is the age-old one of variable shadowing, but it's that much more maddening because in JS, the scope chain is actually there at runtime, it's just not available for you to access.
You can play some tricks with rejiggering current scope if you use the hated with operator, but that (as well as arguments's caller/callee stuff) really just give you access to objects and functions with their properties. There's no way to say "give me what xVar means in the n-1 runtime scope from right here".
Variables defined in an inner scope hide variable declarations in an outer scope. The "better and neat solution" is not to reuse variable names that way.
In your example the xVar variable is not a closure, because you redefined its scope to each function. To use that variable as a closure continue to declare it with the var command in the closure() function and then do not declare it with the var function in the func1() function. Instead just use the variable immediately in func1().
There is not an easy way to test if a function is a closure or a local variable. You would have to perform some sort of flow control test and then analyze assignments, where assignments occur, and where assignments do not occur. Then you must compare those results. You could write a tool, in JavaScript, to perform that analysis upon a given input and write you a report as output.