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
      For...of Loop

      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.

      For...of Loop

      JavaScript for...of Loop

      The for...of loop in JavaScript is used to traverse elements of the iterable object. In each iteration, it gives an element of the iterable object. Iterable objects include arrays, strings, maps, sets, and generators.
      The JavaScript for...of loop is a much more efficient way to iterate over iterables than using a for...in loop. The for...of loop iterates over the property value while the for...in loop is used to iterate through the keys (property name) of an object.

      Syntax

      The syntax of 'for...of' loop in JavaScript in as follows −
      for (ele of iterable) {
          // loop body
      }

      Parameters

      • ele: It is a current element of the iterable.
      • of: It is a JavaScript operator.
      • iterable: It is iterable like an object, array, string, etc.

      Examples

      Example: For...of Loop with Arrays

      In the example below, the array contains various strings. After that, we used the for...of loop to traverse each array element. In the output, we can see that it prints each array element.
      <html>
      <head>
          <title> JavaScript - for...of loop </title>
      </head>
      <body>
          <p id="output"> </p>
          <script>
              const output = document.getElementById("output");
              const arr = ["JavaScript", "Python", "C", "C++", "HTML", "CSS"];
              for (let ele of arr) {
                  output.innerHTML += ele + "<br>";
              }
          </script>
      </body>
      </html>

      Output

      JavaScript
      Python
      C
      C++
      HTML
      CSS

      Example: For...of Loop with Strings

      In JavaScript, the string is also iterable as we can traverse through each character of the string. In the below code, for...of loop is used to traverse through each character of the string.
      <html>
      <head>
          <title> JavaScript - for...of loop </title>
      </head>
      <body>
          <p id="output"> </p>
          <script>
              const output = document.getElementById("output");
              let str = "JavaScript";
              for (let char of str) {
                  output.innerHTML += char + ", ";
              }
          </script>
      </body>
      </html>

      Output

      J, a, v, a, S, c, r, i, p, t,
      

      Example: For...of Loop with Set

      In JavaScript, the set contains a unique element. Here, we have passed the array containing numbers as a parameter of the Set() constructor to create a set. After that, we used the for...of loop to traverse the set.
      <html>
      <head>
         <title> JavaScript - for...of loop </title>
      </head>
      <body>
         <p id="output"> </p>
         <script>
            const output = document.getElementById("output");
            const nums = new Set([10, 20, 30, 30, 30, 40, 50, 60]);
            for (let num of nums) {
               output.innerHTML += num + ", ";
            }
         </script>
      </body>
      </html>

      Output

      10, 20, 30, 40, 50, 60,

      Example: For...of Loop with Map

      The map contains the key-value pair in JavaScript and is similar to the object. Here, we created a map and inserted 3 key-value pairs in the map. When we use the for...of loop to traverse the map elements in each iteration, we can get the key and value shown in the code below.
      <html>
      <body>
         <p id="output"> </p>
         <script>
            const output = document.getElementById("output");
            const map = new Map();
            map.set("one", 1);
            map.set("second", 2);
            map.set("third", 3)
            for (let [k, v] of map) {
               output.innerHTML += k + " -> " + v + "<br/>";
            }
         </script>
      </body>
      </html>

      Output

      one -> 1
      second -> 2
      third -> 3
      However, you can also use the for...in loop to traverse the iterable like an array, string, map, set, etc.