CODEWITHSUNDEEP
javascriptindexeddb
The Shagod
The Shagod

Reputation: 51

indexeddb: How does changing the variable names during a request cause one to error?

I'm learning indexeddb and I got confused when comparing the 2 functions below. They are identical except that I changed the that last request variable names for code#2 to variable request2 name. This causes them to yield different results.

code#1

function updateEntry(){
    var tx = db.transaction('practiceStore', 'readwrite');
    var store = tx.objectStore('practiceStore');
    var request = store.get(3);
    request.onsuccess = event => {
        console.log(request.result)
        let entry = request.result;
        
        entry.title = 'mdn way'
        var request = store.put(entry)
        request.onsuccess = event => {
            console.log('putting')
        }
    }
    tx.oncomplete = event => {
        console.log('tx complete')
    }
}

outputs:

errors

vs.

code#2

function updateEntry(){
    var tx = db.transaction('practiceStore', 'readwrite');
    var store = tx.objectStore('practiceStore');
    var request = store.get(3);
    request.onsuccess = event => {
        console.log(request.result)
        let entry = request.result;
        
        entry.title = 'mdn way'
        var request2 = store.put(entry)
        request2.onsuccess = event => {
            console.log('putting')
        }
    }
    tx.oncomplete = event => {
        console.log('tx complete')
    }
}

outputs

//does expected behavior

Code#1 errors on the line with console.log(request.result). I tried using chrome devtools debugger and found that the debugger never makes it to var request = store.put(entry) which makes this even more confusing to me.

Code#1 errors because request is undefined. I conceptually don't understand how redefining request later changes anything. Any help appreciated, thanks.

Upvotes: 0

Views: 41

Answers (1)

Sheun Aluko
Sheun Aluko

Reputation: 134

Interestingly, I think this has to do with something called "hoisting" in javascript.

Basically, hoisting means that variable declarations in code are "brought to the top of the code". In the case of declaring AND initializing a variable, as you do with var request = store.put(entry) , the declaration (var request;) is hoisted to the top but not the initializaton (actually assigning the result of store.put).

Thus, when run your code#1 actually looks like this:

request.onsuccess = event => {
        var request; //this is the "hoisting" I am referring to
        console.log(request.result) //this is currently undefined now!
        let entry = request.result;
        
        entry.title = 'mdn way'
        request = store.put(entry) //this is the assignment
        request.onsuccess = event => {
            console.log('putting')
        }
    }

This is a bit confusing, but is explained well here (https://www.w3schools.com/js/js_hoisting.asp), especially the part about hoisting the declaration but NOT the initialization (see EXAMPLE 2 in the link).

When you change the name to request2, it similarly gets hoisted, but does NOT overwrite the outside request and thus request.result is not undefined.

Does that make sense?

Upvotes: 2

Related Questions