Functions

Functions are a fundamental building block in any programming language. They allow you to reuse code and organize your program into smaller, manageable chunks. In this module, you will learn how to declare and call functions, about parameters and return values, and also how to utilize arrow functions and closures in JavaScript.

Defining Functions

There are various ways to define a function in JavaScript. Which method you choose is up to you, but be cautious of hoisting, a JavaScript behavior in which variable and function declarations are moved to the top of their containing scope during the compilation phase.

Traditional Function Declaration:

This is the most standard way of defining a function. It uses the function keyword.

function add1(a, b) {
    return a + b;
}

Function Expressions:

Here, you assign a function to a variable. The function can be named or anonymous.

let add2 = function (a, b) {
    return a + b;
};

Constructor Function:

This method uses the Function constructor to create a new function. However, this is not a common approach due to concerns about security and performance.

let add3 = new Function("a", "b", "return a+b;");

Avoid Function Constructor

The Function constructor should generally be avoided because:

It’s slower than other methods
The code string is not parsed until runtime
It can be a security risk (similar to eval())
It’s harder to optimize by JavaScript engines

Use function declarations or expressions instead.

Arrow Functions:

Introduced in ES6, arrow functions provide a more concise syntax for writing functions. They can either have a full body or a shorthand body if only one expression is present.

Long Form:

let add4 = (a, b) => {
    return a + b;
};

Short Form:

let add5 = (a, b) => a + b;

Demonstrating the Functions:

When you run each of these functions with arguments 1 and 1, they will all return 2.

console.log(add1(1, 1)); // 2
console.log(add2(1, 1)); // 2
console.log(add3(1, 1)); // 2
console.log(add4(1, 1)); // 2
console.log(add5(1, 1)); // 2

A key note on hoisting: Only the declarations made using the function keyword, like add1, are hoisted to the top of the scope. Function expressions, like add2, are not hoisted, which means you have to define them before you can call them. Arrow functions are also not hoisted.

Hoisting in JavaScript

What is Hoisting?

Hoisting is a JavaScript mechanism where variable and function declarations are moved to the top of their containing scope before the code execution begins.
It’s a default behavior of JavaScript interpreters to move all the declarations to the top of the script or function scope.

Types of Hoisting:

Variable Hoisting:
- Declarations using var are hoisted, but their initializations are not.
- Variables declared with let and const are also hoisted but remain in a temporal dead zone until their declaration line is executed.
Function Hoisting:
- Function declarations are fully hoisted (both the declaration and the function body).
- Function expressions are not hoisted, especially when assigned to variables declared with let or const.

Examples:

Variable Hoisting:

console.log(myVar); // undefined (due to hoisting)
var myVar = 5;
console.log(myVar); // 5

The first console.log prints undefined because the declaration of myVar (but not its initialization) is hoisted.

Function Hoisting:

greet(); // "Hello, world!"
function greet() {
    console.log("Hello, world!");
}

This works even though the call to greet() appears before the function declaration, thanks to function hoisting.

Implications:

Hoisting can lead to unexpected behaviors, especially for beginners.
Understanding hoisting is crucial for proper function and variable scoping.
Best practice is to declare variables and functions at the top of their scope to avoid confusion.

Note:

Only declarations are hoisted, not the initializations or assignments.
Understanding hoisting helps in debugging issues related to scope and declaration order in JavaScript.

Understanding Arrow Functions

Arrow functions, introduced in ES6 (ECMAScript 2015), provide a more concise syntax for defining functions in JavaScript. They are especially beneficial in scenarios where function context (this) is essential. Arrow functions not only bring about a more compact syntax but also solve some challenges tied to the dynamic nature of this in JavaScript.

Syntax:

The arrow function is characterized by the => operator.

Historical Context:

Arrow functions can be likened to the lambda functions in mathematics and other programming languages. The name “lambda” comes from Alonzo Church’s lambda calculus, a system of mathematical logic.

Rules for Arrow Functions:

If a function has only one argument, parentheses around the argument can be omitted. Otherwise, they are required.
If the function body consists of just one expression, curly braces {} can be omitted, and the value of the expression is implicitly returned.
Arrow functions don’t bind their own this. They inherit it from the enclosing function or context.

Arrow Function Syntax Variations:

// No parameters - parentheses required
let greet = () => "Hello";

// One parameter - parentheses optional
let double = x => x * 2;
let doubleAlt = (x) => x * 2; // Also valid

// Multiple parameters - parentheses required
let add = (a, b) => a + b;

// Single expression - implicit return
let square = x => x * x;

// Multiple statements - braces and explicit return required
let calculate = (a, b) => {
    let sum = a + b;
    return sum * 2;
};

