'field is undefined' property of object undefined in LWC but testing in JS ide it works

Question

Here's the LWC JS

   // console.log--> this.tableData = [{"Id":"a4X6t00000006cGEAQ","Sign__c":"No Sign","Notes__c":""}];
            picklistChanged(event) {
                event.stopPropagation();
                let dataRecieved = event.detail.data; 
                const field = dataRecieved.picklistname; // "Sign__c"
                let updateItem =  { Id: dataRecieved.context, [field]: dataRecieved.value };  
        // console.log -->{"Id":"a4X6t00000006cGEAQ","Sign__c":"Existing"}
                this.updateDataValues(updateItem);
            }
        
               updateDataValues(updateItem){
                    let copyData = [... this.tableData];
                    copyData.forEach(item => {
                        if(item.Id === updateItem.Id){
                            item[field] = updateItem[field]; // Here i get the field undefined error
                        }
                    });

So the code above does not work in an LWC but this code below works just fine in codepen.io

        let data = [{"Id":"a4X6t00000006cGEAQ","Sign__c":"No Sign","Notes__c":""}];
                let dataRecieved = { context: "a4X6t00000006cGEAQ", value: "cheeze"};
                const field = "Sign__c";
                let updateItem =  { Id: dataRecieved.context, [field]: dataRecieved.value }; 
            // console.log of updateItem = {"Id":"a4X6t00000006cGEAQ","Sign__c":"cheeze"}
somefunction(updateItem);

                function somefunction(updateItem){
                let copyData = [...data];
                copyData.forEach(item => {
                            if(item.Id === updateItem.Id){
                                item[field] = updateItem[field];
                            }
                        });
    }

the console.log of copyData on codepen comes out as

[{"Id":"a4X6t00000006cGEAQ","Sign__c":"Cheeze","Notes__c":""}];

So it works....

I have no idea how to resolve this, lately if i have buggy JS i'll start doing something in codepen or another web IDE but this is a hard wall.

Answer 1

You've fallen for a common problem in JavaScript. In your LWC, the "field" property is out of scope, while in the codepen.io example, the variable field is in the "closure" for somefunction. You'll want to pass field to the other method so you can use it:

        picklistChanged(event) {
            event.stopPropagation();
            let dataRecieved = event.detail.data; 
            const field = dataRecieved.picklistname; // "Sign__c"
            let updateItem =  { Id: dataRecieved.context, [field]: dataRecieved.value };  
    // console.log -->{"Id":"a4X6t00000006cGEAQ","Sign__c":"Existing"}
            this.updateDataValues(updateItem, field);
        }
    
           updateDataValues(updateItem, field){