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}); }
-
Can you please add more context to your code samples (more lines of code around the sample code) ?edi9999– edi99992018-06-18 11:30:56 +00:00Commented Jun 18, 2018 at 11:30
-
There is much more than just the difference of semicolon here. Read this detailed guide: dmitripavlutin.com/6-ways-to-declare-javascript-functionsKartikey Tanna– Kartikey Tanna2018-06-18 11:49:00 +00:00Commented Jun 18, 2018 at 11:49
Add a comment
|
3 Answers
This is more related to Javascript then React itself.
First one is a function expression and semicolons are recommended 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 recommended 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.
Comments
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.
7 Comments
UtkarshPramodGupta
Why should we avoid arrow functions in render method?
devserkan
I wonder that too since I suggest the opposite. Try to avoid bind in render and use function references either to an arrow function or a regular one.
nithinmohantk
It breaks performance optimizations implemented with shouldComponentUpdate and PureComponent, as arrow functions are reallocated on every render (same with using bind). This would make arrow function in Parent to make Child Components to feel new function being sent in on props and rerender.
devserkan
Ok, misunderstood you. You mean avoid arrow functions and binding JSX props in render. This is true but irrelevant what OP asks here. OP asks about semicolons.
nithinmohantk
yes. but he needs to understand the options b/w them to realize the why some ends with semicolon or not. One is a function and other is an arrow function.
|
if we are binding in render then we don't need to end with semicolon Click Me else this.handleClick = this.handleClick.bind(this);