// Returning an object - wrap in parentheses to avoid confusion with block
let createUser = (name, age) => ({ name: name, age: age });
// Or with shorthand property names
let createUserShort = (name, age) => ({ name, age });

Classic Function vs. Arrow Function

Consider the behavior of the this keyword in traditional vs. arrow functions:

In classic functions:

let o1 = new Object();
o1.f1 = function() {
    console.log(this); // refers to the o1 object
    let f2 = function() {
        console.log(this); // 'this' changes context; typically refers to the global object or is undefined in strict mode
    };
    f2();
};
o1.f1();

In the traditional function above, the inner function f2 has its own binding of this, which can often lead to unexpected behaviors.

Now, using arrow functions:

let o1 = new Object();
o1.f1 = function() {
    console.log(this); // refers to the o1 object
    let f2 = () => {
        console.log(this); // inherits 'this' from parent function, so still refers to o1
    };
    f2();
};
o1.f1();

In the arrow function version, the inner function f2 doesn’t have its own this binding. Instead, it inherits the this from the enclosing function, leading to more predictable behaviors.

Real-world example - event handlers:

class Counter {
    constructor() {
        this.count = 0;
    }

    // Problem with traditional function
    startBad() {
        setInterval(function() {
            this.count++; // 'this' is undefined or global, not the Counter instance!
            console.log(this.count); // NaN or error
        }, 1000);
    }

    // Solution with arrow function
    startGood() {
        setInterval(() => {
            this.count++; // 'this' correctly refers to Counter instance
            console.log(this.count); // 1, 2, 3, ...
        }, 1000);
    }
}

let counter = new Counter();
counter.startGood(); // Works as expected

Key Takeaways:

Arrow functions are more concise than traditional function expressions.
They do not bind their own this, arguments, super, or new.target. Instead, they always inherit from the parent scope.
They are not suitable for every use case, especially when defining methods in classes or objects where you need to access object properties via this.
Arrow functions cannot be used as constructors with the new keyword.
They also don’t have a prototype property or methods like .call(), .apply(), and .bind().
Use arrow functions for callbacks and functional programming, but use regular functions for object methods.

Function Parameters

JavaScript provides several modern ways to work with function parameters, making functions more flexible and code more readable.

Default Parameters (ES6)

Before ES6, you had to manually check for undefined parameters. Now you can set default values directly in the parameter list:

// Old way
function greetOld(name) {
    name = name || "Guest";
    console.log("Hello, " + name);
}

// Modern way with default parameters
function greet(name = "Guest") {
    console.log("Hello, " + name);
}

greet();           // "Hello, Guest"
greet("Alice");    // "Hello, Alice"
greet(undefined);  // "Hello, Guest"
greet(null);       // "Hello, null" (null is not replaced!)

// Default parameters can reference earlier parameters
function createUser(name, role = "user", active = true) {
    return { name, role, active };
}

console.log(createUser("Alice"));           // { name: "Alice", role: "user", active: true }
console.log(createUser("Bob", "admin"));    // { name: "Bob", role: "admin", active: true }

// Default can be an expression
function addTimestamp(message, time = new Date()) {
    return `[${time.toISOString()}] ${message}`;
}

// Default can use other parameters
function calculateArea(width, height = width) {
    return width * height;
}

console.log(calculateArea(5));    // 25 (square)
console.log(calculateArea(5, 3)); // 15 (rectangle)

Rest Parameters (ES6)

Rest parameters allow you to represent an indefinite number of arguments as an array:

// Gather remaining arguments into an array
function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3));       // 6
console.log(sum(1, 2, 3, 4, 5)); // 15

// Rest parameter must be last
function logWithPrefix(prefix, ...messages) {
    messages.forEach(msg => console.log(`${prefix}: ${msg}`));
}

logWithPrefix("INFO", "Server started", "Port 3000", "Ready");
// INFO: Server started
// INFO: Port 3000
// INFO: Ready

// Combining with normal parameters
function createMessage(title, author, ...tags) {
    return {
        title,
        author,
        tags: tags
    };
}

let post = createMessage("Hello", "Alice", "javascript", "tutorial", "beginner");
console.log(post);
// { title: "Hello", author: "Alice", tags: ["javascript", "tutorial", "beginner"] }

Rest parameters vs arguments object:

// Old way with arguments object
function sumOld() {
    let total = 0;
    for (let i = 0; i < arguments.length; i++) {
        total += arguments[i];
    }
    return total;
}

// Modern way with rest parameters (preferred)
function sumNew(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}

// Rest parameters are actual arrays with all array methods
function example(...args) {
    console.log(Array.isArray(args)); // true
    args.forEach(arg => console.log(arg)); // Works!
}

// arguments is array-like but not an array
function exampleOld() {
    console.log(Array.isArray(arguments)); // false
    // arguments.forEach(...) // Error! No forEach method
}

Destructuring Parameters (ES6)

You can destructure objects and arrays directly in parameter lists:

// Object destructuring in parameters
function displayUser({ name, age, email }) {
    console.log(`Name: ${name}, Age: ${age}, Email: ${email}`);
}

let user = { name: "Alice", age: 30, email: "alice@example.com" };
displayUser(user);
// Name: Alice, Age: 30, Email: alice@example.com

// With default values
function createConfig({ host = "localhost", port = 3000, secure = false }) {
    return `${secure ? "https" : "http"}://${host}:${port}`;
}

console.log(createConfig({ host: "example.com" }));
// http://example.com:3000

console.log(createConfig({ host: "example.com", secure: true }));
// https://example.com:3000

// Array destructuring
function getCoordinates([x, y, z = 0]) {
    return { x, y, z };
}

console.log(getCoordinates([10, 20]));     // { x: 10, y: 20, z: 0 }
console.log(getCoordinates([10, 20, 30])); // { x: 10, y: 20, z: 30 }

// Nested destructuring
function displayAddress({ user: { name }, address: { city, country } }) {
    console.log(`${name} lives in ${city}, ${country}`);
}

let data = {
    user: { name: "Alice" },
    address: { city: "Copenhagen", country: "Denmark" }
};
displayAddress(data);
// Alice lives in Copenhagen, Denmark

Combining modern parameter features:

function createProduct(
    name,
    { price = 0, currency = "USD" } = {},
    ...tags
) {
    return {
        name,
        price,
        currency,
        tags
    };
}

console.log(createProduct("Laptop"));
// { name: "Laptop", price: 0, currency: "USD", tags: [] }

console.log(createProduct("Laptop", { price: 999 }, "electronics", "computers"));
// { name: "Laptop", price: 999, currency: "USD", tags: ["electronics", "computers"] }

Arguments in JavaScript

In JavaScript, functions are highly flexible when it comes to handling arguments. Understanding how arguments are passed and accessed can help write more dynamic and adaptive functions.

Pass-by-Value and Pass-by-Reference

JavaScript always passes arguments to functions by value, but this behavior can seem different depending on whether the argument is a primitive type (like a number or string) or an object (like an array or another function).

Primitive types:

When you pass a primitive type to a function, JavaScript passes a copy of that value. Any changes made to the parameter inside the function won’t affect the original value outside the function.

function f1(a) {
    a = 200;
}
let b = 100;
console.log(b); // 100
f1(b);
console.log(b); // 100 (unchanged)

Objects:

When you pass an object to a function, JavaScript passes a reference to that object. This means if the object is altered inside the function, the original object outside of the function is affected too, because both refer to the same location in memory.

function f2(dato) {
    dato.setFullYear(2000);
}
let d = new Date();
console.log(d.toLocaleDateString()); // current date
f2(d);
console.log(d.toLocaleDateString()); // current date but year = 2000

// More examples
function modifyArray(arr) {
    arr.push(4); // Modifies original array
}

let numbers = [1, 2, 3];
modifyArray(numbers);
console.log(numbers); // [1, 2, 3, 4]

// But reassignment doesn't affect original
function reassignArray(arr) {
    arr = [10, 20, 30]; // Creates new reference, doesn't affect original
}

let nums = [1, 2, 3];
reassignArray(nums);
console.log(nums); // [1, 2, 3] (unchanged)

Dynamic Nature of Function Arguments

Even if a JavaScript function expects a specific number of arguments, it won’t enforce this. It allows calling functions with more or fewer arguments than declared.

function f1(a, b, c) {
    console.log(`a=${a}, b=${b}, c=${c}`);
}

// All of these are perfectly valid
f1();           // a=undefined, b=undefined, c=undefined
f1(1);          // a=1, b=undefined, c=undefined
f1(1, 2);       // a=1, b=2, c=undefined
f1(1, 2, 3);    // a=1, b=2, c=3
f1(1, 2, 3, 4); // a=1, b=2, c=3 (extra argument ignored)

The arguments Object

Every traditional function in JavaScript has access to a special object named arguments. This object acts like an array, containing all the arguments passed to the function. It’s beneficial when the number of arguments passed to a function is uncertain or can change.

function f1(a, b, c) {
    // arguments is essentially an array-like object
    let ar = Array.from(arguments);
    console.log(ar.join(" "));
    // Can also use it directly with indices
    console.log(arguments[0], arguments[1], arguments[2]);
}

f1();                // ""
f1(1);               // "1"
f1(1, 2);            // "1 2"
f1(1, 2, 3);         // "1 2 3"
f1(1, 2, 3, 4);      // "1 2 3 4"
f1(1, 2, 3, 4, 5);   // "1 2 3 4 5"

