DEV Community

loading...

Traditional Functions or Arrow Functions in Javascript?

jharteaga profile image Jose Arteaga ・1 min read

Recently, I started my Web Dev journey, and these days I have been reading about functions in Javascript. I've noticed that there are many ways to declare a function. Two of them caught my attention though, which are Traditional Functions and Arrow Functions.

I have read about them and in my understanding, I have to take into consideration the following:

Traditional Functions Arrow Functions
No matter where you declare
and call the function,
Hoisting is the key.
The order matters. Declare it
into a variable and then call it.
Once you declare it,
you won't lose it.
The code seems cleaner than a
traditional declaration.
Once you override the variable
where the function lives, it's over.

So, I would like to put on the table this topic in order to clarify my mind a little bit more about it, and comprehend the best use case for each of them.

Which one do you usually use when you code functions in Javascript?

Discussion (11)

pic
Editor guide
Collapse
thomasstep profile image
Thomas Step

The order matters. Declare it
into a variable and then call it.

I might be incorrectly interpreting what you're saying, but have you heard of IIFE? developer.mozilla.org/en-US/docs/G...
You can create a function and immediately call it while storing the result in a variable.

Collapse
jharteaga profile image
Jose Arteaga Author

Exactly! It was more related to hoisting. I mean, there must be an error if I call the function expression before its declaration. Otherwise with traditional functions it won't happened.

By the way, thanks for the information about IIFE, I will read up on it.

Collapse
thomasstep profile image
Thomas Step

I definitely misunderstood the first time through so I apologize for that.

Thread Thread
jharteaga profile image
Jose Arteaga Author

There's no problem Thomas! Thank you for your response and help.

Collapse
savagepixie profile image
SavagePixie

I think the author was referring to the fact that function expressions aren't hoistered.

Collapse
edreeseg profile image
Ed Reeseg

I use them pretty interchangeably these days - I like the traditional syntax for how self-explanatory it is (though, these days, I think most people are just as familiar with ES6 arrow syntax).

As Ben mentioned previously, one of the main draws of arrow syntax has to do with how it interacts with the this keyword. It does not generate its own context for this, but rather inherits the context of the environment in which it was created.

For things like React class components, this can be a godsend.

class Test extends React.Component {
  constructor(props){
    this.log = this.log.bind(this);
  }
  log(){
    console.log(this);
  }
  render(){
    return // Whatever
  }
}

vs.

class Test extends React.Component {
  log = () => console.log(this);
  render(){
    return // Whatever
  }
}

Of course, with more people being familiar with the convenience of Hooks, this is a bit less relevant. Still good to note.

Collapse
jharteaga profile image
Jose Arteaga Author

Right! I was reading more about it and I found what you mentioned about the this keyword. I'm not familiar yet with this concept, but I will read up on it. For sure there should be an advantage using the arrow syntax. Thanks Ed!

Collapse
savagepixie profile image
SavagePixie • Edited

Once you override the variable
where the function lives, it's over.

If you assign them to a constant, you don't run the risk of overriding them. In general, it's a good idea to always use the keyword const if you want to store your function expressions.

Generally I favour expressions over declarations because they are shorter to type. When written as callbacks, they also seen clearer to me.

Collapse
jharteaga profile image
Jose Arteaga Author

Interesting! You're right! I forgot about const. That's a good one! Thanks for the advice.

Collapse
blindfish3 profile image
Ben Calder

This seems to be a recurring question. The most important purpose of arrow functions is actually to do with maintaining scope.

Collapse
jharteaga profile image
Jose Arteaga Author

Thanks Ben for sharing your article! It is well-explained! I will deep into it and understand it.