How does the call back function's argument's work?

Question

I am really confused with this, if we see this function,

document.eventHandler("click", function (e){

console.log(e)

})

we get the object of the event that happened

in the case of this example,

const fullNames = [{first: 'Albus', last: 'Dumbledore'}, {first: 'Harry', last: 'Potter'}, {first: 'Hermione', last: 'Granger'}, {first: 'Ron', last: 'Weasley'}, {first: 'Rubeus', last: 'Hagrid'}, {first: 'Minerva', last: 'McGonagall'}, {first: 'Severus', last: 'Snape'}];



var firstNames = fullNames.map(function(emp){
    
    return (emp.first);   
})

the word emp here refers to the each of the array element.

I am having a very hard time to understand this, I have a lot of questions like

how does the function know that it should return the event object to that argument if there is one?
where does the event object go if there is no argument mentioned?
How can I write my own function which returns the value to one of the parameter?

David · Answer 1 · 2021-08-17T17:09:12.520

how does the function know that it should return the event object to that argument if there is one?

It doesn't examine the target function for arguments, it just passes the argument(s) that it is designed to pass. It's up to the function to either use them or not.

where does the event object go if there is no argument mentioned?

Nowhere. If the function doesn't expect an argument then any argument sent to it is simply ignored.

Forget event handlers and other callbacks for a moment, you can test and observe with simple functions. Consider this function:

function test1 (x) {
    console.log(x);
}

And you call it with an argument:

test1('test!');

Now, change the function to this:

function test1 () {
    console.log('foo');
}

You can still call it with an argument:

test1('test!');

That argument is simply ignored.

It's up to the caller of the function to pass arguments, and it's up to the function to accept/use arguments. JavaScript doesn't check that these things match. (TypeScript does though.) In the case of event handlers or callbacks for built-in functionality (like calls to .find() or .map() for example), the implementation passes the arguments that it's documented to pass when it invokes the callback. But there's no rule that you must expect or use those arguments.

Edit:

Since you updated the question to include...

How can I write my own function which returns the value to one of the parameter?

Any function you write can expect any arguments you like. For example, let's say you want a function to expect a function as an argument:

function test2 (callback) {
  callback('foo');
}

If this test2 function is meant to be used by other developers then you would include in its documentation how you plan to invoke the function it receives as an argument. (That you plan to call it with a single argument of a string value.)

Then when using your test2 function, you'd supply that function parameter:

test2(function (x) {
  console.log(x);
});

Event handlers and other built-in functions that expect callbacks document how they plan to use those callbacks.

score 0 · Answer 2 · answered Aug 17 '21 at 16:58

Lets say we create our own function that accepts a callback. It will be a function that takes a string and a callback as paremeters, adds "World" to the string and calls the callback with it.

function addWorld(str, callback) {
  str += "World"
  callback(str)
}

addWorld("Hello ", function(result) {
  console.log('received', result)
})

addWorld("Goodbye ", function(result) {
  console.log('received', result)
})

The addWorld function will always try to call the callback with the string as a parameter. It doesn't depend on the type of callback (even though it could check the number of arguments with callback.length). If the callback accepts 0 parameters, the string just gets ignored.

score 0 · Answer 3 · answered Aug 17 '21 at 17:01

When you create a function, the function does not mean anything if you do not consider where it would be called. In the definition of a function, the parameters are defined but they don't have a value. When they get called the value will be bound to them. You should read parameter vs argument. In both examples you have provided, you are passing a function (to map or event handler) and the meaning of arguments they get depends on where they are called and what they receive when they get called by whoever is calling them.

score 0 · Answer 4 · answered Aug 17 '21 at 18:19

I think I got it, I am thinking the code inside the event listner should look something like this

function addEventListner(event, callback){
if (event = "click"){

//codes for waiting till the user clicks the element
 
eventlistner(object_of_the_clicked_event);
}

//other codes for rest of the events.


}

How does the call back function's argument's work?

4 Answers4