Passing a variable into a callback function but it's coming up as 'undefined'

Question

I'm trying to pass a variable into a callback function that's apart of an event listener for Azure Maps but that variable comes up as 'undefined' once I console.log the variable in the other function. Not sure what I'm doing wrong. Am I passing the variable to the callback function the wrong way?

loadData = () => {
let dataSource = new window.atlas.source.DataSource('map', {
        cluster: true,
        clusterRadius: clusterRadiusLevel,
        clusterMaxZoom: maxClusterZoomLevel
      });
  maps.event.add('click', layer, (e,dataSource) => this.clickedCluster(e,dataSource)
}

clickedCluster = (e,dataSource) => {
console.log(dataSource)
}

there's definitely more to the loadData function but gave enough information of what I'm trying to do. The console.log in clickedCluster keeps coming back undefined. I know it's not undefined because I console logged the variable inside the loadData function and I'm getting an object back containing all the data.

Answer 1

Firstly, you're missing a closing paren on the maps.event... line.

Secondly, don't include dataSource as the 2nd param to your anonymous arrow function on the same line:

let loadData = () => {
    let dataSource = new window.atlas.source.DataSource('map', {
        cluster: true,
        clusterRadius: clusterRadiusLevel,
        clusterMaxZoom: maxClusterZoomLevel
    });
    maps.event.add('click', layer, e => this.clickedCluster(e, dataSource));
};

let clickedCluster = (e, dataSource) => {
    console.log(dataSource)
};

The highlight why this is correct, take a look at this simpler example

let callback = a => console.log('callback', a);

let x = 'hello';

let caller1 = x => callback(x);
let caller2 = () => callback(x);

caller1(); // undefined
caller2(); // 'hello'

This is called "shadowing" btw (wiki).