← Back to Roadmap

Arrow Functions

Easy

In plain terms

Arrow functions () => {} have concise syntax and do not bind their own this - they inherit it from the surrounding scope. Use for callbacks and when you need lexical this.

What you need to know

  • •Concise syntax
  • •No own this (lexical)
  • •No arguments object

Try it yourself

Copy the code below and run it in your browser console or a code editor:

const add = (a, b) => a + b;  // implicit return

const double = x => x * 2;  // single param, no parens needed

const greet = () => 'Hello';  // no params

// Multi-line
const sum = (a, b) => {
  const result = a + b;
  return result;
};

// Lexical this
const obj = {
  name: 'Test',
  getName: () => this.name  // this is from outer scope!
};

Learn more

Dive deeper with these trusted resources:

MDNjavascript.infoTutorialsPointW3Schools