I had started to learn JavaScript for web development and I am currently stuck at a point in the callback function. The problem is that I can't understand how arguments are passed in JavaScript.
CODE:
const arr = [1, 2, 3, 4, 5, 6, 7, 8];
function myfunc(value){ //i had set a parameter 'value'
console.log(value); // i had printed the 'value'
}
arr.forEach(myfunc); // i had not passed any argument in myfunc
I am really confused about how myfunc (value) gets the 'value' parameter from in forEach function or any functions like:
const numbers1 = [45, 4, 9, 16, 25];
function myFunction(value) { //myFunction has parameter 'value'
return value * 2;
}
const numbers2 = numbers1.map(myFunction); /* here, how value arguments are passed to
myFunction? */
They get passed in because forEach has some code which passes them in. forEach's implementation will look something like this:
forEach(callback) {
// `this` is the array we're looping over
for (let i = 0; i < this.length; i++) {
callback(this[i], i, this);
}
}
So forEach handles the logic of looping over the array, and then for every element in the array, it's going to call your function and pass in three parameters (the value, its index, and the entire array). You just write a function that uses those values in whatever way you need it to. If you don't need to use all 3 parameters, you can simply leave out any arguments to the right of the ones you need.
The functional extensions on the javascript Array require a function as an argument. That function can be:
function doSomething() {} // This is a named function
// This is an anonymous function because we didnt give a name to it
[1,2,3].forEach(function (value) { console.log(value) })
// It's called fat arrow because well, the arrow is fat
[1,2,3].forEach((value) => console.log('hey', value))
The implementation for the functional extensions on Array always pass three arguments: the value, the index and the array the function is being applied to
The way function arguments work in JS is that if you pass more than the required arguments to a function JS will just drop the rest, and if you pass more than the ones needed those will have a value of undefined unless you have specified a default value for those
const array = [1,2,3]
// I am just getting the value and the name "value" could be any name
array.forEach((value) => console.log(value))
// here my fat-arrow function takes two parameters, since forEach passes three parameters we're good to go
array.forEach((value, index) => console.log(value, 'at', index))
// Here we're using all arguments without dropping any
array.forEach((value, index, array) => console.log(value, index, array))
// that is because the forEach predicate only passes three arguments and hence the last is undefined
array.forEach((value, index, array, fourth) => console.log('here', fourth, 'is always undefined'))
This makes sense to the OP, probably:
const numbers1 = [45, 4, 9, 16, 25];
numbers1.forEach(e => console.log(e));
So probably this will make sense, too:
const numbers1 = [45, 4, 9, 16, 25];
const someFunction = e => console.log(e);
numbers1.forEach(someFunction);
If so, then this will make sense, too:
function someFunction(e) {
console.log(e));
}
numbers1.forEach(someFunction);