JS: JavaScript Functions

Functions in JavaScript are reusable blocks of code that perform a specific task. Modern JavaScript provides three primary syntaxes for defining functions, each suited to different situations.

Function Types in JavaScript
-----------------------------

Function Expression      Arrow Function (Multi)     Arrow Function (Single)
------------------       ----------------------     -----------------------
const fn = function()    const fn = () => {         const fn = () => value;
{ return value; }          return value;
}

Function Expression

A function expression assigns an anonymous function to a variable using the function keyword. It is the classic approach and behaves like a regular function.

const isDavid = function (name) {
  return (name === "David");
};

console.log(isDavid("David")); // true
console.log(isDavid("Alice")); // false

The function is stored in isDavid and can be called like any other function. Function expressions are not hoisted — you cannot call them before they are defined.

Multiline Arrow Function

The arrow function syntax (=>) is a more concise way to write functions, introduced in ES6. A multiline arrow function uses curly braces {} to wrap the function body and requires an explicit return statement.

const isDavid = (name) => {
  return (name === "David");
};

Arrow functions are especially useful for callbacks and when working with arrays:

const logArray = (item, index) => {
  console.log(`${index}: ${item}`);
};

const fruits = ["apple", "banana", "cherry"];
fruits.forEach(logArray);
// 0: apple
// 1: banana
// 2: cherry

Arrow Functions with Multiple Parameters

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

const greet = (firstName, lastName) => {
  const fullName = `${firstName} ${lastName}`;
  return `Hello, ${fullName}!`;
};

Single-Line Arrow Function

When the function body is a single expression, you can omit the curly braces and the return keyword. The expression is returned implicitly.

const isDavid = (name) => name === "David";

console.log(isDavid("David")); // true

With No Parameters

When a single-line arrow function takes no parameters, use empty parentheses ():

const lineBreak = () => console.log("---");

lineBreak(); // logs: ---

Comparing All Three Syntaxes

Using the same logic written in all three forms:

// Function expression
const multiplyFE = function (a, b) {
  return a * b;
};

// Multiline arrow function
const multiplyMA = (a, b) => {
  return a * b;
};

// Single-line arrow function
const multiplySL = (a, b) => a * b;

console.log(multiplyFE(3, 4)); // 12
console.log(multiplyMA(3, 4)); // 12
console.log(multiplySL(3, 4)); // 12

Arrow Functions in Array Methods

Arrow functions shine when used with JavaScript's built-in array methods:

const numbers = [1, 2, 3, 4, 5];

// map — transform each element
const doubled = numbers.map(n => n * 2);
// [2, 4, 6, 8, 10]

// filter — keep elements matching a condition
const evens = numbers.filter(n => n % 2 === 0);
// [2, 4]

// reduce — accumulate a result
const sum = numbers.reduce((total, n) => total + n, 0);
// 15

// find — get the first match
const firstBig = numbers.find(n => n > 3);
// 4

Key Difference: `this` Context

Arrow functions do not have their own this binding — they inherit this from the surrounding lexical scope. Function expressions have their own this.

function Timer() {
  this.seconds = 0;

  // Arrow function: 'this' refers to the Timer instance
  setInterval(() => {
    this.seconds++;
    console.log(this.seconds);
  }, 1000);
}

const timer = new Timer();
// logs: 1, 2, 3, ...

If a regular function were used inside setInterval, this would not refer to the Timer instance, causing unexpected behavior.

Summary

JavaScript gives you three ways to define functions, and knowing when to use each one makes your code cleaner and more readable:

• Function expressions — the classic, versatile approach
• Multiline arrow functions — concise, great for callbacks with multiple lines
• Single-line arrow functions — the most concise form for simple one-expression functions

Arrow functions are the standard in modern JavaScript and TypeScript — get comfortable with them early.