22-functions

JavaScript Functions are Easy! 📞

📺 Video

JavaScript FUNCTIONS are easy! (12:14)

📝 Description

Functions are sections of reusable code. Declare code once and use it whenever you want. Learn how to create functions, pass arguments, use parameters, and return values.

🎯 What You'll Learn

• Function declaration and syntax
• Calling/invoking functions
• Parameters and arguments
• Return values and the return keyword
• Function reusability
• Building practical functions
• Ternary operator in functions

💡 What is a Function?

From transcript: "A function is a section of reusable code. You declare that code once and you can use it whenever you want. All you have to do is call the function to execute that code."

Benefits of Functions:

• ✅ Reusability - Write once, use many times
• ✅ Organization - Keep code structured and readable
• ✅ Maintainability - Update in one place
• ✅ Flexibility - Accept different inputs via parameters

📝 Basic Function Syntax

// Function Declaration
function functionName() {
    // Code to execute
}

// Function Call
functionName();

🎂 Example 1: Happy Birthday Function

From transcript: "We'll create a function to sing Happy Birthday. Whenever we call this function it's going to sing Happy Birthday."

Without Parameters

function happyBirthday() {
    console.log("Happy Birthday to you!!");
    console.log("Happy Birthday to you!!");
    console.log("Happy Birthday dear you!!");
    console.log("Happy Birthday to you!!");
}

// Call the function
happyBirthday();
// Output:
// Happy Birthday to you!!
// Happy Birthday to you!!
// Happy Birthday dear you!!
// Happy Birthday to you!!

Reusability in action:

happyBirthday();  // Sings once
happyBirthday();  // Sings again
happyBirthday();  // Sings a third time

From transcript: "As many times as I want. In fact that's what a function is - it's a section of reusable code. Reuse it whenever you want. You just have to call it."

📦 Parameters and Arguments

From transcript: "You can send a function some values or variables."

Understanding Parameters vs Arguments

• Parameters - Variables listed in function declaration (placeholders)
• Arguments - Actual values passed when calling the function (data)

From transcript: "These are parameters and what you send the function are arguments."

Happy Birthday with Parameters

function happyBirthday(username, age) {
    console.log("Happy Birthday to you!!");
    console.log("Happy Birthday to you!!");
    console.log(`Happy Birthday dear ${username}!!`);
    console.log("Happy Birthday to you!!");
    console.log(`You are ${age} years old!!`);
}

// Call with different arguments
happyBirthday("BroCode", 25);
// Output:
// Happy Birthday to you!!
// Happy Birthday to you!!
// Happy Birthday dear BroCode!!
// Happy Birthday to you!!
// You are 25 years old!!

happyBirthday("SpongeBob", 30);
// Happy Birthday dear SpongeBob!!
// You are 30 years old!!

happyBirthday("Patrick", 35);
// Happy Birthday dear Patrick!!
// You are 35 years old!!

From transcript: "That's a benefit of passing arguments to a function. When the function receives this data it can do something with it."

⚠️ Parameter Order Matters!

// ❌ Wrong order
function happyBirthday(age, username) {
    console.log(`Happy Birthday dear ${username}!!`);
    console.log(`You are ${age} years old!!`);
}

happyBirthday("Patrick", 37);
// Output: Happy Birthday dear 37!! You are Patrick years old!!

From transcript: "Now the order of the parameters does matter. If I were to switch age and username, here's what happens... With the arguments that you're passing to your function you'll want to be sure that the parameters match up."

🔄 The Return Keyword

From transcript: "We can send some data back to the place in which we call a function, but we need to use this return keyword."

Basic Return Example

function add(x, y) {
    let result = x + y;
    return result;
}

// Store returned value
let answer = add(2, 3);
console.log(answer);  // 5

// Or use directly
console.log(add(2, 3));  // 5

From transcript: "When you return something from a function, after you resolve the function, think of it as becoming whatever is returned. In this case it's our result."

Shorthand Return

// Long version
function add(x, y) {
    let result = x + y;
    return result;
}

// Shorthand version
function add(x, y) {
    return x + y;
}

From transcript: "There is a shortcut too. You don't necessarily need to declare a variable within this function. We could shorten this to return x + y."

🧮 Math Functions

Addition

function add(x, y) {
    return x + y;
}
console.log(add(10, 5));  // 15

Subtraction

function subtract(x, y) {
    return x - y;
}
console.log(subtract(10, 5));  // 5

Multiplication

function multiply(x, y) {
    return x * y;
}
console.log(multiply(10, 5));  // 50

Division

function divide(x, y) {
    return x / y;
}
console.log(divide(10, 5));  // 2

🔢 Example: isEven Function

From transcript: "We'll create a function to determine if a number is even or odd."

Using if/else

function isEven(number) {
    if (number % 2 === 0) {
        return true;
    }
    else {
        return false;
    }
}

console.log(isEven(10));  // true
console.log(isEven(11));  // false
console.log(isEven(12));  // true

From transcript: "If our number modulus 2 - modulus gives you the remainder of any division - if this number divides by two evenly, if this is equal to zero... then let's return the Boolean value true, else we'll return false."

