There are many different ways of declaring a function, some end with semicolon others not. I would like to know what the difference is:

A

  addUser = id => {
    this.setState(// ...);
  };

B

selectTask(option) { this.setState({task: option}); }

There are many different ways of declaring a function, some end with semicolon others not. I would like to know what the difference is:

A

  addUser = id => {
    this.setState(// ...);
  };

B

selectTask(option) { this.setState({task: option}); }

• javascript
• reactjs

• Can you please add more context to your code samples (more lines of code around the sample code) ? – edi9999 Commented Jun 18, 2018 at 11:30
• There is much more than just the difference of semicolon here. Read this detailed guide: dmitripavlutin./6-ways-to-declare-javascript-functions – Kartikey Tanna Commented Jun 18, 2018 at 11:49

3 Answers 3

This is more related to Javascript then React itself.

First one is a function expression and semicolons are remended for them since there could be some edge and weird cases we can encounter. Examples:

const foo = function() {
  console.log("first");
};

// Do not bother with this function too much, it is here to mimic our error,
// and does not have to be an arrow function.
(() => console.log("second"))();

What we expect is here to see second as output and if you run this we actually see. What if we omit semicolon in the first expression?

const foo = function() {
  console.log("first");
}

(() => console.log("second"))();

What happens here is since we omit semicolon our second iife function is taken into account as an argument for our first function and our first function is executed but this is not what we intended here.

But, for function declarations this is different.

function foo() {
  console.log("first");
}

(() => console.log("second"))();

Omit the semicolon or do not, the result is the same: We see second as output and this is what we expect. Hence, semicolon is not remended here.

Now, arrow functions are a little bit different about that. Actually they are function expressions and can have two kinds of body type. A concise one which has one single expression and return is explicit. The other one is a body block and needs a return. Now, bear with me since there are different cases here.

const foo = () => console.log("first");


( () => console.log( "second" ) )();

Here we have concise body, a single expression with a semicolon. Everything is as expected, we see "second". But if we omit semicolon:

const foo = () => console.log("first")


( () => console.log( "second" ) )();

it does nothing since there is an explicit return in our arrow function. Now with a regular body block either with semicolon or not:

const foo = () => { console.log("first") }


( () => console.log( "second" ) )();

it is being treated as a function declaration and our result does not change. Actually I'm not quiet sure about my explanation of "treated as a function declaration", if someone corrects me I will be glad to edit my answer.

Option A: is Called Arrow Function Arrow functions don’t redefine the value of this within their function body. This makes it a lot easier to predict their behavior when passed as callbacks and prevents bugs caused the by use of this within callbacks. Since it is arrow function or function expression it needs to end with a semi-colon.

Option B: is Normal Function it requires this and bind to be used in callbacks. It is a function declaration statement, hence there is no need of semicolon.

Important: Avoid arrow functions and bind in render in react.

if we are binding in render then we don't need to end with semicolon Click Me else this.handleClick = this.handleClick.bind(this);