JS - Arrow Functions

If you are just getting comfortable with JavaScript, you might have noticed a funny-looking piece of code that looks like this: =>. This is called an Arrow Function.

When you first see them, arrow functions can look a little confusing! It is completely normal to feel like you just learned how to write a function the "normal" way, and now JavaScript is throwing a curveball at you. But don't worry—arrow functions are simply a shorter, cleaner way to write regular functions. They help you write less code and make your work look incredibly modern.

Let's break them down step-by-step so you can start using them today!

The Basic Difference: Normal vs. Arrow

The biggest advantage of arrow functions is that they get rid of unnecessary boilerplate (the repetitive words you have to type over and over, like the word function).

Let's look at a simple math operation—adding two numbers together.

The Normal Way:

function addNumbers(a, b) {
  return a + b;
}

console.log(addNumbers(5, 5)); // Output: 10

The Arrow Function Way: To turn this into an arrow function, we remove the word function and place a "fat arrow" => after the parentheses.

const addNumbers = (a, b) => {
  return a + b;
};

console.log(addNumbers(5, 5)); // Output: 10

Note: We usually save arrow functions inside variables (using const or let) so we can call them by name later!

Parameter Rules

Arrow functions give us some cool shortcuts depending on how many arguments (parameters) we are passing in.

Multiple Parameters

If you have two or more parameters, you must use parentheses ().

const greetPerson = (firstName, lastName) => {
  return "Hello " + firstName + " " + lastName + "!";
};

Exactly ONE Parameter

If your function only takes exactly one parameter, you are allowed to drop the parentheses entirely. This makes your code look super clean!

// Look! No parentheses around 'name'!
const greet = name => {
  return "Welcome, " + name + "!";
};

Zero Parameters

If your function doesn't take any parameters at all, you must use empty parentheses ().

const sayHi = () => {
  return "Hi there!";
};

Implicit Return vs. Explicit Return

This is where arrow functions truly shine.

Explicit Return: If your function has curly braces {}, you must use the word return to send data back. You are explicitlytelling the computer what to return.

const multiply = (a, b) => {
  return a * b; // Explicit return
};

Implicit Return: If your function is very short and only has one line of code, you can delete the curly braces {} AND the word return. The arrow function will automatically return whatever is on that line! This is called an implicit return.

// One line, no curly braces, no 'return' word!
const multiply = (a, b) => a * b; 

console.log(multiply(4, 5)); // Output: 20

Why Use Arrow Functions?

1. Better Readability: As you saw with the implicit return, you can turn 3 lines of code into just 1 line. This is the modern standard for writing JavaScript.

2. Great for Array Methods: Remember map() and filter()? Arrow functions make them look incredibly neat.

3. Behind the Scenes: Arrow functions handle something called the this keyword differently than normal functions. You don't need to worry about the deep details of this right now, but just know that arrow functions fix a lot of confusing bugs that used to happen in older JavaScript code!

Practice Assignment

1. Write a normal function to calculate square of a number

2. Rewrite it using arrow function

3. Create an arrow function that returns whether a number is even or odd

4. Use arrow function inside map() on an array

Solutions

// Classic JS function to get square of a number
function getSquareClassic(num) {
  return num * 2;
}

// JS Arrow function to get square of a number
const getSquareArrow = (num) => num * 2

// JS Arrow function to find given number is even or odd
const isEvenOrOdd = (num) => {
  if(num % 2 == 0) return "even"
  return "odd"
}

// Using Arrow function on array
let nums = [1, 2, 3]
let doubles = nums.map((num) => num * 2)
console.log(doubles)