Skip to content

Arrow functions vs regular functions in JavaScript

How are arrow functions different than regular functions in JS?

Regular functions are the "old school" functions we use since the JavaScript inception:

function run() {
  
}

They can be run directly:

run()

or they can be assigned to a variable:

const run = function run() {
  
}

run()

When you do so, the function can also be anonymous:

const run = function () {
  
}

run()

The only difference is that now in the stack trace that appears when there is an error, you won't see the function name any more.

Arrow functions, introduced in ES6 in 2015, are kinda like this last version of regular functions, because they do not have a name. Never.

The syntax "footprint" is smaller:

const run = () => {
  
}

run()

If we have one parameter, we can omit the parentheses:

const run = param => {
  
}

run()

And if we only have one statement, we can also omit the curly braces:

const run = param => 'running'
run()

In this case, the return value is the string 'running'.

Both arrow functions and regular functions can be used as object methods.

Now comes the biggest difference between those 2 functions, and it's related to how this is bound in a method.

Consider this example:

const car = {
  brand: 'Ford',
  model: 'Fiesta',
  start: function() {
    console.log(`Started ${this.brand} ${this.model}`)
  },
  stop: () => {
    console.log(`Stopped ${this.brand} ${this.model}`)
  }
}

this in the start() method refers to the object itself.

But in the stop() method, which is an arrow function, it doesn't.

this is not bound to the object instance. It points to what this points to in the outer scope.

This implies that arrow functions are not suitable to be used for object methods when you want to access this.

→ Download my free JavaScript Handbook!

THE VALLEY OF CODE

THE WEB DEVELOPER's MANUAL

You might be interested in those things I do:

  • Learn to code in THE VALLEY OF CODE, your your web development manual
  • Find a ton of Web Development projects to learn modern tech stacks in practice in THE VALLEY OF CODE PRO
  • I wrote 16 books for beginner software developers, DOWNLOAD THEM NOW
  • Every year I organize a hands-on cohort course coding BOOTCAMP to teach you how to build a complex, modern Web Application in practice (next edition February-March-April-May 2024)
  • Learn how to start a solopreneur business on the Internet with SOLO LAB (next edition in 2024)
  • Find me on X

Related posts that talk about js: