JavaScript gives you more than one way to write a function, which is either flexible or annoying depending on your mood that day. Understanding the differences, especially around arrow functions, will save you real confusion down the line.

The classic function

function greet(name) {
  return "Hello, " + name;
}
console.log(greet("Sam"));

The arrow function

const greet = (name) => {
  return "Hello, " + name;
};

Same behaviour, different syntax. For a one-line function that just returns a value, arrow functions get even shorter, dropping the braces and the return keyword entirely:

const greet = name => "Hello, " + name;
const add = (a, b) => a + b;

Once you get used to reading this shorthand it's genuinely nice — but if it looks like magic right now, that's completely normal, everyone finds it a little dense at first.

The real difference: how "this" behaves

This is the part that actually matters, not just the shorter syntax. Inside a regular function, the value of this can change depending on how the function gets called, which causes no end of confusion. Arrow functions don't have their own this at all — they simply borrow it from whatever code surrounds them. This makes arrow functions genuinely more predictable inside things like event handlers and callbacks, which is a big part of why they took off so fast once JavaScript added them.

Scope: what a function can and can't see

function outer() {
  let secret = "hidden";

  function inner() {
    console.log(secret); // works — inner can see outer's variables
  }

  inner();
}

console.log(secret); // error — secret doesn't exist out here

A variable declared inside a function only exists inside that function, and anything nested within it. Try to use it outside, and JavaScript has no idea what you're talking about. This is scope, and it's one of those ideas that feels abstract until suddenly, usually while debugging something, it clicks completely.

Parameters with default values

function greet(name = "friend") {
  return "Hello, " + name;
}
greet();          // Hello, friend
greet("Sam");     // Hello, Sam

Which style should you use?

Honestly, for most everyday code, arrow functions have become the default choice, especially for short callbacks. Regular functions still earn their keep for methods on objects, and for anywhere you specifically need the traditional, changeable behaviour of this. You'll end up using both — knowing why each exists matters more than picking a side.