when i try to access array element by index it gives me undefined

Question

i created an array and insert elements by array.push(). when i console.log(array) it gives me following out put output of console.log(array)

when i console.log(array[0]) it gives me undefined. why is happing and a blue i tag appear in picture which says "this value was evaluated on first expanding it may have changed since then in array javascript" what does means. please help me to understand the problem

here the full code

index.html =>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>zip reader</title>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.3/jstree.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<body>


    <h3>Choose the local(s) zip file(s)</h3>
    <input type="file" id="file" name="file" multiple /><br />
    <div id="result_block" class="hidden">
    <h3>Content :</h3>
    <div id="result">
    </div>
    </div>
   

</body>
<script src="jszip.min.js"></script>
<script src="jszip-utils.min.js"></script>
<script src="app1.js"></script>
<script src="FileSaver.min.js"></script>
</html>

app1.js =>

var array = []
var contents = []

var $result = $("#result");
$("#file").on("change", function(evt) {
    // remove content
    $result.html("");
    // be sure to show the results
    $("#result_block").removeClass("hidden").addClass("show");

    // Closure to capture the file information.
    function handleFile(f) {
        var $title = $("<h4>", {
            text : f.name
        });
        var $fileContent = $("<ul>");
        $result.append($title);
        $result.append($fileContent);
        
        var dateBefore = new Date();
        JSZip.loadAsync(f)                                   // 1) read the Blob
            .then(function(zip) {
                var dateAfter = new Date();
                $title.append($("<span>", {
                    "class": "small",
                    text:" (loaded in " + (dateAfter - dateBefore) + "ms)"
                }));

                zip.forEach(  function (relativePath, zipEntry) { 
                    
                    var y = zipEntry.name

                        array.push(y);

                    $fileContent.append($("<li>", {
                        text : zipEntry.name
                    }));
                });
            }, function (e) {
                $result.append($("<div>", {
                    "class" : "alert alert-danger",
                    text : "Error reading " + f.name + ": " + e.message
                }));
            });
            
    }

    var files = evt.target.files;
    for (var i = 0; i < files.length; i++) {
        handleFile(files[i]);
    }
 console.log(array[0])
 
});

Please post the **actual code involved**. Without that, it's all a mystery. — Pointy, Jul 19 '22 at 17:10
Post a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of your attempt, noting input and expected output using the [snippet editor](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do). — Ian, Jul 19 '22 at 17:28
Please provide enough code so others can better understand or reproduce the problem. — Community, Jul 19 '22 at 22:20
i submitted all code the problem with the last console.log(array[0]). it is says undefined. pleases check it out — gaurav joshi, Jul 20 '22 at 04:02

astef · Answer 1 · 2022-07-19T17:29:17.783

When you console.log an object (including arrays), it isn't being serialized, and only a reference is passed to a console. When you expand it, this reference is used to check the state of this object.

Most probably what's happening is the following sequence:

console.log(array) // passes array reference to a console
console.log(array[0]) // prints undefined immediately
array.push(...) // an actual array modification
you expand the object, and console checks the content of an array

PS.

It's reasonable to ask, what will happen, if the reference will become invalid due to any reason.

For browsers - it's simpler, since the console and JS program run under same parent process, browser is responsible for everything.

But if you'll ever try to debug Node process, which has the same API of passing the reference, you will face strange issues all over around, like this one: No debug adapter, can not send 'variables VSCODE

score 0 · Answer 2 · answered Feb 24 '23 at 15:06

In the documentation for console.log (https://developer.mozilla.org/en-US/docs/Web/API/Console/log) I had the same situation.

// init 
unselectedTriggers: TriggerDTO[] = [];
// fill array after getting an API response
api.subscribe(trigger => this.unselectedTriggers.push(trigger));
// the issue was that I was calling method for sorting outside of subscribe
this.sortTriggersByStatus();


sortTriggersByStatus() {
// if I close the inspect window, and did not debug, this shown the correct list
// but if I open inspect, and was debugging, then the array was empty
console.log(this.unselectedTriggers) 
// this shown undefined
console.log(this.unselectedTriggers[0])
}

Ensure your array is filled correctly, and then call other functions.

when i try to access array element by index it gives me undefined

2 Answers2