Logo

dev-resources.site

for different kinds of informations.

Iteration Stament i.e for-of loop

Published at
8/23/2024
Categories
webdev
javascript
es6
coding
Author
mahf001
Categories
4 categories in total
webdev
open
javascript
open
es6
open
coding
open
Author
7 person written this
mahf001
open
Iteration Stament i.e for-of loop

for-of:

  • Introduced in ES6
  • Usually a loop has counter, check-condition, updating counter. A for-of loop doesn't have anything like that.
  • continue-break both can be used with it.
  • Meant to give us current element.
fruits = ['banana','apple','peach','orange','mango','guava','water-melon'];

for(const item of fruits){
  console.log(item);
}

'banana'
'apple'
'peach'
'orange'
'mango'
'guava'
'water-melon'
Enter fullscreen mode Exit fullscreen mode
- If an array if looped over in the form of array.entries(), then the result will be each element in form of an array with index : value.

for(const item of fruits.entries()){
  console.log(item);
}

[ 0, 'banana' ] 
[ 1, 'apple' ] 
[ 2, 'peach' ] 
[ 3, 'orange' ] 
[ 4, 'mango' ] 
[ 5, 'guava' ] 
[ 6, 'water-melon' ]

// Transform it into a single array comprising of sub-arrays:
fruits.entries(); // Object [Array Iterator] {}

[...fruits.entries()]; 
// [ [ 0, 'banana' ], [ 1, 'apple' ], [ 2, 'peach' ], [ 3, 'orange' ], [ 4, 'mango' ], [ 5, 'guava' ], [ 6, 'water-melon' ] ]

// Transform into a single array using for-of loop:
-> Method 1
for(const item of fruits.entries()){
  console.log(`${item[0] + 1} : ${item[1]}`);
}
// '1 : banana' '2 : apple' '3 : peach' '4 : orange' '5 : mango' '6 : guava' '7 : water-melon'

-> Method 2
for(const [i,el] of fruits.entries()){
  console.log(`${i + 1} : ${el}`);
}
// '1 : banana' '2 : apple' '3 : peach' '4 : orange' '5 : mango' '6 : guava' '7 : water-melon'

Enter fullscreen mode Exit fullscreen mode
es6 Article's
30 articles in total
Favicon
Next-Generation Buttons: Implementing the Command Pattern through Web Components
Favicon
Hoisting: facing Temporal dead zone
Favicon
Learn javascript promises. Part 1 β€” What is a promise?
Favicon
Bootcamping 02: Named exports and default exports - does it really matter?
Favicon
Mastering Modern JavaScript: A Deep Dive into ES6 Function Creation and Best Practices
Favicon
Promises: The Ability to Write Asynchronous Code Using Javascript
Favicon
Exploring JavaScript's Modern Primitives: BigInt and Symbol
Favicon
JavaScript ES6 Release Notes: Unleashing the Power of Modern JavaScript
Favicon
WHY YOU SHOULD LEARN ES6
Favicon
Understanding ES6 API's
Favicon
Transpiler vs Polyfills
Favicon
JavaScript Spread Syntax: Expanding Arrays and Objects
Favicon
API Design and Debugging:A Comprehensive Guide for BeginersπŸš€
Favicon
Understanding the JavaScript Spread Operator (With Examples)
Favicon
A Comprehensive Guide to ES6 and Arrow Functions
Favicon
Controla tus promesa con JavaScript
Favicon
Sets
Favicon
Enhanced Object Literals
Favicon
Iteration Stament i.e for-of loop
Favicon
1.1 Ins & outs of ES6(JavaScript) Import with Realworld Example and Demo Project.
Favicon
Math Namespace & BigInt
Favicon
JavaScript - Destructuring Arrays & Objects [Live Doc]
Favicon
ES2015 (ES6) Tips, Tricks, Best Practices, and Code Snippet Examples for Your Day-to-Day Workflow
Favicon
Objects in JavaScript
Favicon
Intro to DSA & Big O Notation
Favicon
Execution Context & Call Stack
Favicon
Asynchronous programming in Javascript - Callbacks, Promises & Async Await
Favicon
Loops in JavaScript !!πŸ“šπŸ”„
Favicon
Array
Favicon
Functions

Featured ones: