Functions | Basic Coding Concepts

Functions are like mini-programs inside your program. They package up code so you can reuse it whenever you need, without writing it again. They're one of the most important concepts in programming!

Why Functions Matter

Imagine you need to calculate the area of rectangles in multiple places. Without functions, you'd copy and paste the same code everywhere. With functions, you write it once and call it whenever you need it.

🏭

Real-World Analogy

A function is like a vending machine. You put something in (input), it does something with it (processing), and gives you something back (output). You don't need to know how it works inside—you just use it!

See How Functions Work

Creating a Function

Here's how you define a basic function:

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

// Call the function
sayHello();  // Outputs: Hello!

The anatomy of a function:

function — The keyword that declares a function
sayHello — The name you give your function
() — Parentheses for parameters (inputs)
Curly braces containing the code to run

Parameters and Arguments

Functions can accept input through parameters. When you call the function, you pass arguments.

// 'name' is a parameter
function greet(name) {
  console.log("Hello, " + name + "!");
}

// "Alice" is an argument
greet("Alice");   // Hello, Alice!
greet("Bob");     // Hello, Bob!

You can have multiple parameters:

function introduce(name, age) {
  console.log(name + " is " + age + " years old.");
}

introduce("Alice", 25);  // Alice is 25 years old.

Try It Yourself

Return Values

Functions can send back a result using return:

function add(a, b) {
  return a + b;  // Sends the result back
}

let result = add(3, 5);  // result is now 8
console.log(result);     // 8

// You can use the return value directly
console.log(add(10, 20));  // 30

💡

Return Stops Execution

When a function hits a return statement, it immediately exits. Any code after return won't run!

function example() {
  return "Done";
  console.log("Never runs!");  // This is unreachable
}

Arrow Functions

Modern JavaScript has a shorter syntax called arrow functions:

// Traditional function
function double(num) {
  return num * 2;
}

// Arrow function
const double = (num) => {
  return num * 2;
};

// Even shorter (for simple functions)
const double = (num) => num * 2;

// All three work the same way!
console.log(double(5));  // 10

function name()

Traditional syntax
Always works
Can be "hoisted"

const name = () =>

Modern syntax
Shorter to write
Different "this" behavior

Default Parameters

You can give parameters default values:

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

greet("Alice");   // "Hello, Alice!"
greet();          // "Hello, friend!" (uses default)

Functions Calling Functions

Functions can call other functions—this is how you build complex programs from simple parts:

function square(n) {
  return n * n;
}

function sumOfSquares(a, b) {
  return square(a) + square(b);
}

console.log(sumOfSquares(3, 4));  // 9 + 16 = 25

Scope

Variables created inside a function are only available inside that function:

function myFunction() {
  let secret = "hidden";  // Only exists inside this function
  console.log(secret);    // Works!
}

myFunction();
console.log(secret);  // Error! 'secret' is not defined

Quick Quiz

Key Takeaways

Functions are reusable blocks of code
Parameters are the inputs a function accepts
Arguments are the actual values you pass in
return sends a value back from the function
Arrow functions are a shorter syntax for functions
Variables inside functions are only accessible within that function (scope)

What's Next?

Now let's learn about arrays—how to store and work with lists of data in your programs!