0

I would like to understand more how parameters work in functions. I have googled it, but I cannot find what I am looking for. From the attached javascript code:

1)Why item and index are automatically linked to the actual item and index of fruit? 2) In particular if I change item and index into ite and 'ind' or any other name, js still understands that the 2 parameters are still linked to items of fruits and their position, why? 3) Can myFunction(index, item) be traslated into an arrow function with 2 parameters and incorporeted in .foreach(), in order to be more efficient? Many thanks in advance.

let text = "";
const fruits = ["apple", "orange", "cherry"];
fruits.forEach(myFunction);
 
function myFunction(item, index) {
  text += index + ": " + item + " "; 
}

console.log(text)
//=> 0: apple 1: orange 2: cherry
Matteo
  • 79
  • 8
  • 1
    #1 `myFunction` is called from the native code, that function call defines the parameters. #2 Yes, you can use what ever names for arguments, the order is significant only. 3# Yes, the callback function can be an arrow function, I'm not sure if it would have any influence to the efficiency, though. – Teemu Jul 08 '21 at 14:21
  • You can read the foreach manual to see it clear. Would make no sense to copy it here as answer. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach – Thallius Jul 08 '21 at 14:22
  • 1
    Related: [Where do the parameters in a javascript callback function come from?](/q/34624634/4642212). – Sebastian Simon Jul 08 '21 at 14:25

3 Answers3

2
  1. Why item and index are automatically linked to the actual item and index of fruit?

Because that is what the internal forEach implementation does: it calls the callback that you provide with a list of arguments. The first one of these is the item from the array, and the second is its index. See documentation

  1. In particular if I change item and index into ite and ind or any other name, js still understands that the 2 parameters are still linked to items of fruits and their position, why?

Because the internals of forEach make the call with values. It is your callback function that defines how the variables -- that will be initialised with these values -- are named. Arguments are always passed by their position, not by name.

  1. Can myFunction(index, item) be translated into an arrow function with 2 parameters and incorporated in .foreach(), in order to be more efficient?

Yes, you can use an arrow function too. The difference between function and arrow syntax has little to do with performance though. It is mainly about how this is bound during the execution of the function, but since your code doesn't reference this, it makes no difference.

trincot
  • 317,000
  • 35
  • 244
  • 286
1
  1. forEach is designed to pass those values as the first and second arguments to the callback function
  2. Function definitions define the names of the paramaters based on their position. When you call a function you pass in a list of values. Only the position matters. The caller doesn't know nor care what the function it is calling names the things in those positions.
  3. See Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?. You can. It won't be a performance enhancement.
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
1

Array.forEach calls the function you give it with two parameters. The current array element and the index of the current array element.

As for the names of the parameters, it does not matter. Only the order matters to JavaScript. In fact, JavaScript does not even make sure that you have the same number of arguments when you declare the function as when you call it. Unset parameters are undefined.

As for an arrow function, you can absolutely turn it into an arrow function but I don't see how it would me more efficient. I guess you save on redefining this, but you don't use the this keyword so I think that may be optimized out anyways by the JIT. The JIT compiler is often most effective on loops anyways.

Ben
  • 2,200
  • 20
  • 30