Why are Javascript Functions declared in different ways

Question

Apologies if this seems like a beginner question, I am currently learning Javascript and have come across different ways of structuring function declarations. An example below

function mapStateToProps(state) {
    console.log(state);
}

const mapStateToProps = state => {
    console.log(state);
}

What is the benefit of using one or the other; in which situation would you use one over the other?

Hi @PacketSniffer, this question was answered previously here: https://stackoverflow.com/questions/41454979/any-difference-between-javascript-function-defined-with-const-and-arrow-and-regu take a look! — sheeldotme, Sep 21 '18 at 00:55
Possible duplicate of [var functionName = function() {} vs function functionName() {}](https://stackoverflow.com/questions/336859/var-functionname-function-vs-function-functionname) — sheeldotme, Sep 21 '18 at 00:55
Also, [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions). — pishpish, Sep 21 '18 at 00:56
Possible duplicate of [Arrow function vs function declaration / expressions: Are they equivalent / exchangeable?](https://stackoverflow.com/questions/34361379/arrow-function-vs-function-declaration-expressions-are-they-equivalent-exch) — Kirill Matrosov, Sep 21 '18 at 07:35

score 1 · Accepted Answer · answered Sep 21 '18 at 02:03

1

Arrow functions are the new ES2015 syntax, for me the main difference is changing this context you may read about it here https://medium.com/@thejasonfile/es5-functions-vs-es6-fat-arrow-functions-864033baa1a

answered Sep 21 '18 at 02:03

Alexandr Dobrovolsky

66
1
6

1

could you explain more? instead of post link – Munkhdelger Tumenbayar Sep 21 '18 at 02:05
Ok, when you use `function` keyword the function you've created will have it's own `this`, it will be the same function and if you need to use upper scope this you should use `bind()` method for example ` function getName(){ return this.name; // can not read property name of undefined } ` – Alexandr Dobrovolsky Sep 25 '18 at 17:10
but `getName().bind(this)` will work, arrow functions don't have it's own `this` and you don't need to use `bind` – Alexandr Dobrovolsky Sep 25 '18 at 17:18
also it's more conveniently to pass a callback like () => {} then using `function` keyword – Alexandr Dobrovolsky Sep 25 '18 at 17:20

score 0 · Answer 2 · answered Oct 19 '18 at 17:15

The first example is a function declaration and the second example is a function expression. The second example you provided only serves to provide more concise JavaScript code to the first example and doesn't really capture the idea of your question of when to use ES6 arrow functions over function declarations. In other words your example, is just syntactic sugar, in your examples, nothing is really solved, just more concise code.

A better example is the following:

const team = {
 members: ['Dolly', 'Billy'],
  teamName: 'Hacking Crew',
  teamSummary: function() {
   return this.members.map(function(member) {
     return `${member} is on team ${this.teamName}`;
    });
  }
};

console.log(team.teamSummary());

Run this snippet and you will see the error. Now, this error does not have to be solved with the arrow function, there are a couple of ways to solve it, but your question of in which situation would you use one over the other, this is a good use case for using an arrow function to solve this error.

Before I provide the solution, understand that fat arrow functions make use of what is called the lexical this. I will provide the refactor below and then unpack my previous sentence:

const team = {
 members: ['Dolly', 'Billy'],
  teamName: 'Hacking Crew',
  teamSummary: function() {
   return this.members.map((member) => {
     return `${member} is on team ${this.teamName}`;
    });
  }
};

console.log(team.teamSummary());

Lexical means the placement of this term depends on how its interpreted or how its evaluated. So, depending on where we are placing the word this will change when using a fat arrow function.

When we use a fat arrow function and make reference to this inside of it this is automatically set equal to this in the surrounding context which in this code snippet is the team object.

So if lieu of using .bind(this) and having to cache a reference to this, you can replace fat arrow function as a solution.

Why are Javascript Functions declared in different ways

2 Answers2