JavaScript Array Iteration


Iterations in JavaScript

An array iteration methods is operating on each and every item in the array.


Array.forEach()

forEach() will run the provided callback once for each element that exist in the array. This will be done in an ascending order. Properties that have been deleted or are uninitialized will not be invoked (i.e. on sparse arrays).

JS JavaScript - Array.forEach()

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    </head>
    <body>
    <button onclick="showLettersFromArray()">Click me to test</button><script>
        function showLettersFromArray() {
            var myArray = ['a', 'b', 'c'];
            var result = 'z';

            myArray.forEach(function (element) {
                    result = result + " " + element;
            });

            document.getElementById("resultElement").innerHTML = result;
        }
    </script><p id="resultElement"></p>
    </body>
</html>

Learn more about JavaScript Loop For Learn more about JavaScript Loop While

Array.map()

The map() method will create a new array with the results of calling a provided function on every element in the calling array.

JS JavaScript - Array.map()

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    </head>
    <body>
    <button onclick="displayResult()">Click me to test</button>

    <script>
        function displayResult() {
            var myArray = [2, 6, 11, 21];

            const mappedArray = myArray.map(x => x * 3);

            alert(mappedArray);
        }
    </script>
    </body>
</html>

Array.filter()

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

filter() calls a provided callback function once for each element in an array, and constructs a new array of all the values for which callback returns a value that coerces to truecallback is invoked only for indexes of the array which have assigned values; it is not invoked for indexes which have been deleted or which have never been assigned values. Array elements which do not pass the callback test are simply skipped, and are not included in the new array.

JS JavaScript - Array.filter()

<!DOCTYPE html>
                                                              
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    </head>
    <body>
    <button onclick="showArray()">Click me to test</button>
                                                              
    <script>
        function showArray() {
            var animals = ['dog', 'cat', 'bird', 'hummingbird', 'bumblebee'];
                                                              
            const result = animals.filter(animals => animals.length > 5);
                                                              
            alert(result);
        }
    </script>
    </body>
</html>

Array.reduce()

The reduce() method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.

reduce() executes the callback function once for each element present in the array, excluding holes in the array.

JS JavaScript - Array.reduce()

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    </head>
    <body>
    <button onclick="showArray()">Click me to test</button>
    
    <script>
        function showArray() {
            const myArray = [3, 5, 6, 9];
            const x = (z, y) => z + y;
    
            alert(myArray.reduce(x)); 
            alert(myArray.reduce(x, 5));	
        }
    </script>
    </body>
</html>

The reduce() method does not reduce the original array.


Array.every()

The every() method tests whether all elements in the array pass the test implemented by the provided function.

The every method executes the provided callback function once for each element present in the array until it finds one where callback returns a falsy value. If such an element is found, the every method immediately returns false. Otherwise, if callbackreturns a truthy value for all elements, every returns truecallback is invoked only for indexes of the array which have assigned values; it is not invoked for indexes which have been deleted or which have never been assigned values.

JS JavaScript - Array.every()

function isLessThan(x) {
    return x < 40;
}
 
var myArray = [2, 24, 41, 22, 11, 9];
 
alert(myArray.every(isLessThan));
// Result: false

Array.indexOf()

The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.

JS JavaScript - Array.indexOf()

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <body>
    <p>Test how to use indexOf()</p>
    
    <button onclick="displayArrayIndexes(2)">Click me to display the indexes</button>
    
    <script>
        function displayArrayIndexes(arg) {
            var animals = ['dog', 'cat', 'hummingbird', 'horse'];
            
            alert(animals.indexOf('cat'));           
            
            alert(animals.indexOf('hummingbird', arg));           
            
            alert(animals.indexOf('duck'))
        }
    </script>
    </body>
</html>

Array.lastIndexOf()

The lastIndexOf() method returns the last index at which a given element can be found in the array, or -1 if it is not present. The array is searched backwards, starting at fromIndex.

JS JavaScript - Array.lastIndexOf()

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <body>
    <p>Test how to use indexOf()</p>
    
    <button onclick="displayLastIndex()">Click me to display the last indexes</button>
    
    <script>
        function displayLastIndex() {
            var animals = ['duck', 'dog', 'cat', 'hummingbird', 'horse', 'dog', 'cat', 'hummingbird', 'horse', 'duck'];
            
            alert(animals.lastIndexOf('cat'));           
            
            alert(animals.lastIndexOf('hummingbird'));           
            
            alert(animals.lastIndexOf('duck'))
        }
    </script>
    </body>
</html>

Array.find()

The find() method returns the value of the first element in the array that satisfies the provided testing function.
If no result is found undefined is returned.

JS JavaScript - Array.find()

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <body>
    <p>Find the first element that satisfies the provided testing function</p>
    
    <button onclick="findElement()">Click me to find the element</button>
    
    <script>
        function findElement() {
            var myArray = [4, 45, 3, 123, 88];
            
            var elementsFound = myArray.find(function(element) {
            return element > 50;
            });
            
            document.getElementById("resultElement").innerHTML = elementsFound;
        }
    </script>
    
    <p id="resultElement"></p>
    </body>
</html>

Array.findIndex()

The findIndex() method returns the index of the first element in the array that satisfies the provided testing function.
If no index is found -1 is returned.

