Help with scope issue using function

[JamesCrandall]

Having some difficulty with a seemingly simple scope issue that I am struggling to understand.  Someone will probably be able to quickly identify what I'm missing here!

I have a function that calculates planar area and calculates an acreage value with the geometry of a graphic as the input parameter.  In that process I intended to set "this.acrevalue" and have it set and available later on in other functions of a button click event.  However, it's always null BUT I can see that the correct acreage value is being calculated.

saveDataBtnClick() function is a button in the html of the widget that I hoped to somehow use the getAcreageValueFromPolygon() function to get the acreage value before submitting a applyEdit() on the feature service.

		getAcreageValueFromPolygon: function (geom) {
			projection.load().then(function (evt) {
				const inSpatialReference = new SpatialReference({ wkid: 102100 });
				const spSpatialReference = new SpatialReference({ wkid: 2881 });
				const poly = new Polygon(geom, inSpatialReference);
				var geoT = projection.getTransformation(inSpatialReference, spSpatialReference)
				const projectedPoly = projection.project(poly, spSpatialReference);

				var areasAndLengthParams = new AreasAndLengthsParameters();
				areasAndLengthParams.areaUnit = esri.tasks.GeometryService.UNIT_ACRES;
				areasAndLengthParams.lengthUnit = GeometryService.UNIT_FOOT;
				areasAndLengthParams.polygons = projectedPoly;

				var geometryService = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
				geometryService.on("areas-and-lengths-complete", outputAreaAndLength);
				geometryService.simplify([projectedPoly], function (simplifiedGeometries) {
					areasAndLengthParams.polygons = simplifiedGeometries;
					geometryService.areasAndLengths(areasAndLengthParams);
				});
			}.bind(this))

			function outputAreaAndLength(evtObj) {
				var result = evtObj.result;
				this.acrevalue = result.areas[0].toFixed(3)
				
			}
		},
		saveDataBtnClick: function () {

			var e = document.getElementById("layerTypeSelections");			
			//use config to reference services and specific service layers
			this.serverSideScratchLayer = new FeatureLayer(this.config.applicationFeatureLayer + "/" + lyrNum, { outFields: ["*"] });
			
			var features = this.unionedGraphic2.geometry
			if (features) {

				this.getAcreageValueFromPolygon(this.unionedGraphic2.geometry); //set the acreagae value and have it available for saving in applyEdits
				var spAcres = this.acrevalue; 
				attr["TRMT_ACRES"] = spAcres;

				var fYear = '1901'
				attr['FISCAL_YEAR'] = fYear
				this.unionedGraphic2["attributes"] = this.attr

				this.serverSideScratchLayer.applyEdits([this.unionedGraphic2], [], this.attr, lang.hitch(this, function (add) {
					if (add.length > 0) {
						if (add[0].objectId) {
							console.log('Add successful with objectid: ' + add[0].objectId);
							this.uploadOID = add[0].objectId
						}
                    }					
				}).bind(this));				
			}					
		},

[KenBuja · Accepted solution]

When using "this" in a function, you have to use "lang.hitch" to make sure "this" is retaining the proper scope.

geometryService.on("areas-and-lengths-complete", lang.hitch(this, outputAreaAndLength));

[JamesCrandall]

I must have put that in just about every place except where you suggest. LOL  --- thank you, this resolves the issue (although not sure if it resolves the issue that I consistently struggle with scope).

Much appreciated!