// Practical example - flexible sum function
function sum() {
    let total = 0;
    for (let i = 0; i < arguments.length; i++) {
        total += arguments[i];
    }
    return total;
}

console.log(sum(1, 2, 3));       // 6
console.log(sum(1, 2, 3, 4, 5)); // 15

Array-like nature of arguments:

While the arguments object behaves much like an array and has a length property, it does not possess all the methods of an array, such as map, filter, or reduce. To make use of these methods, it’s common practice to convert arguments into a genuine array, as shown above with Array.from(arguments).

Limitations with arrow functions:

The arguments object is not available within arrow functions. If you need to access arguments in an arrow function, you’ll need to rely on named or rest parameters.

// Traditional function - arguments works
function traditional() {
    console.log(arguments); // Works
}

// Arrow function - no arguments object
let arrow = () => {
    console.log(arguments); // ReferenceError: arguments is not defined
};

// Solution: Use rest parameters
let arrowWithRest = (...args) => {
    console.log(args); // Works and is a real array!
};

Modern Alternative: Rest Parameters

In modern JavaScript (ES6+), rest parameters are preferred over the arguments object:

// Old way
function sumOld() {
    return Array.from(arguments).reduce((a, b) => a + b, 0);
}

// Modern way (preferred)
function sum(...numbers) {
    return numbers.reduce((a, b) => a + b, 0);
}

Rest parameters provide a genuine array directly, work with arrow functions, and are more explicit about the function’s variadic nature.

References to Functions in JavaScript

JavaScript is a function-oriented language with dynamic typing. This trait offers a multitude of possibilities, both advantages and challenges. One key feature of JavaScript is the ability to reference functions and pass them around like any other data type. This allows for great flexibility in code structuring and behavior.

Function Assignments and References

When you define a function in JavaScript, that function can be assigned to a variable or even passed to another function as an argument. A function can also be returned from another function. These characteristics make higher-order functions possible, leading to more functional programming patterns in JavaScript.

Let’s explore this concept with the following example:

let f1 = (a, b) => a + b;

// Invoking the function
let r1 = f1(1, 1);

// Referencing the function (no parentheses = no call)
let r2 = f1;

// Invoking the referenced function
let r3 = r2(1, 1);

console.log(r1); // 2
console.log(r2); // [Function: f1]
console.log(r3); // 2

// Functions can be stored in arrays
let operations = [
    (a, b) => a + b,
    (a, b) => a - b,
    (a, b) => a * b,
    (a, b) => a / b
];

console.log(operations[0](10, 5)); // 15 (addition)
console.log(operations[1](10, 5)); // 5 (subtraction)
console.log(operations[2](10, 5)); // 50 (multiplication)
console.log(operations[3](10, 5)); // 2 (division)

The function f1 adds two numbers together. You can invoke it directly as with r1, or you can assign it to another variable (like r2) and then invoke that variable as a function, as demonstrated with r3.

Array Functions and Functional Programming

Array methods in JavaScript, especially those introduced with ES6, encourage functional programming patterns. They accept callback functions as arguments, allowing for a highly customizable and concise codebase.

Consider the following example, where the array is sorted using various sorting methods:

let a = [1, 5, 7, 10, 3, 8];

// Defining a sorting function
let s1 = function (a, b) {
    return a - b;
};

// Take a copy of the array and sort it
let a1 = a.slice(0).sort(s1); // [1, 3, 5, 7, 8, 10]

let a2 = a.slice(0).sort(function (a, b) {
    return a - b;
}); // [1, 3, 5, 7, 8, 10]

let a3 = a.slice(0).sort((a, b) => a - b); // [1, 3, 5, 7, 8, 10]

console.log(a1);
console.log(a2);
console.log(a3);

The array is copied and then sorted using different sorting functions. You can use named functions, anonymous functions, or arrow functions.

Returning Function References

Functions in JavaScript can return other functions, further emphasizing its function-oriented nature. This can lead to dynamic behaviors based on runtime conditions.

let add = (a, b) => a + b;
let sub = (a, b) => a - b;

let f = () => {
    let r = Math.floor(Math.random() * 10 + 1); // random number between 1-10
    if (r < 5) return add;
    else return sub;
};

console.log(f()(3, 2)); // Outputs either 5 (addition) or 1 (subtraction)

The function f randomly returns a reference to either the add or sub function. Once returned, the chosen function is immediately invoked with the values 3 and 2.

Moreover, instead of returning existing functions, you can define and return new functions on-the-fly:

let f = () => {
    let r = Math.floor(Math.random() * 10 + 1); // random number between 1-10
    if (r < 5) return (a, b) => a + b;
    else return (a, b) => a - b;
};