JS JavaScript - Array.findIndex()

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <body>
    <p>Return the index of the first element in the array that satisfies the provided testing function</p>
    
    <button onclick="getPositionFirstLargeNumber()">Click me to find the large number index</button>
    
    <script>
        var numbers = [4, 10, 19, 29, 33];
        
        function checkNumbers(numbers) {
            return numbers >= 30;
        }
        
        function getPositionFirstLargeNumber() {
            document.getElementById("resultElement").innerHTML = numbers.findIndex(checkNumbers);
        }       
    </script>
    
    <p id="resultElement"></p>
    </body>
</html>

Learn more about JavaScript Array Sort Learn more about JavaScript Objects and Arrays
BACK TO TOP






Check this out

JS JavaScript: Debugging

Searching for bugs and fixing them is called code debugging.

The bugs might be difficult to diagnose and therefore it is important to have a good approach to find and fix the bugs effectively.

JS JavaScript: Date Get Methods

The Date object is used to work with Dates and Times. Date Get methods let you get date values

The methods will return the date relative to the local timezone. Every method starts with get, and will return the relative number. Below is a deta....

JS JavaScript: Variables

A variable contains a value. When you use the variable, you refer to the data it represents. You use variables to store, retrieve and manipulate values in your code.

JS JavaScript: Scope

Scope determines if variables are accessible (visible).

A scope in JavaScript defines what variables you have access to. There are two kinds of scope – global scope and local scope.

Function scope and block scope are local scope - variables declared inside a function or a bl....


BACK TO TOP

JavaScript is one of the 3 core language technologies of the World Wide Web that all web developers must learn:

1.      HTML to define the content of web pages.

2.      CSS to specify the layout of web pages.

3.      JavaScript to program the behavior of web pages.

JavaScript is a scripting or programming language that allows you to implement complex things on web pages. Every time a web page does more than just sit there and display static information for you to look at, displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. − you can bet that JavaScript is probably involved.


The benefits of using JavaScript are:

1.      You can validate user input before sending the page off to the server. This saves server traffic, which means less load on your server.

2.      Immediate feedback to the visitors − They don't have to wait for a page reload to see if they have forgotten to enter something.

3.      Increased interactivity − You can create interfaces that react when the user hovers over them with a mouse or activates them via the keyboard.

4.      Richer interfaces − You can use JavaScript to include such items as drag-and-drop components and sliders to give a Rich Interface to your site visitors.


BACK TO TOP

Need more Honney

NDC Conferences

The NDC Conferences (Norwegian Developers Conference) are one of the world`s largest independent software conferences for .NET & Agile development. The conference covers everything you need to know within software development. The conferences are held each year in many places such as Oslo, Copenhagen, London, Sydney and Minnesota.

Update Conference Prague

Update Conference Prague is the biggest developer conference in the Czech Republic. The conference is offering sessions delivered by the top experts from all around the world. Their goal is to inspire the attendees and enrich their knowledge.

Troy Hunt

Learn about Web Security from Troy Hunt. He is a really engaged speaker that frequently give talks on conferences around the world. Troy is a Microsoft MVP and you can even learn from him on some great courses on Pluralsight.

W3Schools

W3Schools.com is a great education Web Site for learning web technologies. On W3Schools you may find well organized basic to advanced tutorials and references.

Scott Hanselman

Learn about Web Technologies and new trends from Scott Hanselman. Scott Hanselman is an author of developer books and he is an engaged speaker that usually talks about the Microsoft stack. You may meet Scott on conferences around the world.

Developer Week

DeveloperWeek is one of the world’s largest developer conferences. Developer Week focus on new dev technologies, the conference have talks and workshops for newbies and experienced audience. You can attend on a Developer Week conference different places in Nothern America.


BACK TO TOP

Honneybag blog



Learn JavaScript Debugging

Searching for bugs and fixing them is called code debugging. The bugs might be difficult to diagnose and therefore it is important to have a good approach to find and fix the bugs effectively. Bugs in the code might be syntax errors or logical errors. Sometimes nothing happens when the code contains bugs and there is few indications where to search. Modern web browser includes a powerful suite of developer tools. The tools do a range of things...

Explore JavaScript Arrays

Arrays are frequently used by developers. Programming languages can have slightly different implementation of arrays. An array is an object that can store a collection of items. You may say it`s a special variable that can have more than one value. The array holds many values under a single name, and you may access the values by referring to an index number. The easiest way to create....

Ultimate Guide to HTML Colors

It is essential to give the user a good user experience. There are many things you should focus on, one of them is how you use colors on your website. We don't have to struggle with black and white TVs anymore. Users expect more and more and we can apply colors to everything we want. Texts, borders, backgrounds, shadows – in HTML they all can have whatever color you decide....

Wanna be a sheep? Check out the most popular subjects
HONNEYBAG BLOG
HTML FORMATTING
HONNEYBAGBLOG INSPIRE-AND-BE-INSPIRED
HTML ESSENTIALS
HONNEYBAGBLOG HOW-TO-USE-BROWSER-DEVELOPER-TOOLS
Wanna be a little different? Check out the less popular subjects
HONNEYBAG BLOGER
HTML INTRODUCTION
HTML INTRODUCTION
HTML ESSENTIALS
HTML ESSENTIALSWE
BACK TO TOP