Lesson 13: JavaScript Functions Part 1
Master JavaScript functions with interactive examples and practical applications.
13.1 Introduction to Functions
A JavaScript function is a reusable block of code designed to perform a specific task. Functions are essential building blocks in JavaScript programming, allowing you to organize code, avoid repetition, and create modular applications.
Reusability
Write once, use multiple times throughout your application
Modularity
Break complex problems into smaller, manageable pieces
Easier Debugging
Isolate and test individual components of your code
Performance
Optimize code execution with specialized functions
Example 13.1: Simple Function Declaration
// Function declaration
function greet() {
return "Hello, JavaScript learner!";
}
// Function call
console.log(greet()); // Output: Hello, JavaScript learner!
Function output will appear here
13.2 Function Declaration & Invocation
To create a function, you need to declare it with the function keyword, followed by a name, parentheses, and a code block.
Function Syntax
function name(parameter1, parameter2, ...) {
// code to be executed
}
| Term | Description | Example |
|---|---|---|
| Function Declaration | Creating the function | function sayHello() { ... } |
| Function Invocation | Calling/executing the function | sayHello() |
| Parameters | Variables listed in function declaration | function greet(name) { ... } |
| Arguments | Actual values passed to the function | greet("John") |
| Return Statement | Returns a value from the function | return result; |
13.2.1: Function Invocation Demo
13.3 Parameters & Arguments
Functions can accept input values called parameters. When you call a function, you pass actual values called arguments.
Example 13.2: Function with Parameters
// Function with parameters
function calculateArea(width, height) {
return width * height;
}
// Calling the function with arguments
const area = calculateArea(5, 8);
console.log("Area is: " + area); // Output: Area is: 40
13.3.1: Default Parameters
ES6 introduced default parameters that are used when no argument is provided:
function greet(name = "Guest") {
return `Hello, ${name}!`;
}
console.log(greet()); // Output: Hello, Guest!
console.log(greet("Alice")); // Output: Hello, Alice!
13.4 Return Values
The return statement stops function execution and returns a value to the function caller. Functions without a return statement return undefined.
Example 13.3: Return Statement
// Function to check if a number is even
function isEven(number) {
return number % 2 === 0;
}
// Using the return value
const num = 7;
if (isEven(num)) {
console.log(`${num} is even`);
} else {
console.log(`${num} is odd`); // Output: 7 is odd
}
13.5 Types of Functions
JavaScript supports several ways to define functions:
Function Declaration
Standard function declaration that can be called before it's defined
function add(a, b) {
return a + b;
}
Function Expression
Function assigned to a variable, cannot be called before definition
const multiply = function(a, b) {
return a * b;
};
Arrow Function (ES6)
Compact syntax for writing functions, lexically binds this
const square = (x) => {
return x * x;
};
// Or even shorter:
const square = x => x * x;
13.5.1: Function Type Comparison
13.6 Real-World Applications
Functions are used in virtually every JavaScript application. Here are practical examples:
Example 13.4: Temperature Converter
function celsiusToFahrenheit(celsius) {
return (celsius * 9/5) + 32;
}
function fahrenheitToCelsius(fahrenheit) {
return (fahrenheit - 32) * 5/9;
}
Example 13.5: Future Value Calculator
The future value formula: FV = PV * (1 + r/100)n
function calculateFutureValue(pv, rate, years) {
return pv * Math.pow(1 + rate/100, years);
}