I am struggling to comprehend the passing of elements from an array to a function's argument

Question

I am struggling to comprehend the passing of elements from an array to a function's argument

I'm grappling with the concept of a function that I grasp.

function forEach(array, action) {
  for (var i = 0; i< array.length; i++)
    action(array[i]);
}

When we use this function, like

forEach([1,2,3,4,5], console.log);

, it essentially swaps out 'action' with 'console.log' in the body. And everything runs smoothly. Right?

However, things get a little tricky when an anonymous function is thrown into the mix.

var numbers = [1, 2, 3, 4, 5], sum = 0;

forEach(numbers, function(number) { sum += number; });

In this scenario, an anonymous function serves as an argument. How exactly does this function cycle through each element of the 'numbers' array, placing it into its parameter 'number'? It's puzzling.

To simplify matters, I could do something like:

var FindSum = function (number) {
  sum += number;
};

forEach(numbers, FindSum);

But I still find myself perplexed by how the 'FindSum' function receives a number.

javascript arrays foreach

Answer 1

Answer №1

The code in the following example is identical to the first one:

function loopThrough(array, action) {
    for (var i = 0; i < array.length; i++)
        action(array[i]); // array[i] serves as the argument
}

Hence, item represents items[i]

var items = [5,6,7];
var calculateSum = function (item) {
  total += item;
};

loopThrough(items, calculateSum); // is equivalent to calling calculateSum(5), calculateSum(6), and calculateSum(7);

Answer 2

The code in the following example is identical to the first one:

function loopThrough(array, action) {
    for (var i = 0; i < array.length; i++)
        action(array[i]); // array[i] serves as the argument
}

Hence, item represents items[i]

var items = [5,6,7];
var calculateSum = function (item) {
  total += item;
};

loopThrough(items, calculateSum); // is equivalent to calling calculateSum(5), calculateSum(6), and calculateSum(7);

Answer 3

Answer №2

let values = [11, 22, 33, 44, 55], total = 0; 
forEach(values, function(value) { total += value; });

In simple terms:

The forEach function is used with an array (values) and an anonymous callback function.
Each value in the array is passed to the anonymous function by forEach.
At each iteration, the current value of the number is added to the "total".

Answer 4

let values = [11, 22, 33, 44, 55], total = 0; 
forEach(values, function(value) { total += value; });

In simple terms:

The forEach function is used with an array (values) and an anonymous callback function.
Each value in the array is passed to the anonymous function by forEach.
At each iteration, the current value of the number is added to the "total".

I am struggling to comprehend the passing of elements from an array to a function's argument

Answer №1

Answer №2

Similar questions

When utilizing Wordpress PHP to group posts based on an ACF custom field, the outcome may result in an excessive number of groups

Stopping HTTP redirection in Angular 2

There seems to be a syntax error in the script where an expression was expected but

Refreshing a DataTable by recreating it with a VueJS-populated HTML table

The elements within the array are being refreshed accurately, however, a separate component is being removed

Vuejs tutorial: Toggle a collapsible menu based on the active tab status

Continuous updates triggered by mouse movement with jQuery

Having difficulty rotating cube as intended using the plane and mousemove technique

KnockoutJS - Struggling to bind model from simple JSON array

Managing data in a database on Discord using JavaScript to automatically delete information once it has expired

How can Angular 2 and Firebase be used to search for an email match within all Firebase authentication accounts?

The matMul function encountered an error due to a mismatch in the inner shapes of the Tensors. The shapes provided were 684,1 and 2,1, and the transposeA and transposeB parameters were both set

React - Dealing with rendering issue when toggling a button using LocalStorage and State

How can I uniquely combine a code with an existing CSS class and make modifications to it?

Setting a default value within an input tag: A step-by-step guide

The Facebook app is designed to require users to grant permission for the application to access their personal data

The cell text you are trying to access is beyond the allowed range

Creating a transcluding element directive in AngularJS that retains attribute directives and allows for the addition of new ones

Creating a two-dimensional array and transforming it into a table with ng-repeat in Angular

The jQuery plugin functions smoothly when running on localhost, but it causes issues with the background image when deployed on the web