Arrow Functions vs Traditional Functions in JavaScript

Photo by Marija Zaric on Unsplash

For the longest time, JavaScript only had two ways to declare functions. You declared them using the function keyword or by using it as a function expression and assigning it to a variable and invoking it from there. For example, to write a function that doubled a number passed in could look like this:

function square(a){
     return a * a;
}
// or
var square = function(a){
     return a * a;
}
square(2) //returns 4

These function declarations worked fine, for the most part, but had some “gotchas” that could result in some unintentional things happening in your code if you didn’t plan on it.

One of those gotchas is what is typically call “hoisting”. In JavaScript, functions and variable declarations are hoisted to the top of the scope. The concept of scope and context in JavaScript deserve an entire post of its own, but simply put they would be lifted to the top of the closest function declared in. This means code declared before the function or variable can use them. For example, If one were to write code like this code:

greet("Tom"); // "Hello Tom"
function greet(name){
     return "Hello " + name; 
}