JS MASTER CLASS /// LEARN LOOPS /// BUILD ITERATORS /// FUNCTIONAL PROGRAMMING /// JS MASTER CLASS /// LEARN LOOPS /// BUILD ITERATORS /// FUNCTIONAL PROGRAMMING /// JS MASTER CLASS /// LEARN LOOPS ///

JS Array Loops

Unlock the power of iteration. Learn how to traverse, manipulate, and log every single item inside an array using modern JS syntax.

loops.js
1 / 15
12345
🔁

Tutor:Arrays often hold many items. If we want to do something to every item, writing code for each index manually is impossible. We need a way to 'loop' over them.


Skill Matrix

UNLOCK NODES BY MASTERING ITERATIONS.

Classic For

The traditional loop syntax. You explicitly define the index variable and manually access elements using brackets.

System Check

In a classic loop `for(let i=0; i<arr.length; i++)`, what does `i++` do?

Community Holo-Net

Showcase Your Functions

ACTIVE

Wrote a crazy complex data transformation using map, filter, and forEach? Share it!

Support Us

JavaScript Array Loops

Author

Pascual Vila

Software Engineer // Code Syllabus

Working with arrays inevitably means you need to read or manipulate the data inside them. JavaScript provides multiple ways to iterate (loop) over an array. Each method has its own specific use case.

The Classic for Loop

The original method for iteration. It gives you the highest level of control. You define an initial counter, the condition to stop, and how the counter increments. It is highly performant and allows you tobreak orcontinue out of the loop easily.

The for...of Loop

Introduced in ES6, for...ofis often the preferred loop when you just need the values. It hides the index management and prevents off-by-one errors. It is cleaner and highly readable.

The forEach() Method

forEach() is an Array method that expects a callback function. It runs that callback once for each item. It fits perfectly into a functional programming style. Note: You cannot use `break` or `continue` inside a `forEach`.

What about for...in?+

Avoid using `for...in` to iterate over an array. The `for...in` statement iterates over all enumerable properties of an object that are keyed by strings. While an array's indexes are technically object keys, `for...in` will return them as strings ("0", "1", "2") and might also iterate over custom properties added to the Array prototype. Stick to `for...of` or `forEach` for arrays.

JS Loops Glossary

Iteration

The process of repeatedly executing a set of statements, usually once for each element in an array.

snippet.js

Index

The numeric position of an element inside an array. Indexes in JavaScript are zero-based.

snippet.js

for loop

The standard control flow statement for creating a loop with an initializer, condition, and increment.

snippet.js

for...of

Creates a loop iterating over iterable objects (including Arrays), invoking a custom iteration hook with the value.

snippet.js

forEach()

A built-in array method that executes a provided callback function once for each array element.

snippet.js

break

A keyword used to exit a loop immediately before it has finished all its iterations.

snippet.js