Does the arguments of a javascript function not visible to its callback function?

I want to get 1 3 2 output for this code, with and without usign promises.

let data = 1;
console.log(data);

data = 2;
setTimeout((data) => {
  console.log(data);
}, 2000);

data = 3;
console.log(data);

let data = 1;
console.log(data);

data = 2;
setTimeout((data) => {
  console.log(data);
}, 2000,data);

data = 3;
console.log(data);

this code gives output 1 3 2, as expected, but

console.log(data);

data = 2;
setTimeout(() => {   // argument removed from callback function
  console.log(data);
}, 2000,data);

data = 3;
console.log(data);

this code is giving output 1 3 3, but why?
Why this callback function is not using data agrument passed in setTimeout.

I also used promise but still getting the 1 3 3 as output.

let data=1;
console.log(data);

data=2;
temp=new Promise((resolve, reject)=>{
    // async code
    setTimeout(()=>{
      resolve(data);
    },2000);

})

temp.then((temp)=>{
    console.log(temp);
    }).catch((err)=>{console.log(err);}
);

data=3;
console.log(data);

It has to do with closures.

In this example you're passing the value of data to setTimeout at the time of the setTimeout call (2) which will later be passed to the callback, so you get the 1,3,2 output you expect.

(The argument to the callback has the same name but it's an independent variable--it's not the same data as the one declared in the enclosing scope.)

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let data = 1;
console.log(data);

data = 2;
setTimeout((data) => {
  console.log(data);
}, 2000,data);

data = 3;
console.log(data);

<!-- end snippet -->

Just to clarify the distinction between the two data variables here's the same implementation with the argument renamed:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let data = 1;

console.log(data);

data = 2;
setTimeout((banana) => {
  console.log(banana);
}, 2000, data);

data = 3;
console.log(data);

<!-- end snippet -->

But in this case, where the data argument has been removed from the setTimeout call, your callback is referencing the variable from the outer scope, and by the time the callback runs its value has already been changed to 3. So you get 1,3,3.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let data = 1;
console.log(data);

data = 2;
setTimeout(() => {   // argument removed from callback function
  console.log(data);
}, 2000,data);

data = 3;
console.log(data);

<!-- end snippet -->