0

Background

I just moved over to Javascript from Java/C/C#. I'm trying to learn by viewing some code I found online, learning by example tends to work for me the best.

I've come across a (weird and some people say) highlighting feature of JS. And it seems silly but, how do I set a value to a variable?

What I've tried

 <script type="text/javascript">
    let resultingJSON=9;
    function selectFile() {

        let selectedFile;
        document.getElementById('file').click();
        document.getElementById('file').addEventListener('change', function (e)
        {
            selectedFile = e.target.files[0];
            var fileReader = new FileReader();
            fileReader.readAsBinaryString(selectedFile);
            fileReader.onload = (event)=>
            {
                let data = event.target.result;
                let workbook = XLSX.read(data,{type:"binary"});
                //console.log(workbook);
                let workSheet = workbook.Sheets["Sheet1"];
                resultingJSON = XLSX.utils.sheet_to_json(workSheet);
                printJSON(resultingJSON);
                Breakpoint 1
            }
            console.log("3--"+resultingJSON);
        });
        console.log("2--"+resultingJSON);
    }
    console.log("1--"+resultingJSON);
</script>

Observation

At breakpoint 1, the variable was set correctly. At the console logs number 1, 2, and 3, it remained 9 (its initial value).

Question

  1. The variable was global, why was changes made to the variable not carry over globally? How can this be corrected?

  2. console-log sequences are: 1, 2, then 3. But after the click(), addEventListener was called, so why was the sequence not 1,3,then 2 ?

Thanks guys, (references to some study material is also appreciated)

Molegeca
  • 13
  • 4
  • Welcome to asynchronous programming. – Nishant Jan 02 '21 at 10:30
  • What value prints first? 9 (initial value) or the updated value? You need to understand the difference between synchronous and asynchronous code. Value of variable `resultingJSON` is changed _after_ its initial value has already been printed on the console. Try to label the `console.log` output to understand which _Breakpoint_ executes first. – Yousaf Jan 02 '21 at 10:31
  • When you set a variable *inside a function* it isn't going to be set *until that function is called*. This has nothing to do with scope. It is just about timing. – Quentin Jan 02 '21 at 10:34
  • "why was the sequence not 1,3,then 2 ?" — 2 comes after 1 because the function with 2 in it isn't called until the change happens. 3 comes after 2 because the onload function isn't called until the load happens. – Quentin Jan 02 '21 at 10:40
  • @Yousaf, Yes tried that! Thanks for the hint! Updated question with your hint. Thanks! – Molegeca Jan 02 '21 at 10:40
  • @Quentin Thanks! It seems that the sequence that the code appears in the script tags has nothing to do with how they're executed T_T? I thought selectFile() should be executed before console-log-1. I'm now beginning to feel ashamed for my confusion T_T – Molegeca Jan 02 '21 at 10:46
  • The code does execute in sequence, it is just that some of the code "defines a function" rather than doing what is inside the function immediately. – Quentin Jan 02 '21 at 11:10

0 Answers0