You've seen functions written the traditional way, but if you look at any modern codebase, you'll see => everywhere. These are arrow functions. They aren't just a "shorthand" to save a few keystrokes; they actually behave differently in a couple of key ways that will save you from some massive headaches later on.

To show you how they work, let's build a simple price calculator for a store that applies a percentage discount to a list of items.

Starting with a standard function

I'll start by writing a basic function to calculate a discounted price. I'm using a standard function expression here just so we have a baseline to compare against.

const calculateDiscount = function(price, discount) {
  return price - (price * discount);
};

console.log(calculateDiscount(100, 0.2)); // 80

It works, but it's a bit wordy. We have the function keyword, the curly braces, and the explicit return statement. For a one-liner like this, it feels like a lot of overhead.

Cleaning up the syntax

Now, let's convert this to an arrow function. I'll strip out the function keyword and place the "fat arrow" after the parameters.

const calculateDiscount = (price, discount) => {
  return price - (price * discount);
};

Notice that the logic hasn't changed, but the visual noise is gone. I personally find this much easier to scan when I'm reading through a large file.

Going full minimalist with implicit returns

Here is where arrow functions get really powerful. Since my function only does one thing—returns a value—I can remove the curly braces and the return keyword entirely. This is called an implicit return.

const calculateDiscount = (price, discount) => price - (price * discount);

That's it. One line. If you have a function that just transforms data and hands it back, this is the way to go. Just remember: the moment you add those curly braces back in, the implicit return disappears, and you must use the return keyword again, or your function will return undefined.

Hitting the 'this' wall

I want to put this calculator inside a "Store" object to keep things organized. I'll try to use an arrow function for a method that calculates the total for a cart. Watch what happens here—I'm making a common mistake.

const store = {
  taxRate: 0.07,
  calculateTotal: (price) => {
    return price + (price * this.taxRate);
  }
};

console.log(store.calculateTotal(100)); // NaN

Wait, why did that return NaN? Because this.taxRate is undefined. Here is the deal: arrow functions do not have their own this context. They inherit this from the surrounding scope (in this case, the global window or module), not from the object they are defined in.

If you need a function to act as an object method and access properties of that object, you have to go back to the traditional function syntax. Let me fix that:

const store = {
  taxRate: 0.07,
  calculateTotal(price) {
    return price + (price * this.taxRate);
  }
};

console.log(store.calculateTotal(100)); // 107

So, the rule of thumb I use is: use arrow functions for almost everything—especially callbacks and data transformation—but stick to regular functions for object methods.

📋 Practical Task

Build a Temperature Converter Utility

Create a small utility object called tempConverter. It should contain the following:

• A property offset: 32.
• A method toFahrenheit(celsius) (written as a regular function) that adds the offset to the celsius value.
• A standalone arrow function called celsiusToKelvin that takes a celsius value and implicitly returns it plus 273.15.

Test both functions by logging the results to the console.