Using Ternary Operator

function isEven(number) {
    return number % 2 === 0 ? true : false;
}

console.log(isEven(12));  // true
console.log(isEven(13));  // false
console.log(isEven(14));  // true

From transcript: "If you would like a shortcut for this you can use the ternary operator."

📧 Example: Email Validation Function

From transcript: "We'll create a function to see if an email is valid."

Using if/else

function isValidEmail(email) {
    if (email.includes("@")) {
        return true;
    }
    else {
        return false;
    }
}

console.log(isValidEmail("BroCode@gmail.com"));  // true
console.log(isValidEmail("ElonMusk.com"));       // false

From transcript: "We'll check to see if our email contains the at character. If our email includes the at character, then we will return true - that is a valid email. They have the at character. Else we will return false."

Using Ternary Operator

function isValidEmail(email) {
    return email.includes("@") ? true : false;
}

console.log(isValidEmail("Zuckerberg@meta.com"));  // true
console.log(isValidEmail("ElonMusk.com"));         // false

💻 Complete Code Example

// Function = A section of reusable code.
//            Declare code once, use it whenever you want.
//            Call the function to execute that code.

function happyBirthday(username, age) {
    console.log("Happy Birthday to you!!");
    console.log("Happy Birthday to you!!");
    console.log(`Happy Birthday dear ${username}!!`);
    console.log("Happy Birthday to you!!");
    console.log(`You are ${age} years old!!`);
}

happyBirthday("BroCode", 25);
happyBirthday("SpongeBob", 30);
happyBirthday("Patrick", 35);

function add(x, y) {
    return x + y;
}

function subtract(x, y) {
    return x - y;
}

function multiply(x, y) {
    return x * y;
}

function divide(x, y) {
    return x / y;
}

function isEven(number) {
    return number % 2 === 0 ? true : false;
}

function isValidEmail(email) {
    if (email.includes("@")) {
        return true;
    }
    else {
        return false;
    }
}

console.log(add(10, 5));           // 15
console.log(subtract(10, 5));      // 5
console.log(multiply(10, 5));      // 50
console.log(divide(10, 5));        // 2
console.log(isEven(40));           // true
console.log(isValidEmail("BroCode@gmail.com"));  // true
console.log(isValidEmail("ElonMusk.com"));       // false

🎯 Function Call Visualization

From transcript: "To call a function you type the function name then you add a set of parentheses. I like to think of the parentheses as two telephones talking to each other - that's how I remember it."

functionName();  // () = two telephones 📞📞

🔍 Key Concepts Summary

Function Declaration

function functionName(parameter1, parameter2) {
    // Code to execute
    return value;  // Optional
}

Function Call

functionName(argument1, argument2);

Parameters vs Arguments

function greet(name) {      // 'name' is a parameter
    console.log(`Hello ${name}`);
}

greet("Alice");             // "Alice" is an argument

Return Statement

function square(num) {
    return num * num;       // Sends value back
}

let result = square(5);     // result = 25

💡 Best Practices

1. Descriptive Names - Use clear, action-based names

   // ✅ Good
   function calculateTotal() { }
   
   // ❌ Bad
   function doStuff() { }

2. Single Responsibility - One function, one task

   // ✅ Good - specific purpose
   function add(x, y) {
       return x + y;
   }

3. Return Early - Exit when condition is met

   function isValidEmail(email) {
       if (!email.includes("@")) {
           return false;
       }
       return true;
   }

4. Consistent Parameters - Keep order logical

   function createUser(name, age, email) {
       // Name first, then age, then email
   }

🎯 Key Takeaways

From transcript: "That's an introduction to functions - it's a section of reusable code. You declare some code once and use it whenever you want. You call the function to execute that code. If you need to send your function some data, you'll need a matching set of arguments and parameters. And you can return something too with the return keyword."

• Functions = Reusable sections of code
• Declare once, use many times
• Call/invoke a function to execute it
• Parameters = placeholders in declaration
• Arguments = actual values passed when calling
• Parameter order matters
• Return sends data back to caller
• Ternary operator can simplify true/false returns
• Functions make code DRY (Don't Repeat Yourself)

🚀 Practice Exercises

Exercise 1: Temperature Converter

// Create a function that converts Celsius to Fahrenheit
function celsiusToFahrenheit(celsius) {
    // Formula: (celsius * 9/5) + 32
    // Your code here
}

Exercise 2: Max of Two Numbers

// Create a function that returns the larger of two numbers
function max(a, b) {
    // Your code here
}

Exercise 3: String Reverser

// Create a function that reverses a string
function reverseString(str) {
    // Your code here
}

Exercise 4: Grade Calculator

// Create a function that returns letter grade based on score
function getGrade(score) {
    // 90+ = A, 80-89 = B, 70-79 = C, etc.
    // Your code here
}

---

Duration: 12:14
Difficulty: Beginner
Category: Functions & Code Organization

⏭️ Next Lesson

JavaScript VARIABLE SCOPE