Chapter 5: Functions in JavaScript
By Ahmed Thaer
What is a Function?
When I first started coding, my programs got messy quickly. I found myself copying and pasting
the same lines over and over. That’s when I discovered functions. Think of a function as a
mini-program inside your main program: it performs a specific task, and you can “call” (run) it
whenever you need that task done.
Why Use Functions?
● Reusability: Write code once, use it anywhere.
● Organization: Break your program into logical sections.
● Maintainability: Fix bugs in one spot, not everywhere you used the code.
How to Define a Function
There are several ways to define a function in JavaScript, but here’s the most common:
javascript
CopyEdit
function greet() {
console.log('Hello, world!');
}
To run (“call”) this function, just use its name with parentheses:
javascript
CopyEdit
greet(); // Output: Hello, world!
Function Parameters and Arguments
Functions become powerful when you can pass them information.
javascript
CopyEdit
function greet(name) {
console.log('Hello, ' + name + '!');
}
greet('Ahmed'); // Output: Hello, Ahmed!
greet('Jannah'); // Output: Hello, Jannah!
● Parameter: The variable in the function definition (name).
● Argument: The actual value you send in when you call the function ('Ahmed').
Return Values
A function can give back (return) a result, which you can use elsewhere in your code.
javascript
CopyEdit
function add(a, b) {
return a + b;
}
let sum = add(5, 7);
console.log(sum); // Output: 12
Function Expressions and Arrow Functions
There are other, more modern ways to write functions in JavaScript.
Function Expression
javascript
CopyEdit
const sayHi = function() {
console.log('Hi!');
};
sayHi();
Arrow Function (ES6+)
Arrow functions are shorter, and I use them a lot:
javascript
CopyEdit
const multiply = (a, b) => {
return a * b;
};
console.log(multiply(3, 4)); // Output: 12
For single-line functions, you can make them even shorter:
javascript
CopyEdit
const square = x => x * x;
console.log(square(5)); // Output: 25
Default Parameters
You can give your parameters default values:
javascript
CopyEdit
function greet(name = 'friend') {
console.log('Hello, ' + name + '!');
}
greet(); // Output: Hello, friend!
Scope: Where Variables Live
Variables declared inside a function only exist in that function. This is called local scope.
javascript
CopyEdit
function showSecret() {
let secret = 'Hidden!';
console.log(secret); // Works here
}
showSecret();
// console.log(secret); // Error! Not defined outside the function
Variables declared outside any function are global and can be used anywhere.
Why Functions Matter
Almost every real-world JavaScript program uses functions. For example:
● Calculating prices in a shopping cart
● Validating form input
● Responding to button clicks
Quick Practice
1. Write a function that multiplies two numbers and returns the result.
2. Create a function that takes a name as input and returns “Good morning, [name]!”
3. Make an arrow function that squares a number.
Summary
In this chapter, I covered:
● What functions are and why we use them
● How to declare, call, and use functions with parameters and return values
● Function expressions and arrow functions
● The concept of scope
Next up: Objects and Arrays—the main way we organize and manage lots of data in
JavaScript!