console.log(f()(3, 2)); // Outputs either 5 or 1

Practical example - function factories:

// Create specialized functions based on configuration
function createMultiplier(factor) {
    return (number) => number * factor;
}

let double = createMultiplier(2);
let triple = createMultiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

// Create validators
function createValidator(minLength) {
    return (text) => text.length >= minLength;
}

let validatePassword = createValidator(8);
let validateUsername = createValidator(3);

console.log(validatePassword("12345"));   // false
console.log(validatePassword("12345678")); // true
console.log(validateUsername("ab"));       // false
console.log(validateUsername("abc"));      // true

This demonstrates the power and flexibility of JavaScript’s function-oriented nature. Whether you’re referencing, passing, or returning functions, understanding these principles is crucial for writing versatile JavaScript code.

Immediately Invoked Function Expression (IIFE)

IIFE, pronounced as “iffy”, stands for Immediately Invoked Function Expression. It’s a design pattern in JavaScript wherein a function is executed as soon as it’s defined. This pattern is particularly useful when trying to avoid polluting the global namespace, as all the variables used inside the IIFE are not visible outside its scope.

Why use IIFE?

Data Privacy:

Everything inside an IIFE is in its own scope, meaning it can’t be accessed from the outside world.

Avoid Global Scope Pollution:

By encapsulating variables or functions within an IIFE, you prevent them from cluttering up the global scope.

To Make Variables and Functions Private:

If you want a function or variable to disappear after its initial use, an IIFE is a great tool.

Syntax and Examples:

The primary characteristic of an IIFE is that it’s a function wrapped in parenthesis and then invoked immediately after.

Arrow Function IIFE:

let f1 = (() => {
    console.log("f1"); // f1
})();

Traditional Function IIFE:

let f2 = (function () {
    console.log("f2"); // f2
})();

Passing Arguments to IIFE:

let f3 = (function (a) {
    console.log("f3 med " + a); // f3 med 1
})(1);

Async IIFE:

This pattern can also be applied to async functions. It’s particularly useful when wanting to use await at the top level of a script or module.

let f4 = (async function () {
    let response = await fetch("https://dawa.aws.dk/kommuner/");
    let json = await response.json();
    console.log(json); // kommuner i DK
})();

Practical examples:

// Creating a private counter
let counter = (function() {
    let count = 0; // Private variable

    return {
        increment: function() {
            count++;
            return count;
        },
        decrement: function() {
            count--;
            return count;
        },
        getCount: function() {
            return count;
        }
    };
})();

console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.getCount());  // 2
// console.log(count); // ReferenceError: count is not defined

// Initialization code that doesn't pollute global scope
(function() {
    let tempData = "This won't be accessible outside";
    console.log("Initializing application...");
    // Setup code here
})();

// Modern alternative with block scoping
{
    let tempData = "Block-scoped variable";
    console.log("Modern initialization");
}

Modern alternatives to IIFE

With ES6 modules and block scoping (let/const), the need for IIFEs has decreased:

// Old way - IIFE for privacy
var module = (function() {
    var privateVar = "secret";
    return {
        getSecret: function() { return privateVar; }
    };
})();

// Modern way - ES6 module
// In module.js:
let privateVar = "secret";
export function getSecret() { return privateVar; }

// Or just use block scope
{
    let privateVar = "secret";
    // Use it here
}
// privateVar is not accessible here

However, IIFEs are still useful for:

Top-level await in non-module scripts
Creating isolated scopes in inline scripts
Legacy code compatibility

Key points:

Always remember to wrap the function in parentheses. This is what makes it an expression, which can then be invoked immediately.
IIFEs are not suitable for every situation. It’s often more practical to use them in parts of the application where you want to keep things private or isolated.
With the rise of modules in modern JavaScript, the need for IIFEs has decreased, but they are still useful in certain scenarios.

Closures in JavaScript

What is a Closure?

A closure is a combination of a function bundled together with references to its surrounding state (the lexical environment). In simpler terms, a closure gives you access to an outer function’s scope from an inner function.

Why are Closures Useful?

Data Encapsulation:

They allow for data encapsulation and private variables. This is a key principle in object-oriented programming.

Dynamic Function Generation:

Closures can be used to generate functions dynamically based on certain parameters.

Maintaining State:

They can be used to maintain state in situations where state is important, such as event handlers or callbacks.

How Closures Work

In JavaScript, when you define a function inside another function, the inner function has access to the variables declared in the outer function. Even if the outer function has finished its execution, the inner function still retains access to those variables. This is the essence of a closure.

Examples

function outerFunction(outerVariable) {
    return function innerFunction(innerVariable) {
        console.log('Outer Variable:', outerVariable);
        console.log('Inner Variable:', innerVariable);
    }
}

const newFunction = outerFunction('outside');
newFunction('inside');
// Outer Variable: outside
// Inner Variable: inside

In the example above, newFunction is a closure that encompasses both the innerFunction and the string 'outside'.

When you call newFunction('inside'), the console logs both the outer variable ('outside') and the inner variable ('inside'). The outer function has already executed and returned the inner function, but the inner function still has access to outerVariable.

More Practical Use: Creating Private Variables

One common use of closures in JavaScript is to emulate private variables, which the language does not natively support.

function createCounter() {
    let count = 0; // Private variable

    return {
        increment: function() {
            count++;
        },
        decrement: function() {
            count--;
        },
        getCount: function() {
            return count;
        }
    };
}

const counter = createCounter();
counter.increment();
console.log(counter.getCount()); // 1
counter.increment();
counter.increment();
console.log(counter.getCount()); // 3
counter.decrement();
console.log(counter.getCount()); // 2

// count is not directly accessible
console.log(counter.count); // undefined

In the above example, the variable count is not directly accessible from outside the createCounter function. It can only be modified using the methods returned by the function.

More practical examples:

// Function factory with closures
function createGreeting(greeting) {
    return function(name) {
        return `${greeting}, ${name}!`;
    };
}

let sayHello = createGreeting("Hello");
let sayHi = createGreeting("Hi");

console.log(sayHello("Alice")); // "Hello, Alice!"
console.log(sayHi("Bob"));      // "Hi, Bob!"

// Event handler with closures
function setupButtons() {
    let buttons = document.querySelectorAll('button');

    for (let i = 0; i < buttons.length; i++) {
        buttons[i].addEventListener('click', function() {
            console.log(`Button ${i} clicked`); // 'i' is captured by closure
        });
    }
}

// Caching/memoization with closures
function createCache() {
    let cache = {};

    return function expensiveOperation(n) {
        if (n in cache) {
            console.log('Returning cached result');
            return cache[n];
        }

        console.log('Computing result');
        let result = n * n; // Simulate expensive operation
        cache[n] = result;
        return result;
    };
}

let cachedSquare = createCache();
console.log(cachedSquare(5)); // Computing result, 25
console.log(cachedSquare(5)); // Returning cached result, 25

Key Takeaways:

Function Scope:

Closures highlight the fact that in JavaScript, functions have access to variables outside of their immediate lexical scope.

Memory Considerations:

Closures can lead to over-consumption of memory if not handled correctly, because closed-over variables are not garbage-collected until all references to the inner function are gone.

function createHeavyClosure() {
    let largeArray = new Array(1000000).fill('data'); // 1 million elements

    return function() {
        // This closure keeps largeArray in memory
        console.log(largeArray[0]);
    };
}

let heavy = createHeavyClosure();
// largeArray is still in memory, even though createHeavyClosure finished
heavy();

Powerful Tool:

Closures are a powerful tool in JavaScript, allowing for a variety of advanced patterns, including functional programming constructs, private data, and dynamic function generation.

Common use cases:

Creating private variables
Function factories
Event handlers
Callbacks with persistent state
Partial application and currying
Module patterns

Callback Functions in JavaScript

What is a Callback?

A callback function, often referred to as just “callback,” is a function that is passed into another function as an argument. This passed function can then be executed or “called back” at a later time or upon some specific event within the outer function.

Why are Callbacks Used?

Asynchronous Operations:

JavaScript, especially in web environments, often deals with operations that don’t complete immediately (e.g., fetching data from a server or waiting for a user input). Callbacks help manage these asynchronous operations by specifying what should happen once the operation is completed.

Higher-Order Functions:

Functions that take other functions as arguments or return them as results are called higher-order functions. Callbacks allow for the creation of flexible and reusable higher-order functions.

Customization:

They allow specific details of an operation to be parameterized. For instance, array methods like forEach, map, and filter accept callback functions to customize processing of elements.

Examples

1. Simple Callback

function greet(name, callback) {
    console.log('Hello, ' + name);
    callback();
}

greet('Alice', function() {
    console.log('Greeting completed for Alice.');
});
// Hello, Alice
// Greeting completed for Alice.

2. Asynchronous Callback

function fetchData(url, callback) {
    // Simulate fetching data with a timeout
    setTimeout(function() {
        console.log('Data fetched from ' + url);
        callback();
    }, 2000);
}

fetchData('https://example.com', function() {
    console.log('Callback executed after data fetching.');
});
// After 2 seconds:
// Data fetched from https://example.com
// Callback executed after data fetching.

3. Array Methods with Callbacks

const numbers = [1, 2, 3, 4, 5];

