Define an array of fruits in between the script tags <script> </script> containing the following types of fruits: [ ‘apple’, ‘cherry’, ‘pineapple’]. To get started we will need to write the name of the array we have just created, place a dot notation before writing the forEach method with parenthesis in the end. Make sure that the name Each in the method starts with a capital letter.
However, we are going to look at three examples. Each one is going to require a different set of parameters. In the first example, we will use the item parameter, both the item and index parameter in the second example and all the three parameters in the last example.
Using the code that we already have displayed above in this example, we are going to customize the function name to be “display” and remove both the index and array parameters. Both in the function definition and inside the forEach() method parentheses. In order to display the results of the display function, we’ll need to create a paragraph outside the script tags with an id = “for_each_example”.
Note that if we remove the plus sign we will only obtain “pineapple” as the output. We have also added a “break” element in order to make the output a bit more cleaner as well as another <p></p> tag at the start of the body to make the HTML display a bit fancier.
In this example, we are going to use both the item and index as parameters. Suppose we have an array with a long list of fruits and we need to determine the index of say “pineapple”.
We can determine this by concatenating both the items from the array and their respective indices in the same line. The out of this code displays an HTML page with apple, cherry and pineapple taking index zero, one and two respectively. If we add a new type of fruit as the fourth entry in the array it is going to assume index three. As illustrated in the code below.
We are going to explore how to use the third parameter together with the first two to perform an in-place modification of an array. However, note that we will use the exact same syntax used in the previous examples except for the new array of four numbers: [56, 68, 3, 5] that will be named “numbers”. Since the new function name is “add_two ”, we should change it both in the function definition and in the numbers.forEach(add_two) method. Furthermore, we should include the new parameter “array” alongside “item” and “index”.
Inside the body of the function, we are going to perform an iteration such that 2 is added to each element every time it is returned. We intend to display the new array of numbers after the iteration, to achieve this we will use “document.GetElementById” together with its property innerHTML. This will output a new array of numbers with an increment of 2 as
Shown in the code below.
In our Programming Tutorials series, you’ll find useful materials which will help you improve your programming skills and speed up the learning process.
- How to create perfect HTML tables?
- HTML color codes
- CSS background images
- Best Programming Books You Must Read in 2021
- Python for loop
- Creating a table using HTML and CSS
Would you like to learn how to code, online? Come and try our first 25 lessons for free at the CodeBerry Programming School.