Functions

What is a Function?

A function is a reusable block of code that performs a specific task. Instead of writing the same code repeatedly, you define a function once and call it whenever you need it.

Functions are one of the most important concepts in programming. They allow you to organise, reuse, and test your code effectively.

Function Declarations

A function declaration uses the function keyword followed by a name, parentheses for parameters, and a code block:

function greet(name) {
  return "Hello, " + name + "!";
}

const message = greet("Amara");
console.log(message); // "Hello, Amara!"

Function declarations are hoisted — JavaScript moves them to the top of their scope before execution, so you can call them before they appear in the code:

sayHello(); // Works even though the function is defined below

function sayHello() {
  console.log("Hello!");
}

Function Expressions

A function expression assigns an anonymous function to a variable:

const multiply = function(a, b) {
  return a * b;
};

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

Function expressions are NOT hoisted, so you must define them before calling them.

Arrow Functions

Arrow functions are a concise ES6 (ECMAScript 2015) syntax for writing functions:

// Traditional function
function add(a, b) {
  return a + b;
}

// Arrow function — same behaviour, shorter syntax
const add = (a, b) => {
  return a + b;
};

// Even shorter — implicit return for single-expression bodies
const add = (a, b) => a + b;

console.log(add(3, 7)); // 10

For single-parameter functions, you can also omit the parentheses:

const double = n => n * 2;
console.log(double(6)); // 12

Arrow functions are widely used in modern JavaScript, especially with array methods like map and filter.

Parameters and Default Values

Parameters are placeholders for the values you pass into a function (called arguments). You can give parameters default values that are used if no argument is provided:

function createGreeting(name, language = "English") {
  if (language === "French") {
    return `Bonjour, ${name}!`;
  }
  return `Hello, ${name}!`;
}

console.log(createGreeting("Fatima"));           // "Hello, Fatima!"
console.log(createGreeting("Pierre", "French")); // "Bonjour, Pierre!"

Return Values

The return statement sends a value back from the function to the caller. A function without return returns undefined:

function calculateArea(width, height) {
  return width * height;
}

const area = calculateArea(10, 5);
console.log(area); // 50

function doNothing() {
  // No return statement
}
console.log(doNothing()); // undefined

A function stops executing as soon as it hits a return statement.

Scope

Scope determines where a variable is accessible. JavaScript has three kinds of scope:

Global scope — variables declared outside any function, accessible everywhere:

const appName = "CareerEx"; // Global

function showApp() {
  console.log(appName); // Accessible inside functions
}

Function scope — variables declared inside a function, only accessible within that function:

function calculate() {
  const result = 42; // Function-scoped
}
// console.log(result); // ReferenceError: result is not defined

Block scope — variables declared with let or const inside a block ({}), only accessible within that block:

if (true) {
  let blockVar = "only here";
  const alsoBlock = "same";
}
// console.log(blockVar); // ReferenceError

Functions as First-Class Citizens

In JavaScript, functions are first-class values — they can be stored in variables, passed as arguments to other functions, and returned from functions:

// Passing a function as an argument
function applyOperation(a, b, operation) {
  return operation(a, b);
}

const sum = (x, y) => x + y;
const product = (x, y) => x * y;

console.log(applyOperation(5, 3, sum));     // 8
console.log(applyOperation(5, 3, product)); // 15

This pattern — passing functions as arguments — is called a callback and is used extensively in JavaScript for events, array methods, and asynchronous code.

Key Takeaways

• Function declarations are hoisted; function expressions and arrow functions are not
• Arrow functions provide a concise syntax and are preferred in modern JavaScript
• Parameters with default values handle cases where arguments are not provided
• The return statement sends a value back; functions without return give undefined
• Variables have global, function, or block scope depending on where they are declared
• Functions are first-class values in JavaScript and can be passed as arguments

Practice Exercise

1. Write a function declaration called celsiusToFahrenheit that takes a temperature in Celsius and returns the Fahrenheit equivalent (formula: F = C * 9/5 + 32)
2. Rewrite the same function as an arrow function
3. Write a function called formatCurrency with parameters amount and currency = "USD" that returns a formatted string like "$45.00 USD"
4. Call applyOperation with your own add and subtract functions