// forEach - execute function for each element
numbers.forEach(function(num) {
    console.log(num);
});

// map - transform each element
const squares = numbers.map(function(num) {
    return num * num;
});
console.log(squares); // [1, 4, 9, 16, 25]

// filter - select elements
const evens = numbers.filter(function(num) {
    return num % 2 === 0;
});
console.log(evens); // [2, 4]

// reduce - accumulate values
const sum = numbers.reduce(function(total, num) {
    return total + num;
}, 0);
console.log(sum); // 15

Callback Hell (or Pyramid of Doom)

While callbacks are powerful, they can lead to problems when used excessively, especially in asynchronous code. Multiple nested callbacks can create a scenario commonly referred to as “callback hell” due to its hard-to-read and hard-to-manage structure.

fetchData('https://api.example1.com', function() {
    fetchData('https://api.example2.com', function() {
        fetchData('https://api.example3.com', function() {
            console.log('All data fetched.');
        });
    });
});

To mitigate this problem, developers use patterns and utilities like named functions, modularization, Promises, and async/await.

Modern Alternatives

Promises:

Promises provide a cleaner way to handle asynchronous operations:

function fetchData(url) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('Data fetched from ' + url);
            resolve();
        }, 1000);
    });
}

fetchData('https://api.example1.com')
    .then(() => fetchData('https://api.example2.com'))
    .then(() => fetchData('https://api.example3.com'))
    .then(() => console.log('All data fetched.'))
    .catch(error => console.error('Error:', error));

Async/Await (ES2017):

Async/await provides the cleanest syntax for asynchronous code:

async function fetchAllData() {
    try {
        await fetchData('https://api.example1.com');
        await fetchData('https://api.example2.com');
        await fetchData('https://api.example3.com');
        console.log('All data fetched.');
    } catch (error) {
        console.error('Error:', error);
    }
}

fetchAllData();

When to use callbacks vs Promises vs async/await

Callbacks: Simple synchronous operations, array methods, event handlers
Promises: Chaining multiple asynchronous operations, error handling
Async/await: Complex asynchronous flows that need to look synchronous

Modern JavaScript prefers Promises and async/await for asynchronous operations, but callbacks are still essential for many built-in APIs and array methods.

Key Takeaways:

Flexibility:

Callbacks provide a flexible way to pass around chunks of functionality in your code.

Asynchronous Patterns:

They are foundational for handling asynchronous operations in JavaScript.

Overuse Can Lead to Confusion:

Excessive nested callbacks can make code hard to read and maintain. It’s crucial to be aware of modern patterns and best practices to avoid falling into the “callback hell.”

Modern alternatives exist:

While callbacks are still used, Promises and async/await provide cleaner alternatives for asynchronous code.

Generators

Generators are a unique feature in JavaScript that allow functions to pause and later resume their execution. Unlike traditional functions, which run to completion when invoked, generators can “yield” execution back to the calling code and later “resume” from the point they left off. This behavior enables a variety of advanced programming techniques and patterns, including asynchronous programming.

How Do They Work?

Generators are defined using the function* syntax. Within a generator, we have access to the yield keyword, which instructs the generator to pause its execution and return a value to the caller. When resumed, the generator picks up right where it left off.

Uses for Generators:

Iterators:

They can be used to define custom iterables.

Asynchronous Code:

Before async/await became popular, generators were one way to handle asynchronous code by pairing them with promises.

Generating a Sequence of Values:

This is useful when you want to generate a series of values on demand, without having to compute them all upfront.

Examples:

1. Basic Generator

function* simpleGenerator() {
    let i = 0;
    while (i < 2) {
        i++;
        console.log("*");
        yield i;
    }
}

for (const item of simpleGenerator()) {
    console.log(item);
}
// Output:
// *
// 1
// *
// 2

Notice here, yield i instructs the function to pause and return the value of i. The next time the generator is invoked, it resumes right from that point.

2. Manually Iterating Through a Generator

let iterator = simpleGenerator();
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

Here, we’re using the next method to manually fetch the next value from the generator. When no more values are available, the generator returns { value: undefined, done: true }.

3. Generating a Sequence of Values

function* sequenceGenerator() {
    yield "a";
    yield "b";
    yield "c";
}

for (const val of sequenceGenerator()) {
    console.log(val);
}
// Output: a, b, c

const [...values] = sequenceGenerator();
console.log(values); // ['a', 'b', 'c']

4. Practical Examples

// Infinite sequence generator
function* idGenerator() {
    let id = 1;
    while (true) {
        yield id++;
    }
}

let ids = idGenerator();
console.log(ids.next().value); // 1
console.log(ids.next().value); // 2
console.log(ids.next().value); // 3

