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
      Iterables

      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.

      Iterables Object

      In JavaScript, iterables are objects that can be iterated through using the for...of loop. They can also be iterated over using other methods like forEach(), map(), etc.
      Basically, you can traverse through each element of the iterable in JavaScript.
      Here are some examples of the common iterables.
      • Array
      • String
      • Map
      • Set
      • Arguments
      • NodeList
      • TypedArrays
      • Generators

      Iterate using the for...of loop

      In this section, we will iterate through the array elements, string characters, set elements, and key-value pairs of the map using the for...of loop.

      Example: Iterate over an array

      In the below code, we have defined an array and used the for...of loop to iterate through the array.
      The code prints each element of the array in the output.
      <html>
      <body>
         <div>Iterating the array: </div>
         <div id = "demo"></div>
         <script>
            const output = document.getElementById("demo");
            const array = ["Hello", "Hi", 10, 20, 30];
            // Iterating array
            for (let ele of array) {
               output.innerHTML += ele + ", ";
            }
         </script>
      </body>
      </html>

      Output

      Iterating the array:
      Hello, Hi, 10, 20, 30,

      Example: Iterate over a string

      In the below code, we used the for...of loop to iterate through each string character.
      The code prints the comma seprated string characters in the output.
      <html>
      <body>    
         <div id = "demo">Iterating a string: </div>
         <script>
            const output = document.getElementById("demo");
            let str = "Hello";
            // Iterating a string
            for (let char of str) {
               output.innerHTML += char + ", ";
            }
         </script>
      </body>
      </html>

      Output

      Iterating a string: H, e, l, l, o,

      Example: Iterate over a set

      In this example, we have created a set containing multiple elements. After that, we traverse through each element of the set and print in the output.
      <html>
      <body>
         <p id = "demo">Iterating the Set:  </p>
         <script>
      	   const output = document.getElementById("demo");
            const set = new Set([10, 20, 30, 40, 40, 50, 50]);
            // Iterating a Set
            for (let ele of set) {
               output.innerHTML += ele + ", ";
            }
         </script>
      </body>
      </html>

      Output

      Iterating the Set: 10, 20, 30, 40, 50,

      Example: Iterate over a map

      In the example below, we have defined the map containing 3 key-value pairs. In each iteration of the for...of loop, we get a single key-value pair from the map.
      <html>
      <body>
         <div id = "demo">Iterating the Map: <br></div>
         <script>
            const output = document.getElementById("demo");
            const map = new Map([
               ["1", "one"],
               ["2", "two"],
               ["3", "three"],
            ]);
              
            // Iterating array
            for (let ele of map) {
               output.innerHTML += ele + "<br>";
            }
         </script>
      </body>
      </html>

      Output

      Iterating the Map:
      1,one
      2,two
      3,three

      Iterate using the forEach() method

      In this section, we have used the forEach() method to iterate through the iterable.

      Example

      In the example below, we used the forEach() method with an array to iterate the array and print each element of the array in the output.
      <html>
      <body>
      	<div> Using the forEach() method: </div>
         <div id="demo"></div>
         <script>
      	   const output = document.getElementById("demo");
            const array = [true, false, 50, 40, "Hi"];
            // Iterating array
            array.forEach((ele) => {
               output.innerHTML += ele + ", ";
            })
          </script>
      </body>
      </html>

      Output

      Using the forEach() method:
      true, false, 50, 40, Hi,

      Iterate using the map() method

      In this section, we have used the map() method to iterate through the iterable.

      Example

      In the example below, the map() method is used with the array. In the callback function of the map() method, we print the array elements.
      <html>
      <body>
         <p id = "demo">Using the map() method: </p>
         <script>
      	   const output = document.getElementById("demo");
            const array = [true, false, 50, 40, "Hi"];
            // Iterating array
            array.map((ele) => {
               output.innerHTML += ele + ", ";
            })
         </script>
      </body>
      </html>

      Output

      Using the map() method: true, false, 50, 40, Hi,
      However, you can traverse the array, string, etc., using the loops like a for loop, while loop, etc. JavaScript also allows us to define custom iterators to traverse the iterable.