Javascript Generators: Understanding them
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I'm pretty sure my understanding of generators is inherently broken. All online resources seem to conflict and it makes for an incredibly difficult and confusing learning experience.
From what I understand, the yield
keyword enables a currently executing block of code to wait for a value instead of throwing remaining code to be executed inside a callback. So, as most tutorials have pointed out, you can use this:
(function *() {
// Wait until users have be got and put into value of `results`
var results = yield db.get("users");
// And continue
view.display(results);
})();
Instead of:
db.get("user", function(results) {
view.display(results);
});
Right, that's all well and good until I try to write my own generators. I've run into several hitches:
- The first example code I above will not run because there is nothing to iterate over the generator, correct? Some higher being has to call the
.next
somewhere, right? - The entire API will have to be rewritten right down to the I/O calls to support generators, correct?
- From what I gather,
yield
seems to stand for wait for the value most general use cases whereas in the implementation part (read: return value to/insidedb.get
)yield
seems to stand for send this value back to currently waiting block to resume execution.
Take for example:
function *fn() {
yield 1;
yield "a";
}
var gen = fn();
gen.next(); // 1
gen.next(); // "a";
yield
in that context is sending values back down instead of waiting for the results. In the first example above, it waits for the results from the db.get
and the resumes execution instead of "returning" or sending back a value. If the db.get
case is true, is this not inherently synchronous? I mean, isn't it exactly the same as:
(function() {
//Wait for the results
var results = fs.readFileSync("users.txt");
// Use results
view.display(results);
})();
Unfortunately, if it's any way clear from this question (probably the only thing clear) is that I don't understand generators. Hopefully, I might get some insight here.
javascript node.js generator yield
add a comment |
I'm pretty sure my understanding of generators is inherently broken. All online resources seem to conflict and it makes for an incredibly difficult and confusing learning experience.
From what I understand, the yield
keyword enables a currently executing block of code to wait for a value instead of throwing remaining code to be executed inside a callback. So, as most tutorials have pointed out, you can use this:
(function *() {
// Wait until users have be got and put into value of `results`
var results = yield db.get("users");
// And continue
view.display(results);
})();
Instead of:
db.get("user", function(results) {
view.display(results);
});
Right, that's all well and good until I try to write my own generators. I've run into several hitches:
- The first example code I above will not run because there is nothing to iterate over the generator, correct? Some higher being has to call the
.next
somewhere, right? - The entire API will have to be rewritten right down to the I/O calls to support generators, correct?
- From what I gather,
yield
seems to stand for wait for the value most general use cases whereas in the implementation part (read: return value to/insidedb.get
)yield
seems to stand for send this value back to currently waiting block to resume execution.
Take for example:
function *fn() {
yield 1;
yield "a";
}
var gen = fn();
gen.next(); // 1
gen.next(); // "a";
yield
in that context is sending values back down instead of waiting for the results. In the first example above, it waits for the results from the db.get
and the resumes execution instead of "returning" or sending back a value. If the db.get
case is true, is this not inherently synchronous? I mean, isn't it exactly the same as:
(function() {
//Wait for the results
var results = fs.readFileSync("users.txt");
// Use results
view.display(results);
})();
Unfortunately, if it's any way clear from this question (probably the only thing clear) is that I don't understand generators. Hopefully, I might get some insight here.
javascript node.js generator yield
2
Even though this answer is about Python, the discussion about generators and yield is still valid and may help with your understanding.
– Vincent Ramdhanie
Dec 25 '13 at 4:09
Also this guide may help (esp. the fibonacci example IMO)
– Passerby
Dec 25 '13 at 5:09
1
@VincentRamdhanie Excellent generator explanation! It teaches me another usage of generator!
– Herrington Darkholme
Dec 25 '13 at 9:07
Infinite scroll using ES6 generators
– ashish
Nov 26 '18 at 8:20
add a comment |
I'm pretty sure my understanding of generators is inherently broken. All online resources seem to conflict and it makes for an incredibly difficult and confusing learning experience.
From what I understand, the yield
keyword enables a currently executing block of code to wait for a value instead of throwing remaining code to be executed inside a callback. So, as most tutorials have pointed out, you can use this:
(function *() {
// Wait until users have be got and put into value of `results`
var results = yield db.get("users");
// And continue
view.display(results);
})();
Instead of:
db.get("user", function(results) {
view.display(results);
});
Right, that's all well and good until I try to write my own generators. I've run into several hitches:
- The first example code I above will not run because there is nothing to iterate over the generator, correct? Some higher being has to call the
.next
somewhere, right? - The entire API will have to be rewritten right down to the I/O calls to support generators, correct?
- From what I gather,
yield
seems to stand for wait for the value most general use cases whereas in the implementation part (read: return value to/insidedb.get
)yield
seems to stand for send this value back to currently waiting block to resume execution.
Take for example:
function *fn() {
yield 1;
yield "a";
}
var gen = fn();
gen.next(); // 1
gen.next(); // "a";
yield
in that context is sending values back down instead of waiting for the results. In the first example above, it waits for the results from the db.get
and the resumes execution instead of "returning" or sending back a value. If the db.get
case is true, is this not inherently synchronous? I mean, isn't it exactly the same as:
(function() {
//Wait for the results
var results = fs.readFileSync("users.txt");
// Use results
view.display(results);
})();
Unfortunately, if it's any way clear from this question (probably the only thing clear) is that I don't understand generators. Hopefully, I might get some insight here.
javascript node.js generator yield
I'm pretty sure my understanding of generators is inherently broken. All online resources seem to conflict and it makes for an incredibly difficult and confusing learning experience.
From what I understand, the yield
keyword enables a currently executing block of code to wait for a value instead of throwing remaining code to be executed inside a callback. So, as most tutorials have pointed out, you can use this:
(function *() {
// Wait until users have be got and put into value of `results`
var results = yield db.get("users");
// And continue
view.display(results);
})();
Instead of:
db.get("user", function(results) {
view.display(results);
});
Right, that's all well and good until I try to write my own generators. I've run into several hitches:
- The first example code I above will not run because there is nothing to iterate over the generator, correct? Some higher being has to call the
.next
somewhere, right? - The entire API will have to be rewritten right down to the I/O calls to support generators, correct?
- From what I gather,
yield
seems to stand for wait for the value most general use cases whereas in the implementation part (read: return value to/insidedb.get
)yield
seems to stand for send this value back to currently waiting block to resume execution.
Take for example:
function *fn() {
yield 1;
yield "a";
}
var gen = fn();
gen.next(); // 1
gen.next(); // "a";
yield
in that context is sending values back down instead of waiting for the results. In the first example above, it waits for the results from the db.get
and the resumes execution instead of "returning" or sending back a value. If the db.get
case is true, is this not inherently synchronous? I mean, isn't it exactly the same as:
(function() {
//Wait for the results
var results = fs.readFileSync("users.txt");
// Use results
view.display(results);
})();
Unfortunately, if it's any way clear from this question (probably the only thing clear) is that I don't understand generators. Hopefully, I might get some insight here.
javascript node.js generator yield
javascript node.js generator yield
asked Dec 25 '13 at 3:59
AdrianCooneyAdrianCooney
570412
570412
2
Even though this answer is about Python, the discussion about generators and yield is still valid and may help with your understanding.
– Vincent Ramdhanie
Dec 25 '13 at 4:09
Also this guide may help (esp. the fibonacci example IMO)
– Passerby
Dec 25 '13 at 5:09
1
@VincentRamdhanie Excellent generator explanation! It teaches me another usage of generator!
– Herrington Darkholme
Dec 25 '13 at 9:07
Infinite scroll using ES6 generators
– ashish
Nov 26 '18 at 8:20
add a comment |
2
Even though this answer is about Python, the discussion about generators and yield is still valid and may help with your understanding.
– Vincent Ramdhanie
Dec 25 '13 at 4:09
Also this guide may help (esp. the fibonacci example IMO)
– Passerby
Dec 25 '13 at 5:09
1
@VincentRamdhanie Excellent generator explanation! It teaches me another usage of generator!
– Herrington Darkholme
Dec 25 '13 at 9:07
Infinite scroll using ES6 generators
– ashish
Nov 26 '18 at 8:20
2
2
Even though this answer is about Python, the discussion about generators and yield is still valid and may help with your understanding.
– Vincent Ramdhanie
Dec 25 '13 at 4:09
Even though this answer is about Python, the discussion about generators and yield is still valid and may help with your understanding.
– Vincent Ramdhanie
Dec 25 '13 at 4:09
Also this guide may help (esp. the fibonacci example IMO)
– Passerby
Dec 25 '13 at 5:09
Also this guide may help (esp. the fibonacci example IMO)
– Passerby
Dec 25 '13 at 5:09
1
1
@VincentRamdhanie Excellent generator explanation! It teaches me another usage of generator!
– Herrington Darkholme
Dec 25 '13 at 9:07
@VincentRamdhanie Excellent generator explanation! It teaches me another usage of generator!
– Herrington Darkholme
Dec 25 '13 at 9:07
Infinite scroll using ES6 generators
– ashish
Nov 26 '18 at 8:20
Infinite scroll using ES6 generators
– ashish
Nov 26 '18 at 8:20
add a comment |
3 Answers
3
active
oldest
votes
TL;DR: the essence of generator is controlling the suspension of code execution.
For generator itself, you can refer to this.
To sum up, there is three components you should distinguish:
1. generator function
2. generator
3. generated result
Generator function is simply the function
with star in its head and (optional) yield
in its body.
function *generator() {
console.log('Start!');
var i = 0;
while (true) {
if (i < 3)
yield i++;
}
}
var gen = generator();
// nothing happens here!!
Generator function itself does not do anything but return a generator, in the case above, gen
.
No console output here because only after the returned generator's next
method is called the body of generator function will run.
Generator has several methods, of which the most important one is next
. next
runs the code and returns the generator result.
var ret = gen.next();
// Start!
console.log(ret);
// {value: 0, done: false}
ret
above is generator result. It has two property: value
, the value you yield in generator function, and done
, a flag indicating whether the generator function return.
console.log(gen.next());
// {value: 1, done: false}
console.log(gen.next());
// {value: 2, done: false}
console.log(gen.next());
// {value: undefined, done: true}
At this point, no one will expect you to understand generator, at least not the async power of generator.
To put it simple, generator has two features:
- one can choose to jump out of a function and let outer code to determine when to jump back into the function.
- the control of asynchronous call can be done outside of your code
In code, yield
jumps outside of function, and next(val)
jumps back to the function and pass value back into the function.
Outside code can handle asynchronous call and decide proper time to switch to your own code.
Look the sample again:
var gen = generator();
console.log('generated generator');
console.log(gen.next().value);
// mock long long processing
setTimeout(function() {
console.log(gen.next().value);
console.log('Execute after timer fire');
}, 1000);
console.log('Execute after timer set');
/* result:
generated generator
start
0
Execute after timer set
1
Execute after timer fire
*/
See? The generator function itself does not handle callback. The outside code does.
The base is here. You can elaborate this code to support full asynchronousity while keeping generator function like sync one.
For example, suppose geturl
is an asynchronous call that returns a promise
object. you can write var html = yield getUrl('www.stackoverflow.com');
This jumps outside your code. And outside code will do stuff like:
var ret = gen.next();
ret.then(function (fetchedHTML) {
// jumps back to your generator function
// and assign fetchHTML to html in your code
gen.next(fetchedHTML);
});
For more complete guide, refer to this.
And repository like co, galaxy, suspend and etc.
add a comment |
none of the async stuff if part of generators. generators simply pause and resume blocks of code. all the async magic happens when you use what i call a "generator engine" like https://github.com/visionmedia/co.
basically, what gen.next()
does is return the last yield
ed value and allow you to return a value if the yield
is being assigned to something, ex. var something = yield 1
. so if you have the block of code:
function* genfun() {
var a = yield 1
var b = yield 2
}
var gen = genfun()
gen.next() // returns the first yielded value via `{value: 1}`
gen.next(1) // sets `a` as 1, returns the next yielded value via `{value: 2}`
gen.next(2) // sets `b` as 2, the generator is done, so it returns `{done: true}`
gen.throw(err)
is the same as next, except the error is thrown instead of assigned to a variable.
this is how control flow engines work - you get the next value which is probably a callback or something. execute the callback and don't gen.next()
until the callback is finished.
add a comment |
The two examples are not the same. When you yield, the function now effectively becomes a callback, waiting to be executed when db.get("users") finishes. This way, the function does not block other function's execution. Think of it as a way to turn synchronous functions into asynchronous functions by letting the system know that you can pause at certain points.
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f20768922%2fjavascript-generators-understanding-them%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
TL;DR: the essence of generator is controlling the suspension of code execution.
For generator itself, you can refer to this.
To sum up, there is three components you should distinguish:
1. generator function
2. generator
3. generated result
Generator function is simply the function
with star in its head and (optional) yield
in its body.
function *generator() {
console.log('Start!');
var i = 0;
while (true) {
if (i < 3)
yield i++;
}
}
var gen = generator();
// nothing happens here!!
Generator function itself does not do anything but return a generator, in the case above, gen
.
No console output here because only after the returned generator's next
method is called the body of generator function will run.
Generator has several methods, of which the most important one is next
. next
runs the code and returns the generator result.
var ret = gen.next();
// Start!
console.log(ret);
// {value: 0, done: false}
ret
above is generator result. It has two property: value
, the value you yield in generator function, and done
, a flag indicating whether the generator function return.
console.log(gen.next());
// {value: 1, done: false}
console.log(gen.next());
// {value: 2, done: false}
console.log(gen.next());
// {value: undefined, done: true}
At this point, no one will expect you to understand generator, at least not the async power of generator.
To put it simple, generator has two features:
- one can choose to jump out of a function and let outer code to determine when to jump back into the function.
- the control of asynchronous call can be done outside of your code
In code, yield
jumps outside of function, and next(val)
jumps back to the function and pass value back into the function.
Outside code can handle asynchronous call and decide proper time to switch to your own code.
Look the sample again:
var gen = generator();
console.log('generated generator');
console.log(gen.next().value);
// mock long long processing
setTimeout(function() {
console.log(gen.next().value);
console.log('Execute after timer fire');
}, 1000);
console.log('Execute after timer set');
/* result:
generated generator
start
0
Execute after timer set
1
Execute after timer fire
*/
See? The generator function itself does not handle callback. The outside code does.
The base is here. You can elaborate this code to support full asynchronousity while keeping generator function like sync one.
For example, suppose geturl
is an asynchronous call that returns a promise
object. you can write var html = yield getUrl('www.stackoverflow.com');
This jumps outside your code. And outside code will do stuff like:
var ret = gen.next();
ret.then(function (fetchedHTML) {
// jumps back to your generator function
// and assign fetchHTML to html in your code
gen.next(fetchedHTML);
});
For more complete guide, refer to this.
And repository like co, galaxy, suspend and etc.
add a comment |
TL;DR: the essence of generator is controlling the suspension of code execution.
For generator itself, you can refer to this.
To sum up, there is three components you should distinguish:
1. generator function
2. generator
3. generated result
Generator function is simply the function
with star in its head and (optional) yield
in its body.
function *generator() {
console.log('Start!');
var i = 0;
while (true) {
if (i < 3)
yield i++;
}
}
var gen = generator();
// nothing happens here!!
Generator function itself does not do anything but return a generator, in the case above, gen
.
No console output here because only after the returned generator's next
method is called the body of generator function will run.
Generator has several methods, of which the most important one is next
. next
runs the code and returns the generator result.
var ret = gen.next();
// Start!
console.log(ret);
// {value: 0, done: false}
ret
above is generator result. It has two property: value
, the value you yield in generator function, and done
, a flag indicating whether the generator function return.
console.log(gen.next());
// {value: 1, done: false}
console.log(gen.next());
// {value: 2, done: false}
console.log(gen.next());
// {value: undefined, done: true}
At this point, no one will expect you to understand generator, at least not the async power of generator.
To put it simple, generator has two features:
- one can choose to jump out of a function and let outer code to determine when to jump back into the function.
- the control of asynchronous call can be done outside of your code
In code, yield
jumps outside of function, and next(val)
jumps back to the function and pass value back into the function.
Outside code can handle asynchronous call and decide proper time to switch to your own code.
Look the sample again:
var gen = generator();
console.log('generated generator');
console.log(gen.next().value);
// mock long long processing
setTimeout(function() {
console.log(gen.next().value);
console.log('Execute after timer fire');
}, 1000);
console.log('Execute after timer set');
/* result:
generated generator
start
0
Execute after timer set
1
Execute after timer fire
*/
See? The generator function itself does not handle callback. The outside code does.
The base is here. You can elaborate this code to support full asynchronousity while keeping generator function like sync one.
For example, suppose geturl
is an asynchronous call that returns a promise
object. you can write var html = yield getUrl('www.stackoverflow.com');
This jumps outside your code. And outside code will do stuff like:
var ret = gen.next();
ret.then(function (fetchedHTML) {
// jumps back to your generator function
// and assign fetchHTML to html in your code
gen.next(fetchedHTML);
});
For more complete guide, refer to this.
And repository like co, galaxy, suspend and etc.
add a comment |
TL;DR: the essence of generator is controlling the suspension of code execution.
For generator itself, you can refer to this.
To sum up, there is three components you should distinguish:
1. generator function
2. generator
3. generated result
Generator function is simply the function
with star in its head and (optional) yield
in its body.
function *generator() {
console.log('Start!');
var i = 0;
while (true) {
if (i < 3)
yield i++;
}
}
var gen = generator();
// nothing happens here!!
Generator function itself does not do anything but return a generator, in the case above, gen
.
No console output here because only after the returned generator's next
method is called the body of generator function will run.
Generator has several methods, of which the most important one is next
. next
runs the code and returns the generator result.
var ret = gen.next();
// Start!
console.log(ret);
// {value: 0, done: false}
ret
above is generator result. It has two property: value
, the value you yield in generator function, and done
, a flag indicating whether the generator function return.
console.log(gen.next());
// {value: 1, done: false}
console.log(gen.next());
// {value: 2, done: false}
console.log(gen.next());
// {value: undefined, done: true}
At this point, no one will expect you to understand generator, at least not the async power of generator.
To put it simple, generator has two features:
- one can choose to jump out of a function and let outer code to determine when to jump back into the function.
- the control of asynchronous call can be done outside of your code
In code, yield
jumps outside of function, and next(val)
jumps back to the function and pass value back into the function.
Outside code can handle asynchronous call and decide proper time to switch to your own code.
Look the sample again:
var gen = generator();
console.log('generated generator');
console.log(gen.next().value);
// mock long long processing
setTimeout(function() {
console.log(gen.next().value);
console.log('Execute after timer fire');
}, 1000);
console.log('Execute after timer set');
/* result:
generated generator
start
0
Execute after timer set
1
Execute after timer fire
*/
See? The generator function itself does not handle callback. The outside code does.
The base is here. You can elaborate this code to support full asynchronousity while keeping generator function like sync one.
For example, suppose geturl
is an asynchronous call that returns a promise
object. you can write var html = yield getUrl('www.stackoverflow.com');
This jumps outside your code. And outside code will do stuff like:
var ret = gen.next();
ret.then(function (fetchedHTML) {
// jumps back to your generator function
// and assign fetchHTML to html in your code
gen.next(fetchedHTML);
});
For more complete guide, refer to this.
And repository like co, galaxy, suspend and etc.
TL;DR: the essence of generator is controlling the suspension of code execution.
For generator itself, you can refer to this.
To sum up, there is three components you should distinguish:
1. generator function
2. generator
3. generated result
Generator function is simply the function
with star in its head and (optional) yield
in its body.
function *generator() {
console.log('Start!');
var i = 0;
while (true) {
if (i < 3)
yield i++;
}
}
var gen = generator();
// nothing happens here!!
Generator function itself does not do anything but return a generator, in the case above, gen
.
No console output here because only after the returned generator's next
method is called the body of generator function will run.
Generator has several methods, of which the most important one is next
. next
runs the code and returns the generator result.
var ret = gen.next();
// Start!
console.log(ret);
// {value: 0, done: false}
ret
above is generator result. It has two property: value
, the value you yield in generator function, and done
, a flag indicating whether the generator function return.
console.log(gen.next());
// {value: 1, done: false}
console.log(gen.next());
// {value: 2, done: false}
console.log(gen.next());
// {value: undefined, done: true}
At this point, no one will expect you to understand generator, at least not the async power of generator.
To put it simple, generator has two features:
- one can choose to jump out of a function and let outer code to determine when to jump back into the function.
- the control of asynchronous call can be done outside of your code
In code, yield
jumps outside of function, and next(val)
jumps back to the function and pass value back into the function.
Outside code can handle asynchronous call and decide proper time to switch to your own code.
Look the sample again:
var gen = generator();
console.log('generated generator');
console.log(gen.next().value);
// mock long long processing
setTimeout(function() {
console.log(gen.next().value);
console.log('Execute after timer fire');
}, 1000);
console.log('Execute after timer set');
/* result:
generated generator
start
0
Execute after timer set
1
Execute after timer fire
*/
See? The generator function itself does not handle callback. The outside code does.
The base is here. You can elaborate this code to support full asynchronousity while keeping generator function like sync one.
For example, suppose geturl
is an asynchronous call that returns a promise
object. you can write var html = yield getUrl('www.stackoverflow.com');
This jumps outside your code. And outside code will do stuff like:
var ret = gen.next();
ret.then(function (fetchedHTML) {
// jumps back to your generator function
// and assign fetchHTML to html in your code
gen.next(fetchedHTML);
});
For more complete guide, refer to this.
And repository like co, galaxy, suspend and etc.
edited Oct 4 '16 at 7:46
Chris
31k126385
31k126385
answered Dec 25 '13 at 8:42
Herrington DarkholmeHerrington Darkholme
4,8291836
4,8291836
add a comment |
add a comment |
none of the async stuff if part of generators. generators simply pause and resume blocks of code. all the async magic happens when you use what i call a "generator engine" like https://github.com/visionmedia/co.
basically, what gen.next()
does is return the last yield
ed value and allow you to return a value if the yield
is being assigned to something, ex. var something = yield 1
. so if you have the block of code:
function* genfun() {
var a = yield 1
var b = yield 2
}
var gen = genfun()
gen.next() // returns the first yielded value via `{value: 1}`
gen.next(1) // sets `a` as 1, returns the next yielded value via `{value: 2}`
gen.next(2) // sets `b` as 2, the generator is done, so it returns `{done: true}`
gen.throw(err)
is the same as next, except the error is thrown instead of assigned to a variable.
this is how control flow engines work - you get the next value which is probably a callback or something. execute the callback and don't gen.next()
until the callback is finished.
add a comment |
none of the async stuff if part of generators. generators simply pause and resume blocks of code. all the async magic happens when you use what i call a "generator engine" like https://github.com/visionmedia/co.
basically, what gen.next()
does is return the last yield
ed value and allow you to return a value if the yield
is being assigned to something, ex. var something = yield 1
. so if you have the block of code:
function* genfun() {
var a = yield 1
var b = yield 2
}
var gen = genfun()
gen.next() // returns the first yielded value via `{value: 1}`
gen.next(1) // sets `a` as 1, returns the next yielded value via `{value: 2}`
gen.next(2) // sets `b` as 2, the generator is done, so it returns `{done: true}`
gen.throw(err)
is the same as next, except the error is thrown instead of assigned to a variable.
this is how control flow engines work - you get the next value which is probably a callback or something. execute the callback and don't gen.next()
until the callback is finished.
add a comment |
none of the async stuff if part of generators. generators simply pause and resume blocks of code. all the async magic happens when you use what i call a "generator engine" like https://github.com/visionmedia/co.
basically, what gen.next()
does is return the last yield
ed value and allow you to return a value if the yield
is being assigned to something, ex. var something = yield 1
. so if you have the block of code:
function* genfun() {
var a = yield 1
var b = yield 2
}
var gen = genfun()
gen.next() // returns the first yielded value via `{value: 1}`
gen.next(1) // sets `a` as 1, returns the next yielded value via `{value: 2}`
gen.next(2) // sets `b` as 2, the generator is done, so it returns `{done: true}`
gen.throw(err)
is the same as next, except the error is thrown instead of assigned to a variable.
this is how control flow engines work - you get the next value which is probably a callback or something. execute the callback and don't gen.next()
until the callback is finished.
none of the async stuff if part of generators. generators simply pause and resume blocks of code. all the async magic happens when you use what i call a "generator engine" like https://github.com/visionmedia/co.
basically, what gen.next()
does is return the last yield
ed value and allow you to return a value if the yield
is being assigned to something, ex. var something = yield 1
. so if you have the block of code:
function* genfun() {
var a = yield 1
var b = yield 2
}
var gen = genfun()
gen.next() // returns the first yielded value via `{value: 1}`
gen.next(1) // sets `a` as 1, returns the next yielded value via `{value: 2}`
gen.next(2) // sets `b` as 2, the generator is done, so it returns `{done: true}`
gen.throw(err)
is the same as next, except the error is thrown instead of assigned to a variable.
this is how control flow engines work - you get the next value which is probably a callback or something. execute the callback and don't gen.next()
until the callback is finished.
answered Dec 25 '13 at 6:34
Jonathan OngJonathan Ong
11.7k1467105
11.7k1467105
add a comment |
add a comment |
The two examples are not the same. When you yield, the function now effectively becomes a callback, waiting to be executed when db.get("users") finishes. This way, the function does not block other function's execution. Think of it as a way to turn synchronous functions into asynchronous functions by letting the system know that you can pause at certain points.
add a comment |
The two examples are not the same. When you yield, the function now effectively becomes a callback, waiting to be executed when db.get("users") finishes. This way, the function does not block other function's execution. Think of it as a way to turn synchronous functions into asynchronous functions by letting the system know that you can pause at certain points.
add a comment |
The two examples are not the same. When you yield, the function now effectively becomes a callback, waiting to be executed when db.get("users") finishes. This way, the function does not block other function's execution. Think of it as a way to turn synchronous functions into asynchronous functions by letting the system know that you can pause at certain points.
The two examples are not the same. When you yield, the function now effectively becomes a callback, waiting to be executed when db.get("users") finishes. This way, the function does not block other function's execution. Think of it as a way to turn synchronous functions into asynchronous functions by letting the system know that you can pause at certain points.
answered Dec 25 '13 at 6:17
leorexleorex
1,92311015
1,92311015
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f20768922%2fjavascript-generators-understanding-them%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
Even though this answer is about Python, the discussion about generators and yield is still valid and may help with your understanding.
– Vincent Ramdhanie
Dec 25 '13 at 4:09
Also this guide may help (esp. the fibonacci example IMO)
– Passerby
Dec 25 '13 at 5:09
1
@VincentRamdhanie Excellent generator explanation! It teaches me another usage of generator!
– Herrington Darkholme
Dec 25 '13 at 9:07
Infinite scroll using ES6 generators
– ashish
Nov 26 '18 at 8:20