Teachnique
      CourseRoadmaps
      Login

      OverviewPlacementSyntaxHello WorldConsole.log()CommentsVariableslet StatementConstantsData TypesType ConversionsStrict ModeReserved Keywords

      OperatorsArithmetic OperatorsComparison OperatorsLogical OperatorsBitwise OperatorsAssignment OperatorsConditional Operatorstypeof OperatorNullish Coalescing OperatorDelete OperatorComma OperatorGrouping OperatorYield OperatorSpread OperatorExponentiation OperatorOperator Precedence

      If...ElseWhile LoopsFor LoopFor...in LoopFor...of LoopLoop ControlBreak StatementContinue StatementSwitch CaseUser Defined Iterators

      FunctionsFunction ExpressionsFunction ParametersDefault ParametersFunction() ConstructorFunction HoistingArrow FunctionsFunction InvocationFunction call() MethodFunction apply() MethodFunction bind() MethodClosuresVariable ScopeGlobal VariablesSmart Function Parameters

      NumberBooleanStringsArraysDateMathRegExpSymbolSetsWeakSetMapsWeakMapIterablesReflectTypedArrayTempate LiteralsTagged Templates

      Objects OverviewClassesObject PropertiesObject MethodsStatic MethodsDisplay ObjectsObject AccessorsObject ConstructorsNative PrototypesES5 Object MethodsEncapsulationInheritanceAbstractionPolymorphismDestructuring AssignmentObject DestructuringArray DestructuringNested DestructuringOptional ChainingGlobal ObjectMixinsProxies

      HistoryVersionsES5ES6ECMAScript 2016ECMAScript 2017ECMAScript 2018ECMAScript 2019ECMAScript 2020ECMAScript 2021ECMAScript 2022

      CookiesCookie AttributesDeleting Cookies

      Browser Object ModelWindow ObjectDocument ObjectScreen ObjectHistory ObjectNavigator ObjectLocation ObjectConsole Object

      Web APIHistory APIStorage APIForms APIWorker APIFetch APIGeolocation API

      EventsDOM Events

      Feedback

      Submit request if you have any questions.

      Course
      Yield Operator

      JavaScript Tutorial

      This JavaScript tutorial is crafted for beginners to introduce them to the basics and advanced concepts of JavaScript. By the end of this guide, you'll reach a proficiency level that sets the stage for further growth. Aimed at empowering you to progress towards becoming a world-class software developer, this tutorial paves the way for a successful career in web development and beyond.

      Yield Operator

      JavaScript Yield Operator

      The yield operator in JavaScript is used to pause and resume the generator function asynchronously. In JavaScript, generator functions are the special functions that you can pause or resume while executing. The generator functions are defined with the 'function*' syntax. The yield keyword can only be used within the generator function that contains it.
      The yield operator pauses the execution of generator function and returns its operand (expression) to the generator's caller.

      Syntax

      The syntax of the yield operator in JavaScript is as follows
      yield expression;

      Paramter

      • expression − The value to yield from the generator function via the iterator protocol. 'undefined' is yielded, if expression is omitted.

      Return value

      It returns the optional value passed to the generator's next() method to resume its execution.

      Yield Operator in Genrator Function

      To understand the yield operator, let's understand fist the working of the generator function.
      When a generator function is called, it returns a generator object. When the next() method this generator object is called it resumes the execution of the generator function. When a yield expression is encountered, it pauses the execution and returns the expression after yield keyword to the object's caller (the next() method).
      The next() method of the generator object returns an iterator object with two properties – value and done. The value is the actual value of the expression and the done is a boolean value. The done property is true if the execution of the generator function is completely executed, else it if false.
      Below is a complete example code of generator function with yield keyword (operator).
      function* test() {
       // function code
       yield expression;
      }
      const genObj = test();
      genObj.next();
      In the above syntax, 'function*' is used to create a generator function named test, and the yield keyword is used to return 'expression' from the function.
      The generator function test is called and assigned the returned generator object to the variable genObj. The next() method resumes the execution of the function and returns iterator object when encounters yield expression.
      Let's execute the below JavaScript code snippet
      function* test() {
          console.log("I'm before yield expression");
          yield 20;
      }
      const genObj = test();
      console.log(genObj.next());
      Notice when we call next() method, it display the message in the console first and then display the iterator object.
      I'm before yield expression
      { value: 20, done: false }

      Example: Returning a value

      In the example below, we have defined the test() generator function. We used the yield operator 3 times in the function to return a number, an array, and a string, respectively.
      After that, we used the next() method four times to resume the execution of the function. Whenever the control flow finds the yield operator, it will stop execution and return the value.
      In the output, you can observe that it returns the object containing the operand of the yield operator and boolean value.
      function* test() {
          yield 20;
          yield [1,2,3];
          yield "Hello World";
      }
      let res = test();
      console.log(res.next());
      console.log(res.next());
      console.log(res.next());
      console.log(res.next());

      Output

      { value: 20, done: false }
      { value: [ 1, 2, 3 ], done: false }
      { value: 'Hello World', done: false }
      { value: undefined, done: true }

      Example: Returning undefined

      When we omit the expression following the yield keyword, it will return undefined.
      function* test() {
          yield;
      }
      
      let res = test();
      console.log(res.next());
      console.log(res.next());

      Output

      { value: undefined, done: false }
      { value: undefined, done: true }

      Example: Passing a value to the next() method

      We can also pass a value to the next() method. In the below example, we have passed 30 to the second next() method. It evaluates yield to 30. The variable result is assigned the value of yield which is evaluated as 30.
      function* test() {
          let result = yield 20;
          console.log("default value paased to next() method " + result);
      }
      
      let res = test();
      console.log(res.next());
      console.log(res.next(30));

      Output

      { value: 20, done: false }
      default value paased to next() method 30
      { value: undefined, done: true }

      Example

      In the below code, we used the loop, and in each operation, we stop the execution of the function using the yield operator. Afterward, we use the next() method to start the execution of the generator function.
      // Generator function
      function* test() {
          for (let p = 0; p < 6; p += 2) {
              yield p;
          }
      }
      let res = test();
      console.log(res.next());
      console.log(res.next());
      console.log(res.next());
      console.log(res.next());

      Output

      { value: 0, done: false }
      { value: 2, done: false }
      { value: 4, done: false }
      { value: undefined, done: true }
      In real-time development, programmers use the 'yield' operator for asynchronous operations, lazy evaluations, task scheduling, iterating through large datasets, creating custom iterators, etc.