Regarding "return" in methods/function

Hello guys,

I am having a confusion regarding when “return” can and cannot be omitted in method definition especially in class.
Theoretically, all functions including Arrow functions need “return” if it comes with curly braces but I have noticed that in many method definitions it does not provide “return” and it still works.

For example, “greetParent” below for a React application can be written in 4 different ways with/without “return” and all of them worked :

function ChildComponent(props) {    
    return (                        
        <div>
            <button onClick={() => props.greetHandler('child')}>Greet Parent</button>
        </div>
    )
}

class ParentComponent extends Component {

    constructor(props) {
        super(props)

        this.state = {
            parentName: 'Parent'
        }

        this.greetParent = this.greetParent.bind(this)
    }
    // Traditional function with return
    greetParent(childName) {
        return alert(`Hello ${this.state.parentName} from ${childName}`)
    }
    // Arrow function with return 
    greetParent = childName => {
        return alert(`Hello ${this.state.parentName} from ${childName}`)
    }
    // I do not quite understand why "return" can be omitted here?
    greetParent(childName) {
        alert(`Hello ${this.state.parentName} from ${childName}`)
    }
    // Again, I do not quite understand why "return" can be omitted for Arrow syntax here?
    greetParent = childName => {
        alert(`Hello ${this.state.parentName} from ${childName}`)
    }    

    render() {
        return (
            <div>   
                <ChildComponent greetHandler={this.greetParent}/> 
            </div>
        )
    }
}

And particularly for Arrow function, it requires “return” when curly braces are present:

let add100 = (a) => {
  	a + 100;
}
console.log(add100(7))  // undefined

let add100 = (a) => {
  return a + 100;
}
console.log(add100(7))  // 107

Any idea please?
Thank you in advance.

They all return undefined: you aren’t returning a value, so it basically makes no difference how you write it, every one of them returns the same thing (undefined).

Functions can return void, ie not actually return anything, only carry out some side effect (eg console logging, or writing to the DOM, or making the browser do something, or mutating some variable or whatever).

1 Like

Thank you for answers.
I see, so we don’t care the return in these cases I guess so it’s okay.

I often see a handler method like this below without return too so I guess it returns “undefined” here:

    handleTopicChange = event => {
       this.setState({
            topic: event.target.value
        })
    }

What if we added “return” here? Does it still return “undefined” in this case? although we probably don’t care about it.

    handleTopicChange = event => {
      return  this.setState({
            topic: event.target.value
        })
    }

It will return the returned value from the call this.setState(...). It can be undefined or not, depending on what the function returns.

1 Like

Yes, setState changes the internal state of the component, so again makes no difference if you put a return before it or not, the setState function never returns a value.

Conventionally you wouldn’t put a return before it or the alert function or anything else similar, it’s unecessary noise and a little bit confusing when reading the code.

1 Like

I see. Thank you very much for the answers.