// Fibonacci sequence generator
function* fibonacci() {
    let [a, b] = [0, 1];
    while (true) {
        yield a;
        [a, b] = [b, a + b];
    }
}

let fib = fibonacci();
console.log(fib.next().value); // 0
console.log(fib.next().value); // 1
console.log(fib.next().value); // 1
console.log(fib.next().value); // 2
console.log(fib.next().value); // 3
console.log(fib.next().value); // 5

// Paginating through data
function* paginate(items, pageSize) {
    for (let i = 0; i < items.length; i += pageSize) {
        yield items.slice(i, i + pageSize);
    }
}

let data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let pages = paginate(data, 3);

console.log(pages.next().value); // [1, 2, 3]
console.log(pages.next().value); // [4, 5, 6]
console.log(pages.next().value); // [7, 8, 9]
console.log(pages.next().value); // [10]

Generators offer a powerful way to work with data, especially when it needs to be produced sequentially without computing everything upfront. They’re particularly useful in specific use cases, such as asynchronous processing or when defining custom iterators.

When to use generators

Generators are a specialized feature. Use them when you need:

Lazy evaluation of sequences
Custom iterators
Stateful iteration
Memory-efficient processing of large datasets

For most use cases, regular functions, arrays, or async/await are simpler and more appropriate.

Summary

Functions are the building blocks of JavaScript programs. Understanding how to define, use, and manipulate functions is essential for writing effective JavaScript code.

Key Takeaways

Function Definitions:

Function declarations are hoisted (can be used before definition)
Function expressions are not hoisted (must be defined before use)
Arrow functions provide concise syntax and lexical this binding
Avoid Function constructor (security and performance concerns)

Arrow Functions:

More concise syntax than traditional functions
Don’t bind their own this - inherit from parent scope
Can’t be used as constructors
No arguments object (use rest parameters instead)
Perfect for callbacks and array methods

Modern Parameters:

Default parameters: function(a = 10) provides default values
Rest parameters: function(...args) gathers remaining arguments into array
Destructuring: Extract object/array properties directly in parameters
Combine features for powerful, flexible function signatures

Arguments:

Primitives are passed by value (copies)
Objects are passed by reference (modifications affect original)
Functions accept any number of arguments regardless of parameter count
arguments object available in traditional functions (not arrow functions)
Prefer rest parameters over arguments in modern code

Higher-Order Functions:

Functions can be assigned to variables
Functions can be passed as arguments
Functions can return other functions
Essential for functional programming patterns
Used extensively with array methods

IIFE (Immediately Invoked Function Expression):

Execute functions immediately upon definition
Create private scopes to avoid global pollution
Useful for initialization code
Less needed with ES6 modules and block scoping
Still useful for async top-level code

Closures:

Inner functions retain access to outer function variables
Enable data encapsulation and private variables
Power module patterns and function factories
Be mindful of memory implications
Common use: creating private state

Callbacks:

Functions passed as arguments to other functions
Foundation of asynchronous JavaScript
Used extensively in array methods
Can lead to “callback hell” when nested
Modern alternatives: Promises and async/await

Generators:

Special functions that can pause and resume
Defined with function* syntax
Use yield to pause and return values
Create custom iterators and lazy sequences
Useful for specific use cases (iteration, async patterns)

Best Practices:

Use arrow functions for callbacks and short functions
Use function declarations for named, reusable functions
Prefer rest parameters over arguments object
Use default parameters instead of manual checks
Choose Promises/async-await over nested callbacks
Use descriptive function names
Keep functions small and focused (single responsibility)
Understand when closures are created to avoid memory leaks

Functions in JavaScript are incredibly flexible and powerful. Mastering them opens the door to advanced patterns like functional programming, asynchronous programming, and modular code organization.

Functions

Defining Functions

Understanding Arrow Functions

Classic Function vs. Arrow Function

Key Takeaways:

Function Parameters

Default Parameters (ES6)

Rest Parameters (ES6)

Destructuring Parameters (ES6)

Arguments in JavaScript

Pass-by-Value and Pass-by-Reference

Dynamic Nature of Function Arguments

The arguments Object

References to Functions in JavaScript

Function Assignments and References

Array Functions and Functional Programming

Returning Function References

Immediately Invoked Function Expression (IIFE)

Why use IIFE?

Syntax and Examples:

Closures in JavaScript

What is a Closure?

Why are Closures Useful?

How Closures Work

Examples

More Practical Use: Creating Private Variables

Key Takeaways:

Callback Functions in JavaScript

What is a Callback?

Why are Callbacks Used?

Examples

Callback Hell (or Pyramid of Doom)

Modern Alternatives

Key Takeaways:

Generators

How Do They Work?

Uses for Generators:

Examples:

Summary

Key Takeaways

Assignment(s)