If the yield expression is being paused then it will pause the generator function too and it will only restart when the next method is being called until another return expression. The syntax of yield expression/keyword is as follows:
Where name represents the name of the function, arguments are the parameters being passed for the function and statements represent the body of the function.
Following are the features of yield* expression/keywords:
- Memory efficient
- Lazy evaluation
- Control flows asynchronously
Now we are going to illustrate an example through which you can easily understand how to use yield* keyword/expression in JavaScript.
while (x > 0) {
yield x--;
}
}
//instance is created for function showNum
const generator_val = showNum(4);
//return 4 as 4 is passed to the function showNum yield expression
console.log(generator_val.next().value);
// return 3
console.log(generator_val.next().value);
//return 2
console.log(generator_val.next().value);
//return 1
console.log(generator_val.next().value);
Output
On the other hand, the yield* is a keyword/expression that can be used to represent an iterative object or other generator function. The yield* iterates and returns value correspondingly until the Boolean value is true. The syntax of yield* expression/keyword is as follows:
Now we are going to present an example of yield* expression/keyword.
<head>
<title>JavaScript yield* keyword/expression</title>
</head>
<body>
<script>
function* first_func() {
yield 10;
}
function* second_func() {
yield* first_func();
}
const generator_iterator = second_func();
console.log(generator_iterator.next().value);
</script>
</body>
</html>
Output
Example
In this example, generatorfunc1() function returns yielded values through next() function similar to those values that are yielded through generatorfunc2() function. Subsequently, through this generatorfunc2() function, we can easily insert more generators as much as we can.
<head>
<title>JavaScript yield* representing other generator </title>
</head>
<body>
<script>
function* generatorfunc1() {
yield 22;
yield 33;
yield 44;
}
function* generatorfunc2() {
yield 11;
yield* generatorfunc1();
yield 55;
}
const iterative_value = generatorfunc2();
// it return value 11 whereas done i.e. boolean value is false
console.log(iterative_value.next());
// it return value 22 whereas done i.e. boolean value is false
console.log(iterative_value.next());
// it return value 33 whereas done i.e. boolean value is false
console.log(iterative_value.next());
// it return value 44 whereas done i.e. boolean value is false
console.log(iterative_value.next());
// it return value 55 whereas done i.e. boolean value is false
console.log(iterative_value.next());
// it return undefined value whereas done i.e. boolean value is true
console.log(iterative_value.next());
</script>
</body>
</html>
Output
Conclusion
After reading this article, you are familiar with the yield* keyword/expression. If you are using the yield* expression then you cannot face the callback issues. The concept behind yield* expression is that function can voluntarily resume or stop till it acquires what it needs. We also enlisted examples that help you to understand the better usage of yield* expression/keyword in JavaScript.
from https://ift.tt/3nUFCBm
0 Comments