+ 119

4 ways to declare functions in JavaScript, which one to use?

1) Function Declaration function square(x) { return x * x; } 2) Function Expression const square = function (x) { return x * x; } 3) Arrow Function Expression const square = (x) => { return x * x; } 4) Concise Arrow Function Expression const square = x => x * x; Which one is better? Which one you use?

19th Apr 2018, 11:09 AM
vardanator - avatar
103 Answers
+ 135
I suggest the 1st one because it's easy to understand. Most programmers miss this part - code readability. "Even an amateur can write code but only the best writes a code which is understandable by everyone." This goes to everyone - You should understand the code even when you look at it after some years. I learnt this the hard way. I thought of sharing this knowledge.
19th Apr 2018, 4:14 PM
Harish - avatar
+ 47
I normally use 1 because it is most like other languages.
19th Apr 2018, 11:27 AM
John Wells
John Wells - avatar
+ 29
well it's 1 because its more general.for me the worst is 4,due to difficulty in readability. edit::also illd ignore both 3 and 4 at all costs due to the fact that some browsers or devices do not support es6.
19th Apr 2018, 12:01 PM
᠌᠌Brains[Abidemi] - avatar
+ 29
Choosing between 1 or 2 : 1) * It's the standard way. * If you want your function to be hoisted (Moved at the top of the scope). In this way, you can use it before you even declare it. Example: const a = square(5); //.... Some lines of code .... function square(x) { .... } 2) * Don't want your function to be hoisted. * Gaining the ability to use `const` instead of `var` (as in your example), so that your function cannot be altered. If you want to use Arrow functions instead (or any other ES6 feature), use it. However, you should know that ES6 is NOT supported YET in all browsers. (Like Android 4.4 or lower WebView). The difference between 3 and 4 is trivial. In 4, the return keyword can be omitted because it's the only expression in the function. Hope I Helped ~
19th Apr 2018, 6:39 PM
MIZO PRO (ハムザ)
MIZO PRO (ハムザ) - avatar
+ 26
Depends mostly on ones coding style. However be careful arrow functions can not be bound. I've had a few occasions with JQuery and arrow functions 😉
22nd Apr 2018, 6:40 PM
Nikolay Nachev
Nikolay Nachev - avatar
+ 22
Function declaration and function expression are similar save that function expression will not get hoisted. so if you try to call it before that declaration it will be an type error or reference error depending if you use var or const/let. Both Arrow functions are similar. But this keyword behaves differently inside them. It's lexically bound rather than dynamically. #If you don't know this keyword. https://codeburst.io/javascript-the-keyword-this-for-beginners-fb5238d99f85 And I use the 1st one or IIFE if i want to execute the function immediately. Not much familiar with the arrow functions it can get a little bit confusing else it's an elegant syntax can help in that, you don't need to write function keyword. https://developer.mozilla.org/en-US/docs/Glossary/IIFE
19th Apr 2018, 12:09 PM
Lord Krishna
Lord Krishna - avatar
+ 20
1. FUNCTION DECLARATIONS when I need hoisting 2. FUNCTION EXPRESSION I use it because there are few module patterns that utilizes it well, as they are convenient to pass around as arguments, and define functions on the go ( see declaration Vs expression code) 3. ES6 ARROW NOTATION must be used when using callbacks ( functions in arguments), like in map, forEach i.e higher order functions, simplifies the readability and syntax 4. ES6 ARROW NOTATION ( COMPACT) is just a shorter variation of 3rd when we have single argument and just a return statement. in es6 arrow notation , u can write this anonymous function function (a) { return a *2} also like this a => a*2; or a = > { return a*2;} or ( a) => { return a*2;} () and {} depends on single argument and single return statement respectively so in multiple arguments () becomes mandatory, and in multiple function statements {} becomes mandatory. https://code.sololearn.com/W7WssZ8FiIKs/?ref=app https://code.sololearn.com/W7Pwe3r62yhG/?ref=app
19th Apr 2018, 10:30 PM
Morpheus - avatar
+ 19
Arrow functions !!!!!!!!!!! Its perfect when U use reactjs
19th Apr 2018, 1:01 PM
Tigran Harutyunyan
Tigran Harutyunyan - avatar
+ 14
I have been using mostly the first way too for my codes so far. Because of what John said. I have used the second way a couple of times; I find it elegant... I am not going anywhere near the 3rd and 4th, not even at gunpoint!
19th Apr 2018, 11:42 AM
cyk - avatar
+ 13
I Recommend to use 1) Function Declaration function square(x) { return x * x; }
20th Apr 2018, 6:51 PM
Sadaam Linux
Sadaam Linux - avatar
+ 9
I would recommend to use 1... more readable and more comfortable when it's arranged with your another functions...
19th Apr 2018, 3:59 PM
‎Dael Winograd
‎Dael Winograd - avatar
+ 8
I've used all 4 methods (mostly 1st as stated previously) and like concise code so the 4th is better than the 3rd, if I have to use one of them. However, I comment fully so code readability isn't needed because the comments will totally explain it.
19th Apr 2018, 11:52 PM
John Wells
John Wells - avatar
+ 7
the normal way is 1. the second is needed if you say func2 = func1 with the first method you can't declare one variable to the value of type 'function' of a different variable! 3 and 4 are for an easy in line way of making a new value of type function. for example setIntervall() needs a function-typed value as argument. if we don't need the function anywhere else, why declaring a new variable. so we need a simple way of making lambda functions. if you have a very simple statement, you don't want to bother with returning. So you have the easy way number 3. if you need more than one line, you use 4.
19th Apr 2018, 4:45 PM
eine person
+ 7
My motto is: Readability over Conciseness. The code should always be clean and easy for everyone. Option 1! xD
20th Apr 2018, 1:50 PM
Samuel Pimenta
Samuel Pimenta - avatar
+ 7
1 st one is better because it's same as a in other programming languages .. we can easily remember syntax ...
20th Apr 2018, 2:52 PM
RAJ PATIL - avatar
+ 7
Recommended 1 from my side
22nd Apr 2018, 7:36 AM
Baltazarus - avatar
+ 6
1 is the best and 4 is the worst
19th Apr 2018, 4:59 PM
coder223322 - avatar
+ 6
1 is easy
20th Apr 2018, 2:43 AM
Kunal Kumar
Kunal Kumar - avatar
+ 5
I would usually use 1 to define normal functions; readability, as already mentioned. I would also use 3 when passing a callback to a function on the server side, because only the server needs to be updated to support ES6 (ahem, Node.js?). 4 is useful and generally readable when using it for a simple statement, like in the example.
19th Apr 2018, 11:37 PM
LunarCoffee - avatar
+ 5
I use 1, 2, and 6 6) Invoked Function (function(){ return x; })();
20th Apr 2018, 2:47 AM
Amethyst Animion
Amethyst Animion - avatar