I have the folllowing code snippet:

```
 function testFunction(selected) {
    console.log("Selected id is: " + selected);
    var sendData={
        id: selected[1],
        menu: true
    };
    console.log(sendData);
  }

```

When I first run this function as testFunction(1), I get the following output to the console:

> 
> Selected id is: 1
> 
> 
> The sendData object, and inside it, the id is set to 1(correctly), menu is set to true(correctly), and I have some additional properties that are being added to it from somewhere, but I don't know from where
> 
> 
> 

The second time I run it as testFunction(2), I get the following output to the console:

> 
> Selected id is: 2
> 
> 
> The sendData object, and inside it, the id is set to 1(incorrectly), menu is set to true(correctly), and the additionally added properties.
> 
> 
> 

At first, I tought that the sendData variable is defined somewhere globally(as I use this variable name multiple times throughout my script), but I searched through the whole script, and no function accesses the sendData as a global variable(I mean, that wherever I use sendData I declare it as var sendData). Even if that would be the case, to my understanding, if I declare a variable in a function with "var" keyword, it makes it a local variable, so no global variable should interfere with it. Am I wrong in this? If no, what could be the problem that is causing this error?

I am still learning variable scoping in javascript, and I have another question. If I name a function paramater to for example "testVariable", and I also have a global variable, named "testVariable", whenever I call this function and pass some arguments to it, my global variable instantly gets changed?

EDIT:

Here is the actual code snippet from the bigger function:

```
function mainSearchSelect(e) {
jQuery("#navbar_mobile_menu_button").removeClass('fa-bars').addClass('fa-spin').addClass('fa-spinner');
jQuery("#navbar_mobile_menu").removeClass("expanded");

var navEndFunction=function() {
        selectSelect2.find(".select2-icon").find("i").removeClass('fa-spinner').removeClass('fa-spin').addClass('fa-search');   
        jQuery("#navbar_mobile_menu_button").removeClass('fa-spinner').removeClass('fa-spin').addClass('fa-bars');  
}

var select=jQuery(e.currentTarget);
var selectSelect2=select.siblings(".select2");
var selected=e.params.args.data.id.split("-");
selectSelect2.find(".select2-icon").find("i").removeClass('fa-search').addClass('fa-spinner').addClass('fa-spin');
var navDat={
    pageData: {
        pageid: selected[1]
    }
};

console.log("Selected id is: " + selected[1]);
console.log(sendData);
var sendData={};
console.log(sendData);
sendData={
        id: selected[1],
        menu: true
};
console.log("Data being sent:");
console.log(sendData);
if (selected[0]=='CONT') {
    navDat['pageData']['page']='contacts';
    navDat['pageData']['module']='conversations';
    ConvNavigate.navigate('loadPage', navDat, 'contacts', sendData, null, navEndFunction);
} else if (selected[0]=='GROUP')
{
    navDat['pageData']['page']='groups';
    navDat['pageData']['module']='timeline';
    ConvNavigate.navigate('loadPage', navDat, 'groups', sendData, null, navEndFunction);
}
}

```

mainSearchSelect is a function that is being called by a Select2 plugin, when an option is selected from the . e is the event that is being sent.

When I arrive to this part in the function the console tells me the following, which is REALLY strange in my opinion:

> 
> "Selected id is: 1"
> 
> 
> undefined
> 
> 
> Object { }
> 
> 
> "Data being sent:"
> 
> 
> Object { id: "1", menu: true, javascript: true, accessDat: "{"pageData":{"pageid":null,"page":null,"module":null,"moduleid":null},"parameters":["contacts",{"id":"1","menu":true},null,null],"urlData":{"title":null,"url":null},"mobileData":{"title":null,"menu":null},"mobileTitle":"Converser"}" }
> 
> 
> 

What could be happening?

The access dat property is being used in two places in my script:
First is the query that is sent to the Select2, the second is added to every ajaxCall I make to the server.

I console logged the e variable, and searched for the accessDat parameter, if it is being sent back from select2 aswell, but it isn't sent back, so it is not from the e where it gets added.

The ajaxCall function gets called later on, here is what my function does:

> 
> mainSearchSelect(e)
> 
> 
> 
> > 
> > Gets fired when a selection is made with the select2, processes the selection, and calls ConvNavigate.navigate() function, with the desired parameters
> >  In our case:
> > 
> > 
> > 
> > > 
> > > "loadPage" - string, that tells the function what function should it proceed to when it is done
> > > 
> > > 
> > > navDat - an object, which properties are being sent to HistoryJS to change the url and title of the page
> > > 
> > > 
> > > 'contacts' - tells loadPage which php file it should access
> > > 
> > > 
> > > sendData - the object in question, also the data that is being sent to the server for processing
> > > 
> > > 
> > > null - a start callback function which should be fired when loadPage is loaded - it is null as now function should fire at load
> > > 
> > > 
> > > navEndFunction - an end callback function which should fire when loadPage is ready
> > > 
> > > 
> > > 
> > 
> > 
> > 
> 
> 
> 

Here is the loadPage function:

```
function loadPage(page, sendData, startCallback, endCallback) {
if (startCallback === undefined) startCallback=null;
if (endCallback === undefined) endCallback=null;
if ((sendData === undefined) || (sendData === null)) sendData={};
sendData['javascript']=true;
console.log(sendData);

ajaxCall(baseUrl+"functions/"+page+".php", sendData, showPage, page, startCallback, endCallback);

}

```

Note, that sendData here is almost identical to the previous logs, except javascript: true gets added to it correctly. The ajaxCall function takes as parameters the file which should be loaded, the data which should be sent, a callback function which should be fired when ajaxCall is ready and the last three parameters are parameters that are being sent to the callback function(page, startCallback, endCallback).

If it could help, I will write down function showPage as well, but I don't think it has anything to do with this problem:|

If I comment out the sendData['accessDat'] from the ajaxCall function, the accessDat is not being logged to the console in the mainSearchSelect function. So that is the part which adds the accessDat to my object, but how is it possible, that ajaxCall gets called only later on, and even so, console.log already knows what will be added to it??? And also, what resets the id to 1? (or the first value it is being assigned to, because if I select the option with id 3 from the select box first, then it gets stuck with 3)