JavaScript Functions - Guided Notes

⚡ What Are Functions?

Functions are _______________ blocks of code that can be _______________ multiple times.

Why Use Functions?

Write _______________, use many times
Keep code _______________ and organized
Easier to _______________ and debug
Avoid _______________ code

💡 Think of functions like: A recipe you can follow over and over to get the same result!

🔬 Anatomy of a Function

function _________(_________) {
    // Function body
    return _________;
}
        

Component	Purpose
`function`	_________________________
Function Name	_________________________
Parameters	_________________________
Function Body { }	_________________________
`return`	_________________________

📥 Parameters vs Arguments

// Define function with PARAMETER
function favoriteAnimal(_________) {
    return animal + " is my favorite animal!";
}

// Call function with ARGUMENT
favoriteAnimal(_________);
        

Parameter: _________________________________

Argument: _________________________________

Memory Trick:
📌 Parameter = Placeholder (in definition)
📌 Argument = Actual value (when calling)

📤 Return Values

The return statement:

Sends a value _______________ from the function
_______________ the function execution
Makes the function result _______________

With vs Without Return

Without Return	With Return
Function performs action	Function produces value
Result is `undefined`	Result can be stored/used
Side effects only	Can be chained/composed

🔒 Function Scope

Scope determines where _______________ can be accessed.

Scope Rules:

Global Scope: Variables declared _______________ functions
Function Scope: Variables declared _______________ functions
Block Scope: Variables declared inside _______________

let globalVar = "I'm global!";

function myFunction() {
    let localVar = _______________;
    console.log(globalVar);  // Works? _____
    console.log(localVar);   // Works? _____
}

console.log(globalVar);  // Works? _____
console.log(localVar);   // Works? _____
        

📝 Types of Functions

Type	Syntax	Key Feature
Function Declaration	`function name() {}`	_______________
Function Expression	`const name = function() {}`	_______________
Arrow Function	`const name = () => {}`	_______________

💪 Practice Exercises

Exercise 1: add7

Write a function that takes one number and returns that number + 7

function add7(_________) {
    _________________________________
}

console.log(add7(5));  // Should output: _____
            

Exercise 2: multiply

Write a function that takes 2 numbers and returns their product

function multiply(_____, _____) {
    _________________________________
}

console.log(multiply(3, 4));  // Should output: _____
            

Exercise 3: capitalize

Write a function that capitalizes only the first letter of a string

function capitalize(str) {
    return str[0].___________() + 
           str.slice(1).___________();
}
            

Exercise 4: lastLetter

Write a function that returns the last letter of a string

function lastLetter(str) {
    return str[_______________];
}
            

🌍 Real World Functions

Complete these common real-world function patterns:

Email Validation

function isValidEmail(email) {
    return email.includes('_____') && 
           email.includes('_____');
}
        

Format Currency

function formatPrice(price) {
    return '_____' + price.toFixed(_____);
}
        

Calculate Age

function calculateAge(birthYear) {
    const currentYear = new Date()._______________();
    return _________________________________;
}
        

⭐ Best Practices Checklist

✅ DO:

☐ Use _______________ function names
☐ Keep functions _______________ and focused
☐ _______________ values instead of just console.log
☐ Use _______________ instead of global variables

❌ DON'T:

☐ Make functions too _______________
☐ Use _______________ names
☐ Forget to _______________ values
☐ Modify _______________ variables inside functions

🎯 Key Concepts Review

What are functions useful for?
_________________________________________
How do you invoke (call) a function?
_________________________________________
What's the difference between parameters and arguments?
_________________________________________
_________________________________________
What is function scope?
_________________________________________
What happens after a return statement?
_________________________________________
When should you use arrow functions?
_________________________________________

📚 The Call Stack

When functions call other functions, JavaScript uses a _______________ to keep track of execution order.

function first() {
    console.log("First start");
    second();
    console.log("First end");
}

function second() {
    console.log("Second");
}

first();
        

Output order:

_______________
_______________
_______________

📝 Additional Notes

Use this space for any additional notes during the lecture: