This question already has answers here:
Official information on `arguments` in ES6 Arrow functions?
(2 answers)
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 5 years ago.
I have the following code
function coroutine(g) {
var it = g();
return () => it.next.apply(it, arguments);
// also tried () => { return it.next.apply(it, arguments);
}
var run = coroutine(function* () {
var x = 1 + (yield);
var y = 1 + (yield);
yield (x + y);
});
And the following testing has been executed.
run()
{value: undefined, done: false}
run(10)
{value: undefined, done: false}
run(30).value
"1function* () { var x = 1 + (yield); var y = 1 + (yield); yield (x + y);}1function* () { var x = 1 + (yield); var y = 1 + (yield); yield (x + y);}"
However, shouldn't the last run(30).value returns the value of 42?
However, it works after I change the arrow function to old anonymous function?
function coroutine(g) {
var it = g();
return function() { return it.next.apply(it, arguments) };
}
Related
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 3 years ago.
I want to get two values out from the function for a specific condition (on "As_cm" values) and execute some operation on those values. I could not do that.
function steelSection() {
if (As_cm <= 29.2) {
return [D = 152.4, B = 152.2];
} else if (As_cm <= 38.3) {
return {D = 157.6, B = 152.9];
} else {
return [D = 1000, B = 2000];
}
}
var d = D / 2;
var b = B / 2;
console.log(d);
document.getElementById("flangeWidth").innerHTML = d ;
console.log(b);
document.getElementById("depth").innerHTML = b ;
expected values for As_cm <= 29.2
d= 152.4 / 2
b= 152.2 / 2
The error message I get is
Uncaught TypeError: Cannot set property 'innerHTML' of null
at steelcolumn.js:68
You could return an object and then take the destructured properties as values.
function steelSection() {
if (As_cm <= 29.2) return { d: 152.4, b: 152.2 };
if (As_cm <= 38.3) return { d: 157.6, b: 152.9 };
return { d: 1000, b: 2000 };
}
var { d, b } = steelSection();
document.getElementById("flangeWidth").innerHTML = d / 2;
document.getElementById("depth").innerHTML = b / 2;
This question already has answers here:
How do JavaScript closures work?
(86 answers)
Closed 5 years ago.
Can anyone explain how this code works?
function makeAdder(x) {
return function(y) {
return x + y;
};
}
var add5 = makeAdder(5);
var add10 = makeAdder(10);
console.log(add5(2)); // 7
console.log(add10(2)); // 12
Reference: https://mozilla.org/en/docs/Web/JavaScript/Closures
When you call your makeAdder(5), it returns the reference to a new function.
function(y) {
return x + y;
};
So add5 keeps the reference. After it when you call add5(2), you pass the 2 to the function. In it when it wants to return x + y, it starts to find the variables. Starting from x, it looks and see's that the x is not defined in it and goes to the scope in which inner function was defined ` here
function makeAdder(x) {
return function(y) {
return x + y;
};
}
It see's than x was defined here, because you call and pass x during var add5 = makeAdder(5);. After it goes to find y and finds in it's scope. And after all returns x + y.
The idea is this, every function has a reference to it's creater (where it was defined) and when it doesn't find a variable, it goes to find in it's greater and so till to global scope.
function makeAdder(x) {
return function(y) {
return x + y;
};
}
When you do var add5 = makeAdder(5); the add5 becomes a function which was returnd my makeAdder,
the add5 will be following
function(y){
return 5 + y;
}
so when you do add5(2) it will do 5 + 2 and will return 7;
makeAdder(5)
x => 5 and y is not having value so x+y => 5+0 => 5
var add5 = makeAdder(5);
add5(2);
we have created variable for the function makeadder with x => 5
so now we pass y => 2 and x => 5 so x+y => 5+2 => 7
This property of outer function variable accessible in inner function is called closure property in javascript. Also adding to that y variable is not accessible to outer function.
This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 5 years ago.
So, if we take this function for example:
function executeCallback (callback) {
callback();
}
Now, it doesn't matter if I place a fat arrow or a normal function, both will work, like these:
executeCallback(function () {
alert('This is a function');
})
executeCallback(() => {
alert('This is a fat arrow function');
})
So, except for shorter syntax. What exactly is the difference between both and how does it effect object oriented programming?
For more in depth info, see this answer on SO. Also, See this here.
A Few Reasons
More intuitive handling of current object context.
ES6 Arrow
this.nums.forEach((v) => {
if (v % 5 === 0)
this.fives.push(v) //this actually points to the context of the callback
});
Ecmascript 5
// variant 1
var self = this;
this.nums.forEach(function (v) {
if (v % 5 === 0)
self.fives.push(v);
});
// variant 2
this.nums.forEach(function (v) {
if (v % 5 === 0)
this.fives.push(v);
}, this);
// variant 3 (since ECMAScript 5.1 only)
this.nums.forEach(function (v) {
if (v % 5 === 0)
this.fives.push(v);
}.bind(this));
More expressive closure syntax.
ES6 Arrow
odds = evens.map(v => v + 1)
pairs = evens.map(v => ({ even: v, odd: v + 1 }))
nums = evens.map((v, i) => v + i)
Ecmascript 5
odds = evens.map(function (v) { return v + 1; });
pairs = evens.map(function (v) { return { even: v, odd: v + 1 }; });
nums = evens.map(function (v, i) { return v + i; });
the arrow function automatically bind the current context to the this so you won't need to do myfunction.bind(this, args)
This question already has answers here:
Self-references in object literals / initializers
(30 answers)
Closed 7 years ago.
var ok = {
makeScreens: function () {
this.screens = {
x: 2,
y: this.x * 10;
};
}
}
I want to initialize the this.screens variable, but I can't refer to x when I'm initializing y . Can someone tell me, how to refer to the this.screens.x?
Thank you very much.
You can't. You'll have to do it in two steps:
var ok = {
makeScreens: function () {
this.screens = {
x: 2
};
this.screens.y = this.screens.x * 10;
}
}
Another thing you could do is use a constructor:
var ok = {
makeScreens: function() {
this.screens = new (function(){
this.x = 2;
this.y = this.x * 10;
})();
}
}
This question already has answers here:
How do JavaScript closures work?
(86 answers)
Closed 9 years ago.
In the following example, how is y given the value of 1? I added some logging to see values and don't understand how/where y is assigned...
(function() {
function foo(x) {
var callNum = 0;
var baz = 3;
return function (y) {
callNum++;
console.log("callNum: " + callNum);
console.log("y: " + y);
console.log("baz: " + baz);
console.log("x: " + x);
console.log(x + y + (++baz));
}
}
var moo = foo(2); // moo is now a closure.
moo(1);
moo(1);
})();
Here's the fiddle output log:
callNum: 1
y: 1
baz: 3
x: 2
7
callNum: 2
y: 1
baz: 4
x: 2
8
foo() returns a function. This returned function accepts a single argument, the y you are concerned with.
So when you do this:
// returns a function that accepts `y` with `x` shared via closure
var moo = foo(2);
// execute the inner function, passing in a value for `y`.
moo(1);
foo(2) returns a function. x is now 2. moo is now a function that accepts a value for y, and you pass in 1. So y is now 1.
To think of it another way, you can invoke your inner function by doing:
foo(x)(y);
Or with the values you are using:
foo(2)(1);
So, in answer to your question, y gets set to 1 when you do:
moo(1);
In your code:
(function() {
function foo(x) {
var callNum = 0;
var baz = 3;
These are the parameters that matter (x, callNum and baz). They form closures involving the following function:
return function (y) {
This function has a closure to each of the outer local variables (including moo and foo).
callNum++;
console.log("callNum: " + callNum);
console.log("y: " + y);
console.log("baz: " + baz);
console.log("x: " + x);
console.log(x + y + (++baz));
}
}
There are also closures involving moo and both the above functions, however it's not used so is irrelevant to the outcome.
var moo = foo(2); // moo is now a closure.
The rest is answered by Alex.