I cannot call a function from another function because it is undefined

Question

I am calling one function from another function but it is "undefined". What cause this problem in TypeScript?

export class CariComponent implements OnInit {

  satisSorumlusuId: number;

constructor(private dataService: DataService) { }

  setCellValue (newData, value, currentRowData) {
    console.log(this.getSatisSorumlusuId); // it prints undefined. So I cannot call this function here.
  }

  getSatisSorumlusuId(): number {
    return this.satisSorumlusuId;
  };

  ngOnInit() {
  }

}

UPDATE setCellValue (newData, value, currentRowData) function is DevExtreme function which I am using as third party product. This is how I set setCellValue.

<dxi-column 
        dataField="satisSorumlusu_Idstr"
        caption="satisSorumlusu_Idstr"
        [setCellValue]="setCellValue" >  
        <dxo-lookup 
            [dataSource]="satisSorumlusuDataSource"
            valueExpr="id"
            displayExpr="ismi">
    </dxo-lookup>       
</dxi-column>

If I make console.log(this)in setCellValue function, it contains only DevExtreme related properties ( You can see at the bottom ). I mean there is no way to hook getSatisSorumlusuId() if you go with this. But how about that? What is the way to access properties and methods of Component ts file where actually everything is happening within it.

headerId: "dx-col-7"
visible: true
showInColumnChooser: true
allowFixing: false
allowReordering: false
autoExpandGroup: true
allowCollapsing: true
allowGrouping: false
allowFiltering: true
allowHiding: true
allowSorting: true
allowEditing: true
encodeHtml: true
trueText: "true"
falseText: "false"
allowExporting: true
caption: "satisSorumlusu_Idstr"
calculateCellValue: ƒ (data, skipDeserialization)
setCellValue: ƒ setCellValue(newData, value, currentRowData)
parseValue: ƒ (text)
calculateFilterExpression: ƒ ()
createFilterExpression: ƒ (filterValue)
lookup: {dataSource: inheritor, displayExpr: "ismi", calculateCellValue: ƒ, updateValueMap: ƒ, update: ƒ, …}
resizedCallbacks: Callback {_options: {…}, _list: Array(0), _queue: Array(0), _firing: false, _fired: false, …}
defaultCalculateCellValue: ƒ (data, skipDeserialization)
defaultSetCellValue: ƒ (data, value)
defaultParseValue: ƒ (text)
defaultCalculateFilterExpression: ƒ ()
defaultCreateFilterExpression: ƒ (filterValue)
dataField: "satisSorumlusu_Idstr"
selector: ƒ (data)
filterOperations: []
visibleIndex: 2
dataType: "string"
index: 2
alignment: "left"
defaultFilterOperations: []
defaultFilterOperation: "="
showEditorAlways: false
bestFitWidth: 177

Does `console.log(this.getSatisSorumlusuId());` work? Added parentheses. — R. Richards, Jan 02 '20 at 01:13
The function is working as expected. It is returning the value of the variable _satisSorumlusuId_ which is undefined. — EJK, Jan 02 '20 at 01:27
change your variable declaration to _satisSorumlusuId: number = 10;_ and you will see that _10_ is the output. — EJK, Jan 02 '20 at 01:28
@EJK - He does not call `getSatisSorumlusuId`. He should see the method definition in the console, not `undefined`. But it depends on how `setCellValue` is called. — ConnorsFan, Jan 02 '20 at 01:40
@ConnorsFan - you are correct. I did not look closely enough. I thought it was a method call, but missed that it was lacking "()". — EJK, Jan 02 '20 at 05:39
Thank you all for your comments. @ConnorsFan you are right, it is expected to print function definition but it doesnt. I have updated my post above please have a look. — Savas Karaduman, Jan 02 '20 at 12:11
One solution to your problem is to define `setCellValue` as an arrow function: `setCellValue = (newData, value, currentRowData) => { ... }`. See the duplicate reference for more details. — ConnorsFan, Jan 02 '20 at 13:22

score 1 · Answer 1 · answered Jan 02 '20 at 09:19

export class CariComponent implements OnInit {

  satisSorumlusuId: number;

constructor(private dataService: DataService) { }

  setCellValue (newData, value, currentRowData) {
    console.log(this.getSatisSorumlusuId()); 
  }

  getSatisSorumlusuId(): number {
    return this.satisSorumlusuId;
  };

  ngOnInit() {
  }

}

getSatisSorumlusuId() is a function that returns a number, so you should be calling it like this.getSatisSorumlusuId();.

For the variable satisSorumlusuId assigned with undefined initially, until you redefine satisSorumlusuId in the constructor or ngOnInit you will be getting undefined only.

I cannot call a function from another function because it is undefined

1 Answers1