Declare event and parameter within ES6 function

Question

As the title suggests, I am somewhat unable to figure out the correct syntax for this function.

Currently, I have an event listener on a map that fires a function when the map is clicked as seen below:

map.on("click",(event)=>addMarker(event,parameter))

This is fine, but I want to combine the function fired into one complete function. I am aware it can be done such that I don't have to define the event outside of the addMarker function. Rather, I want to define the event within the addMarker function such that I only have the single function that is fired once the map is clicked.

Below is what I am trying to achieve (it's not the correct syntax):

map.on("click",addMarker(map))

and the addMarker function is:

const addMarker = (event) => (parameter) =>{
  new mapboxgl.addMarker({}).setLngLat(coords).addTo(parameter)
}

can anyone help with the proper syntax of the proposed addMarker function? When I do it this way I get the error "Cannot read properties of undefined (reading:"lng")"

And why would you want to change that syntax? It's a function that returns a function that does something. Can you change the definition of `addMarker` function? Because if you can then you can do anything you want with it. Right now it has to accept function that returns a function. — AbsoluteZero, Nov 25 '22 at 10:04
It should be `(parameter) => (event) =>` and not the other way around (assuming you want `map` to be `parameter` and the argument `.on()` passes to its callback to be `event` (which it typically is)). Also, please consider updating your question title to something more searchable for future readers with the same question — Nick Parsons, Nov 25 '22 at 10:07
@AbsoluteZero I plan on reusing the function in other parts of the code, thus I would rather have all the events/ params being handled in one block of code for easy debugging — MartinY, Nov 25 '22 at 11:52
@NickParsons Thank you for that. How do I edit the title of my post? — MartinY, Nov 25 '22 at 11:52
If you click [edit] under your post (or this link), you can edit it in the first textbox — Nick Parsons, Nov 25 '22 at 11:55

score 1 · Answer 1 · edited Nov 25 '22 at 10:28

1

You need to pass a Function to the event handler as a callback. So, you can swap the parameters in addMarker as follows. This way, you will define a function that returns a function in which the parameter variable will be fixed to map for that instance:

const addMarker = (parameter) => (event) =>{
  new mapboxgl.addMarker({}).setLngLat(coords).addTo(parameter)
}

edited Nov 25 '22 at 10:28

Bergi

630,263
148
957
1,375

answered Nov 25 '22 at 10:09

Harun Yilmaz

8,281
3
24
35

score 1 · Accepted Answer · edited Nov 25 '22 at 10:29

This code:

const addMarker = (event) => (parameter) =>{
  new mapboxgl.addMarker({}).setLngLat(coords).addTo(parameter)
}

Is (mostly) equivalent to:

function addMarker(event) {
  return function (parameter) {
     new mapboxgl.addMarker({}).setLngLat(coords).addTo(parameter)
  }
}

For the currying to work correctly you want to have it this way:

function addMarker(parameter) {
  return function (event) {
     new mapboxgl.addMarker({}).setLngLat(coords).addTo(parameter)
  }
}

(The function binding parameter has to be the outer one.) Translating that back to an arrow function results in:

const addMarker = (parameter) => (event) =>{
  new mapboxgl.addMarker({}).setLngLat(coords).addTo(parameter)
}

Declare event and parameter within ES6 function

2 Answers2