I am having some confusion regarding this Closure thing. I have two separate codes below that look similar but their output are different.
function setup(x) {
var array = [];
for(var i=0;i<arguments.length;i++){
array[i]= arguments[i];
}
return array;
}
console.log(setup('a','b')); // will output ["a","b"]
--------------
function f() {
var i, array = [];
for(i = 0; i < 3; i++) {
array[i] = function(){
return i;
}
}
return array;
}
var a = f();
console.log(a()); //output: [function(),function(),function()]
console.log(a[0]()); //output: 3 //same output in a[1]() and a[2]() calls as well
Now my question is, how come the output is different? both of the codes above return an array. in the first code, it prints all elements in array correctly whereas in the second code, why doesn't it print [1,2,3]???
In your second example, you are creating 3 function in a loop, but all the functions are created in the same variable scope, so they all reference and return the value of the same i variable.
Therefore the value of i returned from the functions represents the value at the time when the functions are invoked. Because you're invoking them after the loop, the value of i is 3, so that's the value returned.
This is what is meant by closure. The functions "close over" the variables that existed in the variable scope where they were created. They do not close over the value of the variables, but rather then variables themselves, so they always get the current state of the variable.
For each function to reference a different value of i, each function would need to need to be created in a separate variable scope that has its own unique i.
Because the only way to create a new variable scope in JavaScript is to invoke a function, you'll need to create each function within a new function invocation.
function makeFunction(j) {
return function(){
return j;
};
}
function f() {
var i, array = [];
for(i = 0; i < 3; i++) {
array[i] = makeFunction(i);
}
return array;
}
So here I made a new function called makeFunction. It receives a single parameter, and returns a new function that references and returns that parameter.
Because each invocation of makeFunction creates a new and unique variable scope, each function returned will be referencing its own unique j variable, and will therefore return the value of j that existed when makeFunction was invoked (unless your function modifies j, which it could do if you wanted).
Note that I used the variable name j for clarity. You could use i as well, or some other name.
In JavaScript, you have function statements and function expressions. The first declare named functions, the latter evaluate to a named or anonymous function. You're using a function expression.
What I think you want to do is a call expression. All you have to do is to immediately call your function that returns i.
function f() {
var i, array = [];
for (i = 0; i < 3; i++) {
// The extra parentheses around the function are unnecessary here.
// But this is more idiomatic, as it shares syntax with how function
// expressions are introduced in statements.
// I.e. you could just copy-paste it anywhere.
array[i] = (function () {
return i;
})(); // don't rely on automatic semicolon insertion
}
return array;
}
Also note that, in your problematic example, all closures return 3 because all of them capture the same variable i.
EDIT: To make the previous paragraph more clear, if you really wanted to have 3 distinct closures, you'd have to create a new scope for each one. Unlike other languages, Javascript doesn't create scope just by opening a block. It only creates scope in functions. Here are two ways of doing this:
function f() {
var i, array = [];
for (i = 0; i < 3; i++) {
// With a parameter in an inner function
array[i] = (function (n) {
return function () {
// A new n is captured every time
return n;
};
})(i);
}
return array;
}
function f() {
var i, array = [];
for (i = 0; i < 3; i++) {
array[i] = (function () {
// With a variable in an inner function
var n = i;
return function () {
// A new n is captured every time
return n;
};
})();
}
return array;
}
The next example, however, is wrong, because even though n is declared in the for block, it will be as if it has been declared at the top of the function and only initialized in the for block. Remember, this is JavaScript, not Java, not C, not C#, not <whatever bracketed language>:
function f() {
var i, array = [];
for (i = 0; i < 3; i++) {
var n = i;
array[i] = function () {
return n;
};
}
return array;
}
Equivalent code:
function f() {
var i, array = [];
var n;
for (i = 0; i < 3; i++) {
n = i;
array[i] = function () {
return n;
};
}
return array;
}
Related
When trying to understand closures topic I created two exactly the same functions but with one difference - the variables declared in a different way (by var and by let/const).
When executing a function where variables created using VAR it givest a result of 3.
When executing a function where variables created using LET/CONST it givest a result of 0, 1 and 2.
Am I correct suggesting that the result differs because of different scopes of VAR and CONST/LET? I mean that VAR is function scoped and it gets acces to var i which is equals to 3 in the end of a loop, and CONST/LET are block scoped and every function pushed to the array has it's own lexical environment with i equals to 0, 1 and 2?
function a() {
var arr = [];
for (var i = 0; i < 3; i++) {
arr.push(function() {
console.log(i);
});
}
return arr;
}
const b = a();
b[0]();
b[1]();
b[2]();
function c() {
const arr = [];
for (let i = 0; i < 3; i++) {
arr.push(function() {
console.log(i);
});
}
return arr;
}
const d = c();
d[0]();
d[1]();
d[2]();
As I was studying closures and local variables,
I was curious to see the example below.
function myLoop() {
var result = [], i, n = 4;
for (i = 0; i < n; i++) {
result[i] = function () {
return i;
}
}
return result;
}
var l = myLoop();
var f = l[0];
console.log(f()); // undefined
I recently knew how variable allocate.
Point to a value, not a allocate.
if I declare variable,
I allocated 'string'.
and I again allocated another string
var str = 'hello';
str = 'world';
and
str -> hello,
str -> world
Because 'String' is immutable.
Result
In conclusion, I wonder what is the status in memory?
i of 'for loop' exist all value in memory?
i -> 0,
i -> 1,
i -> 2,
i -> 3
or
i = 1(..3,4) allocate?
In this case, you only have a single binding for i, one which is declared at the beginning of myLoop. Every array item in result has a function which points to that singular i. So, when myLoop returns, you've created an array of functions, all of which reference a single value, the i whose value is 4:
function myLoop() {
var result = [], i, n = 4;
for (i = 0; i < n; i++) {
result[i] = function () {
return i;
}
}
return result;
}
const arr = myLoop();
console.log(
arr[0](),
arr[1]()
);
This value will eventually be garbage collected (the variable name's link to the value it contains) once nothing can reference the arr or any of its functions anymore.
If you had used let in the for loop instead of var, you would have a separate binding for i on each iteration:
function myLoop() {
var result = [], n = 4;
for (let i = 0; i < n; i++) {
result[i] = function () {
return i;
}
}
return result;
}
const arr = myLoop();
console.log(
arr[0](),
arr[1]()
);
in which case, every iteration of the for loop would have its own i value, so there'd be 4 separate values for i in memory at the time myLoop returns. Just like above, those 4 values will continue to exist until nothing can reference them anymore, and they get garbage collected.
(Technically, there'd also be another temporary binding or two for i for the duration of the loop, created by the for loop due to the mechanics of let loop declarations, but it's near invisible to scripts and is more confusing than useful to think about in this situation)
I am working through 'Javascript: the definitive guide' by Flannagan. There is a section which explains how Javascript classes can be augmented by adding new methods. The example script shows how a new method 'Times' can be added to the number prototype ( this is how I interpret it).
I am struggling to know what the argument parameters are in the following script, particularly 'context'.
// Invoke the function f this many times, passing the iteration number
// For example, to print "hello" 3 times:
// var n = 3;
// n.times(function(n) { console.log("hello"); });
Number.prototype.times = function(f, context) {
var n = this.valueOf();
console.log(n);
for(var i = 0; i < n; i++) f.call(context, i);
};
var n = 3;
n.times(function(n) { console.log("hello"); });
I think the value of f becomes:
function(n) { console.log("hello"); })
I'm not sure what 'context' is?
Any help gratefully received...
times accepts a function; the context argument allows you to specify the value this refers to inside that function, if needed.
In your example, the callback passed to times doesn't use this at all, so it's not needed, but imagine if the callback depended on this referring to an object:
const obj = {
count: 3,
increment: function() {
this.count++;
console.log(this.count);
}
};
obj.increment();
obj.increment();
The obj.increment function depends on obj.count. For this to work in your times function, you'd need the this to refer to obj, so pass it as the second argument to times, so that obj is passed as the first parameter to .call:
Number.prototype.times = function(f, context) {
var n = this.valueOf();
console.log('repeating ' + n + ' times:');
for(var i = 0; i < n; i++) f.call(context, i);
};
const obj = {
count: 3,
increment: function() {
this.count++;
console.log(this.count);
}
};
(3).times(obj.increment, obj);
A custom this isn't necessary if you pass a different function to .times, one which invokes obj.increment itself:
Number.prototype.times = function(f, context) {
var n = this.valueOf();
console.log('repeating ' + n + ' times:');
for(var i = 0; i < n; i++) f.call(context, i);
};
const obj = {
count: 3,
increment: function() {
this.count++;
console.log(this.count);
}
};
(3).times(() => obj.increment());
I think the value of f becomes:
function(n) { console.log("hello"); })
Right!
I'm not sure what 'context' is?
"Context" is a word people sometimes use (incorrectly, IMHO) to refer to the this value for a function call.
In that call to times:
n.times(function(n) { console.log("hello"); });
...there's no argument for the context parameter being passed to times, so times will get undefined for the value of its context parameter. Then it uses that value in f.call(...). When you use undefined (or null) with Function.prototype.call, in loose mode the function is called with this set to the global object; in strict mode, the function sees this ase undefined or null instead.
So in that example, the callback will be called with either the global object as this, or undefined as this.
It's analogous to the thisArg parameter of Array.prototype.forEach and related.
context is the second value passed to times, and becomes the this special variable value inside the function, due to the f.call(context, i) call (the first value is the this value).
Number.prototype.times = function(f, context) {
var n = this.valueOf();
console.log(n);
for(var i = 0; i < n; i++) f.call(context, i);
};
var n = 3;
n.times(function(n) { console.log(this, n); }, "hello");
The reason that this appears to behave strangely is because this must be an object, so the string is converted into a String object (which is similar to an Array object, hence the appearance of an array).
This is more useful in situations where you're using a prototype function:
Number.prototype.times = function(f, context) {
var n = this.valueOf();
console.log(n);
for(var i = 0; i < n; i++) f.call(context, i);
};
var arr = [1, 2, 3, 4];
(3).times(Array.prototype.reverse, arr);
console.log(arr);
i want use some arrays as function parameters.
i write this code but doesn't work.
please help me
and i have no idea about number of array
function func2(x,y,z)
{
alert(x[1]);
alert(y[1]);
alert(z[1]);
}
function func1()
{
a = [1,2,3]
b = [3,4,5]
c = [5,6,7]
func2(a,b,c);
}
Your func2 function is calling itself. Also, using var is a good idea here to avoid accidentally creating global variables:
function func2()
{
var a = [1,2,3],
b = [3,4,5],
c = [5,6,7];
func1(a,b,c);
}
Update given your updated question, if you want to create a function that accepts a variable number of parameters, you'll need to access the arguments object:
function func2()
{
alert("There are " + arguments.length + " arguments");
}
The arguments object is can be accessed just like an array (although it is not actually an array). So to print the second element from each array (remember array indexes start at 0), you'd use something like this:
function func2()
{
for (var i = 0; i < arguments.length; i++)
alert(arguments[i][1]);
}
An alternate strategy would be to just accept an array of arrays (also called a multidimensional array, though technically multidimensional arrays aren't supported in JavaScript) like this:
function func2(a)
{
for (var i = 0; i < a.length; i++)
alert(a[i][1]);
}
function func1()
{
var a = [1,2,3],
b = [3,4,5],
c = [5,6,7];
func2([a,b,c]); // notice the […] around the parameters
}
function func1(x,y,z)
{
alert(x[1]);
alert(y[1]);
alert(z[1]);
}
function func2()
{
var a = [1,2,3];
var b = [3,4,5];
var c = [5,6,7];
func1(a,b,c);
}
If I read you minds well, you have to use arguments in order to iterate over a dynamic number of arguments. Assuming you pass only arrays to func2:
function func2() {
for (var i = 0; i < arguments.length; i++) {
alert(arguments[i][1]);
}
}
javascript:
for (i = 0; i < n; i++)
{
v = fn(obj);
}
function fn(o)
{
for(i = 0; i < o.length; i++)
{
...
}
}
The first index get modify from second FOR inside the function fn(o);
How is it possible? what's the scope of index?
It doesn't look like you're declaring i as a local variable, so what's happening is that i being treated as a global variable. You need to write the var keyword in order for a variable to become a local variable.
for (var i = 0; i < n; i++)
{
v = fn(obj);
}
function fn(o)
{
for(var i = 0; i < o.length; i++)
{
}
}
I don't see any var so it looks like you're not varing anything, but I'll add those in and answer the question
Is it possible to modify the i in one for loop from another in a different scope?
When using functions in JavaScript, all primitive arguments are passed ByVal and all object arguments are passed ByRef. This also happens when using =.
Therefore, if you want to modify i out-of-scope, you will need to always access it through an Object.
function foo() { // scope this away from fn
for (var c = {i: 0}; c.i < n; c.i++) { // i wrapped in object
v = fn(obj, c); // pass wrapping object into `fn`, too. Now see `fn`
// c.i is now the result of change in `fn`
}
}
function fn(o, c) {
for(var i = 0; i < o.length; i++) {
// ...
}
// make change to c.i
c.i = 0;
}
foo();