Functions - Intro to Programming Tutorial

Quick Summary

Functions package logic so you can call it many times. In JavaScript, functions are values, which means you can store them in variables, pass them as arguments, and return them from other functions. This makes JavaScript highly flexible for patterns like callbacks and higher-order functions.

What is a Function?

A function is a reusable block of code that:

Has a name (usually)
Can accept inputs (parameters)
Performs a task
Can return an output

Function Declaration

The traditional way to create a function:

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

const message = greet("Alice"); // "Hello, Alice!"

Function Expression

Store a function in a variable:

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

Arrow Functions (ES6+)

Modern, concise syntax:

// Full arrow function
const greet = (name) => {
  return "Hello, " + name + "!";
};

// Shorthand for single expression
const greet = (name) => "Hello, " + name + "!";

// Single parameter - parentheses optional
const double = n => n * 2;

Parameters and Arguments

// Parameters are placeholders
function add(a, b) {
  return a + b;
}

// Arguments are actual values
add(5, 3); // 5 and 3 are arguments

Default Parameters

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

greet();        // "Hello, Guest"
greet("Alice"); // "Hello, Alice"

Return Values

Functions can return any value
Without return, functions return undefined
return immediately exits the function

Pure Functions

Functions that:

Always return the same output for the same input
Have no side effects (don't modify external state)

// Pure - predictable, testable
const add = (a, b) => a + b;

// Impure - modifies external state
let total = 0;
const addToTotal = (n) => { total += n; };

Try It Yourself

Here's a practical example you can try. Copy this code and run it in your browser's console (press F12 to open developer tools) or in the Code Playground.

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

// Call the function
const area = calculateArea(10, 5); // 50

// Arrow function (modern syntax)
const multiply = (a, b) => a * b;
const square = n => n * n; // Single param, no parentheses needed

// Default parameters
function greet(name = "Guest", greeting = "Hello") {
  return `${greeting}, ${name}!`;
}
console.log(greet());           // "Hello, Guest!"
console.log(greet("Alice"));    // "Hello, Alice!"
console.log(greet("Bob", "Hi")); // "Hi, Bob!"

// Functions can return early
function divide(a, b) {
  if (b === 0) {
    return "Cannot divide by zero";
  }
  return a / b;
}

// Functions as values
const operations = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b,
};
console.log(operations.add(5, 3)); // 8

Key Takeaways

✓Create reusable logic with inputs and outputs.
✓Practice with real code examples to solidify your understanding
✓This concept builds the foundation for more advanced topics