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

Question

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?

Answer 1

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.

Answer 2

I normally use 1 because it is most like other languages.

Answer 3

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.

Answer 4

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 ~

Answer 5

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 😉

Answer 6

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

Answer 7

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

Answer 8

Arrow functions !!!!!!!!!!!
Its perfect when U use reactjs

Answer 9

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!

Answer 10

I Recommend to use

1) Function Declaration
function square(x) {
return x * x;
}

Answer 11

I would recommend to use 1... more readable and more comfortable when it's arranged with your another functions...

Answer 12

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.

Answer 13

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.

Answer 14

My motto is: Readability over Conciseness. The code should always be clean and easy for everyone. Option 1! xD

Answer 15

1 st one is better because it's same as a in other programming languages .. we can easily remember syntax ...

Answer 16

Recommended 1 from my side

Answer 17

1 is the best and 4 is the worst

Answer 18

1 is easy

Answer 19

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.

Answer 20

I use 1, 2, and 6

6) Invoked Function
(function(){
return x;
})();