Arrow function vs function vs const

Question

Can someone explain to me, or direct me to some documentation that describes the differences in the following implementations?

I can't wrap my head around when to use which style of some custom function.

From what I can understand A and B are roughly the same, but ES6 allows arrow functions. Is there a reason to use one of the other. How does C fit in?

const solutionA = () => {
  return <p>A Text</p>
}

function solutionB(){
   return <p>B Text</p>
}

const solutionC = (
   <p>C Text</p>
)

Answer 1

In react you create components.

There are some ways to create component, one of them is functional component (a function that returns a component - so at the very least, return the html tags from your functions).

const solutionA = () => { return <p>A Text</p> }; 

function solutionB() { return <p>B Text</p> }

const solutionC; //later

than in your JSC files you can use components like <solutionA /> or <solutionB />.

As for solutionC it doesn't returns a component, but you can use it inside a component like this:

const solutionC = (<p>C Text</p>);

function solutionD() { return (<div> Hello {solutionC} </div>)

Since solutionC is not a component but a variable holding html tag, you can use JSX syntax ({}) and use it as a variable.

So this solutionD component will result in this HTML:

<div> 
  Hello <p>C Text</p>
</div>

Answer 2

The main difference between function declaration and function expression is that in the first case you can call the function even before you have defined it. On the other hand, since a function expressions is stored in a variable, you cannot call the function if its name has not been defined first. There are many other differences and you can read about them in this MDN article.

Regarding arrow functions I'd say that their only benefit is in making the code shorter, but only in particular cases. Here's an example where it shortens the function from 5 rows to just 1 while making it more readable even:

Before

function (myObject) {
    return givenArray.every( function (cell) {
        return cell === myObject);
    });
};

After

myObject => givenArray.every(cell => cell === myObject);

This function can be read as: "Checks if every element of the givenArray is equal to myObject".

Generally, I'd reduce the benefits of array functions in three cases:

• In functions that only have one return statement; your example can be shortened to: const solutionA = () => <p>A Text</p>
• In functions that consist of only one condition that returns a boolean.
• In functions that are used as input by another function.

You can also read here for more info about arrow function expression.

Answer 3

I do not know about the C one, but normal functions and arrow functions are almost the same things but with just a few differences.

1. You cannot use this keyword in arrow functions.
2. You cannot get the list of arguments passed in arrow function as you can in a normal function.
3. Normal functions are callable as well as constructible i.e. you can use new keyword with normal functions, but arrow functions can only be called.

Answer 4

when you use const before your function, it implies that this function could not change, you can do not use it and so, you can redefine your function or assign a variable to that name somewhere in your code! so it is common to use const before the functions name. About defining the function prefix like function test = ... it is not useful in react anymore. but I totally recommend using const to prevent any possible reusage of that variable name. Also, the arrow function is relatively similar to the conventional function. However, personally prefer to use the arrow function. for more info see this: https://dmitripavlutin.com/differences-between-arrow-and-regular-functions/

Answer 5

while both regular and arrow function work similar in manner but some differences are there arrow functions do not have their own this. and argument objects are not available in arrow functions, but are available in regular functions