CODEWITHSUNDEEP
javascriptreactjs
Sagiv b.g
Sagiv b.g

Reputation: 31024

Call a method in props inside a function with the same name

I have a function in a component that calls another function and both have the same name.
It works, both of the functions run
I would like to know why does it work (see my assumption below)? A followup question, what if i want to call the external function recursively should i use this.myMethod()?
Is this pattern safe to use?

Example: 

myMethod(){
    const {myMethod} = this.props;
    if(typeof myMethod == 'function'){ // i was sure this will check the external myMethod func
        myMethod(); // i was sure it will call the external myMethod func. 
    }
    // what if i want to call to the external "myMethod" func (recursively)?
}

I assume that the engine is searching for a function named myMethod inside the body of external myMethod (lexical scope?) and it finds it.
can anyone confirm this assumption?

EDIT
Just to make my question more clear about how common and safe this pattern is.
Let's say i have a component of Item and it has an onTouch prop of PropTypes.func, i would like to run some internal logic inside my own function and then run the function that received via the props as a callback or something similar.
Should i bother finding a new name to my internal function like onInternalTouch or is it safe to stick with the same name onTouch? 

onTouch(){ // is this common practice?
    const {onTouch} = this.props;
    // ... internal component logic
    onTouch();
}

onInternalTouch(){ // or should i bother finding a new name?
    const {onTouch} = this.props;
    // ... internal component logic
    onTouch();
}

Upvotes: 1

Views: 1901

Answers (1)

Bartek Fryzowicz
Bartek Fryzowicz

Reputation: 6684

Please note that component myMethod method is defined as object (class) method so to call it from any component method you have to use this.myMethod(). There's no possibility that calling myMethod() (without this.) inside any component method will call component method with the same name. If you didn't define myMethod variable inside the method and tried to call it you'd get an error telling that myMethod is not defined. So such code will give you mentioned error:

myMethod(){
   myMethod();
}

When you call a function JS firstly try to find such function defined in closest scope (in your case inside component myMehod method body), if there's no such function JS moves to next (parent) scope (in your case it'd be the same scope in which react component is defined) and tries to find it again and so on.. But it's imporant that component methods are not defined in any of those scopes but are defined as class methods so you have to use this.myMethod to tell JS that you mean method defined on 'this' object. Generally to call any object method you have to use method name associated with an object.
Situation would be different if it wasn't component methods but normal functions. Consider such code:

//here is outer scope
function myMethod() {
    //here is inner scope
    myMethod(); // this will call function defined in outer scope
}

myMethod();

it would give you 'too much recursion' error - there is no myMethod function defined in inner scope so JS uses function defined in outer scope.
If you now override outer function with inner variable with the same name there would be no errors:

//here is outer scope
function myMethod() {
  //here is inner scope
	var myMethod = function() {
		console.log(12);
	}
	myMethod();
}

myMethod();

In above code variable defined in inner scope overrides function defined in outer scope so JS finds myMethod in inner scope and even doesn't try to search for myMethod in outer scope.
Back to you question - yes, if you want to call the external function recursively you have to use this.myMethod().

Question edit update:
As for your question regarding naming practice both options will work. It's just a matter of code readability and good practices. I'd personally use different meaningful names. In your example I'd use e.g. handleTouch for method name and touchCallback for prop name. Generally it's more difficult to understand code using the same names for different functions - you have to pay more attention to grasp what function does and where it comes from (is it component method or function passed as prop?).
Generally it's easy to get confused if you use the same names especially if someone else reads your code. Of course it's totally ok if two or more components have method with the same name if they do similar job but if one function calls another function IMO they should have different names because they have different purpose which should be reflected in their names.

Upvotes: 2

Related Questions