CODEWITHSUNDEEP
javascriptreactjs
Adeel Imran
Adeel Imran

Reputation: 13966

What is the difference between func with parentheses and one without it

 onHangeChangeQuanity = (opr) => {
    let { number } = this.state;
    if (opr === '+') {
      this.setState({ number: number+1 }, this.onSubmit);
    } else if (opr === '-' && number !== 0) {
      this.setState({ number: number-1 }, this.onSubmit());
    }
 }

onSubmit = () => {
   let { attributeName, typeOfField } = this.props.attribute;
   let { number } = this.state;
   let attr = { attributeName, typeOfField, selectedValues: [ number ] };
   this.props.onHandle(attr);
}

In the above example in my if condition (opr === '+') I call my onSubmit func without parentheses and it works find and show the current state of my number but in the else condition (opr === '-' && number!==0) I use onSubmit() with parentheses in my setState callback and it doesn't update the state like it should.

Can someone please explain the difference between a javascript function that is being called with and without parentheses.

Thankyou.

Upvotes: 0

Views: 292

Answers (5)

Dan Prince
Dan Prince

Reputation: 29989

Because setState is not guaranteed to be synchronous, it accepts a callback function as the second argument, which it will call after it has updated the component's state.

There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

Passing the function as a reference (without parentheses) ensures that your onSubmit method will only be called after the component's state has updated and you can rely on this.state to contain the new value.

Calling the function yourself (with parentheses) means that your onSubmit method will always execute before this this.state has the correct value, because it will run before setState does. If this is intentional behaviour it may make more sense to write it explicitly.

this.onSubmit()
this.setState({ number: number-1 });

Upvotes: 2

wanderer
wanderer

Reputation: 11

Calling a function without parenthesis is referring to the function not what it returns, it is just like assigning and calling it with parenthesis is calling the value of that method, the body of the function executes and may return the required.

Upvotes: 1

Sweeper
Sweeper

Reputation: 271185

With the parentheses, you are writing a function call. Without them, you are simply "referring" to the function.

A function call just executes the contents of the function and may or may not return a value. A function reference can be used juts like any other variable. You can pass it to other functions, assign it to another variable etc.

Why are function references useful?

Some functions, like window.setTimeout, take function references as parameters.

window.setTimeout(someFunc, 1000);

Here someFunc will be executed after 1 second. You don't add the parentheses because what you're saying is "I want this function to be called after some delay". Adding parentheses here would have called the function immediately.

Upvotes: 1

Suren Srapyan
Suren Srapyan

Reputation: 68645

Without parentheses you only access to it's reference. You can use it to pass the reference for example into another function or use it's properties, because every function is also an object. Look at an example

function first(){
   console.log('first');
}

function second(func) { // this get an parameter which is a function
   func(); // And here I call it 
}

second(first); // Here I pass the function's reference
               // And actually call the second with parentheses

With parentheses you execute the body of that function

Upvotes: 1

Christos
Christos

Reputation: 53958

When a function name is followed by parenthesis, it is like we say I want to call the function. While when you pass in one or another place a function name, you just pass a copy of the reference to the function.

function sayHello(){
    console.log('Hello');
}

// Here we call sayHello();
sayHello();

function executeAnotherFunction(func){
    // We request the execution of the function passed.
    func();
}

// Here we pass a reference of sayHello to executeAnotherFunction
executeAnotherFunction(sayHello);

Upvotes: 0

Related Questions