Updated February 21, 2023
Definition of JavaScript Yield Keyword
In Javascript, the yield keyword is used to pause the execution of the generator function, and the expression value that follows the yield keyword gets returned to the generator’s caller. This can be considered as a return keyword’s generator-based version. Therefore, this keyword can be called only straight from the generator function. However, this can’t be directly called from callbacks or nested functions. The following sections will discuss the syntax, working, and several other details on yield keywords.
Syntax:
Below is the syntax of the yield keyword.
[var_name] = yield [expression]Parameters:
- Expression: Optional parameter; Value that has to be returned from the generator function through the iterator protocol.
- var_name: Optional parameter; Optional value gets retrieved, which is passed to the next() generator method for resuming the execution.
- Yield causes the call to the next() method of the generator to return an object of IteratorResult with two properties such as value and done. The value property denotes the result of yield expression evaluation and indicates whether the generator function has been fully completed or not. Done is false means it is not fully completed.
How does Yield Keyword Work in JavaScript?
To understand how the yield keyword works, let us look into an example with the steps that must be performed.
- First, create an object for the generator function.
const it = func(0);Here, it is the object, and func is the generator function.
- Define the generator function with the code that has to be performed.
function* func(indx) {
// code that has to be performed. . .
}- Print the result based on the generator function using the console.log() method as shown below.
console.log(it.next().value);Notes: If yield expression is paused, the generator function’s execution remains paused until the generator’s next() method is called. When the next() method of the generator is called, the function resumes execution and runs till any one of the conditions is reached:
- Throwhelps in throwing an exception from the generator function. Execution gets halted due to this.
- When the generator function reaches the end, the generator function execution ends and returns an IteratorResult to the caller.
Examples of JavaScript Yield
Let us see some sample programs on the yield keyword.
Example #1
JavaScript program has a generator function that checks whether the index value is four and prints the corresponding results.
Code:
function* func(indx) {
while (indx <4) {
yield indx;
indx++;
}
}
const it = func(0);
console.log(it.next().value);
console.log(it.next().value);
console.log(it.next().value);
console.log(it.next().value);
console.log(it.next().value);Output:
In this program, an object is created for the generator function func. Then, the function is called and checks whether the first value is less than 4. As the first value is 0, which is passed to the function, 0 is returned first. Then the index value is incremented, and the result is printed according to the number of console.log() functions. An extra console.log() function, undefined, also gets printed. To avoid that, one console.log() function can be removed, as shown below.
function* func(indx) {
while (indx <4) {
yield indx;
indx++;
}
}
const it = func(0);
console.log(it.next().value);
console.log(it.next().value);
console.log(it.next().value);
console.log(it.next().value);On executing the code, output changes as shown below. It can be seen that the undefined that is shown in the above result does not present here.
Example #2
JavaScript program has a generator function that prints the elements in the list by checking the length of the list.
Code:
function* count () {
let samplelist = [5, 9, 10]
for (let i = 0; i < samplelist.length; i++) {
yield samplelist[i]
}
}
let colg = count() // call generator fuction
console.log(colg.next())
console.log(colg.next())
console.log(colg.next())
console.log(colg.next())Output:
An object could be created for the generator function count in this program. Then, the function is called, creating a list of three numbers. Then the length of the list is checked, and each element in the list gets printed. As there is an extra console.log() function, undefined also gets printed. To avoid that, one console.log() function can be removed. As mentioned in the above sections, yield causes the call to the next() method of the generator to return an object of IteratorResult with two properties such as value and done. Here, the values are the numbers, false as execution is not completed.
Example #3
JavaScript program that has two generator functions that print the elements.
Code:
function* func2() {
yield8;
yield7;
yield4;
}
function* func1() {
yield6;
yield* func2();
yield10;
}
const it = func1(0);
console.log(it.next().value);
console.log(it.next().value);
console.log(it.next().value);
console.log(it.next().value);
console.log(it.next().value);Output:
In this program, an object is created for the generator function func1. Here, there are two functions, func1 and func2. First, the function func1 is called, and as the first element is 6, it gets printed first. Then, inside the func1, func2 gets called, and the next elements printed will be from func2. Finally, on completing all the elements from func2, the rest of the elements in func1 gets printed s shown in the sample output.
Example #4
The JavaScript program has a generator function that prints the elements from the list and arguments.
Code:
function* func1() {
yield* [78, 22];
yield* '56';
yield* Array.from(arguments);
}
const it = func1(12, 34);
console.log(it.next().value);
console.log(it.next().value);
console.log(it.next().value);
console.log(it.next().value);
console.log(it.next().value);
console.log(it.next().value);Output:
In this program, an object is created for the generator function func. Then, the function is called, and elements in the list get printed. Next, the value 56 is split into 5 and 6. As you can see, the next elements are taken from the arguments. Here the arguments that are passed are 12 and 34. Hence, all these elements are printed in this order.
Conclusion
The yield keyword helps pause the generator function’s execution, and the expression value that follows the yield keyword gets returned to the generator’s caller. This article explains the syntax, working, and several other aspects of yield keywords in detail.
Recommended Articles
This is a guide to JavaScript Yield. Here we also discuss the definition and how the yield keyword works in javascript? Along with different examples and their code implementation. You may also have a look at the following articles to learn more –
