The process of invoking a function within another function in TypeScript Angular

Question

The process of invoking a function within another function in TypeScript Angular

Just starting out with Angular 2, I've written the following code in my Angular project:

export class TestClass {

    constructor() {
        this.initMap();
    }

    initMap() {
        this.marker.addListener('dragend', this.onMarkerDrop);
    }

    onMarkerDrop(event) {
        this.functionTwo(); // I keep getting an error that says 'this.functionTwo' is not a function
    }

    functionTwo() {

    }
}

Note: Before reaching out for help, I did some research on Stack Overflow and found these relevant links:

'this.function' is not a function - OO JS

this.function is not a function :typescript

Angular - this.function is not a function

Based on what I read, it seems like using arrow functions to call other member functions might be the solution. However, I'm unsure of how to implement their suggestions in my own code. Perhaps I misunderstood something.

I'm seeking guidance on how to properly call `this.functionTwo()` using an arrow function from `functionOne()`. Your assistance would be greatly appreciated.

Thank you for your support.

javascript angular google-maps typescript ionic-framework

Answer 1

Answer №1

When updating your code, remember to use it like this:

this.marker.addListener('dragend', this.onMarkerDrop.bind(this));
// OR
this.marker.addListener('dragend', ($event) => this.onMarkerDrop($event));

Your code is expected to work perfectly:

functionOne() {
    this.functionTwo(); // Error occurs - this.functionTwo is not a function
}

functionTwo() {
    alert('function2');
}

Please refer to the following code for further clarification

functionOne() {
    // Error will be thrown - this.functionTwo is not a function
    setTimeout(function(){ // normal function
        this.functionTwo();  
    })

    // No error will occur
    setTimeout(() => { // fat arrow
        this.functionTwo(); // Error occurs - this.functionTwo is not a function        
    })
}

functionTwo() {
    alert('function2');
}

Why using a fat arrow works:

'this' is captured from its lexical scope. Hence, no need for bind() or that = this.

With Normal functions, you are required to use bind() or that = this

Answer 2

When updating your code, remember to use it like this:

this.marker.addListener('dragend', this.onMarkerDrop.bind(this));
// OR
this.marker.addListener('dragend', ($event) => this.onMarkerDrop($event));

Your code is expected to work perfectly:

functionOne() {
    this.functionTwo(); // Error occurs - this.functionTwo is not a function
}

functionTwo() {
    alert('function2');
}

Please refer to the following code for further clarification

functionOne() {
    // Error will be thrown - this.functionTwo is not a function
    setTimeout(function(){ // normal function
        this.functionTwo();  
    })

    // No error will occur
    setTimeout(() => { // fat arrow
        this.functionTwo(); // Error occurs - this.functionTwo is not a function        
    })
}

functionTwo() {
    alert('function2');
}

Why using a fat arrow works:

'this' is captured from its lexical scope. Hence, no need for bind() or that = this.

With Normal functions, you are required to use bind() or that = this

Answer 3

Answer №2

When passing your function onMarkerDrop as a callback, be aware that the context can change and this may have a different value. To maintain the right context, consider using arrow functions or binding.

this.marker.addListener('dragend', this.onMarkerDrop.bind(this));

Alternatively,

this.marker.addListener('dragend', ($event) => this.onMarkerDrop($event));

Answer 4

When passing your function onMarkerDrop as a callback, be aware that the context can change and this may have a different value. To maintain the right context, consider using arrow functions or binding.

this.marker.addListener('dragend', this.onMarkerDrop.bind(this));

Alternatively,

this.marker.addListener('dragend', ($event) => this.onMarkerDrop($event));

The process of invoking a function within another function in TypeScript Angular

Answer №1

Answer №2

Similar questions

Creating a modal window when a link is clicked in an MVC application

jsonwebtoken does not fetch a token

Exploring the utilization of functions beyond module exports

What is the best approach to simultaneously update an array using multiple threads in a Node.js environment?

Performing Vue CLI Global Upgrade

Executing Selenium WebDriver to interact with a hidden element

The npm package installation process encountered difficulties in accessing the Chart.Js library

Has anyone figured out the issue with Uplodify? It suddenly ceased to function

Disabling ESLint errors is not possible within a React environment

Debug errors occur when binding to computed getters in Angular 2

How to implement a distinct click event for input elements containing a pipe character in Angular

Utilizing the Bootstrap portfolio section, I aim to eliminate the 'ALL' tab and ensure a category is selected

Ways to minimize the file size of an Angular2 project

Tips for implementing camera animation to focus on a specific area of a gltf model when it is clicked in three.js

Display a string of text containing multiple interactive links

Turn off browser image caching

How can I maintain the selected state of checkbox and radio button in ReactJS after page refresh?

The State Hook error "state variable is not defined" arises due to an issue with the state declaration in

"What is the process for developing a Web-component with Vue and typescript that can be used in

What is the best way to fetch and convert information from an API to display on a website?