What Are Functions in JavaScript?
A function is a reusable block of code that performs a specific task. Instead of writing the same code multiple times, you write it once in a function and call it whenever needed.
Think of functions like:
- A recipe you can follow again and again
- A TV remote button that performs an action when pressed
- A washing machine that does the same process each time
- A calculator button that always performs the same operation
Why Use Functions?
Functions are fundamental to programming because they:
- Avoid repetition – Write once, use many times
- Organize code – Break large problems into smaller pieces
- Make debugging easier – Fix code in one place
- Improve readability – Named functions explain what the code does
- Enable reusability – Share code across projects
Function Declaration Syntax
javascript
function functionName() {
// Code to execute
}
Components:
- function – Keyword that declares a function
- function Name – Name you give the function (follow camelCase convention)
- () – Parentheses for parameters (empty if none)
- {} – Curly braces contain the code to execute
Example 1: Greeting Function
javascript
// Declaring the function
function sayHello() {
console.log("Hello, World!");
}
// Calling (using) the function
sayHello();
// Output: Hello, World!
What's happening:
- We create a function called
sayHello - Inside it, we have code that prints
Hello, World!
- We call the function by writing its name followed by
() - The code inside runs
Example 2: Multiple Function Calls
javascript
function celebrate() {
console.log("🎉 Congratulations! 🎉");
}
// Call the function multiple times
celebrate();
celebrate();
celebrate();
// Output:
// 🎉 Congratulations! 🎉
// 🎉 Congratulations! 🎉
// 🎉 Congratulations! 🎉
Parameters and Arguments
Parameters allow functions to accept input values, making them more flexible and reusable.
Understanding Parameters vs Arguments
- Parameters – Variables listed in the function declaration (placeholders)
- Arguments – Actual values passed when calling the function
Example :
javascript
function greet(name) { // 'name' is a parameter
console.log("Hello, " + name + "!");
}
greet("Alice"); // "Alice" is an argument
Example 1: Function with One Parameter
javascript
function greetPerson(name) {
console.log("Hello, " + name + "!");
}
greetPerson("Alice"); // Hello, Alice!
greetPerson("Bob"); // Hello, Bob!
greetPerson("Charlie"); // Hello, Charlie!
Example 2: Function with Multiple Parameters
function addNumbers(num1, num2) {
let sum = num1 + num2;
console.log(num1 + " + " + num2 + " = " + sum);
}
addNumbers(5, 3); // 5 + 3 = 8
addNumbers(10, 20); // 10 + 20 = 30
addNumbers(7, 4); // 7 + 4 = 11
Return Statements
The return statement sends a value back from the function to where it was called. This lets functions produce results you can use.
Understanding Return
Without return, a function performs actions but doesn't give you a value back
Example :
javascript
// Without return - just prints
function add(a, b) {
console.log(a + b);
}
add(5, 3); // Prints: 8
// But you can't use the result!
With return, you get a value you can store and use:
// With return - gives back a value
function add(a, b) {
return a + b;
}
let result = add(5, 3); // result = 8
console.log(result); // 8
console.log(add(10, 5)); // 15
Function Scope
Scope determines where variables can be accessed in your code. Understanding scope is crucial for avoiding bugs.
What is Scope?
Think of scope like rooms in a house:
- Variables created inside a room (function) stay in that room
- Variables in the living room (global) can be used anywhere
- Each room can have its own items with the same name
Global Scope
Variables declared outside any function are global - accessible everywhere
Example :
javascript
let globalMessage = "I'm accessible everywhere";
function showMessage() {
console.log(globalMessage); // Can access global variable
}
showMessage(); // I'm accessible everywhere
console.log(globalMessage); // I'm accessible everywhere
Function (Local) Scope
Variables declared inside a function are local - only accessible inside that function.
Example :
javascript
function myFunction() {
let localMessage = "I only exist inside this function";
console.log(localMessage); // Works fine here
}
myFunction(); // I only exist inside this function
console.log(localMessage); // Error! localMessage is not defined
Example 2: Age Calculator
javascript
function calculateAge(birthYear) {
let currentYear = 2024;
let age = currentYear - birthYear;
return age;
}
let myAge = calculateAge(1995);
console.log("Age: " + myAge); // Age: 29
let friendAge = calculateAge(2000);
console.log("Friend's age: " + friendAge); // Friend's age: 24