Functions

intermediate

Part of Core JavaScript

Theory

Functions are reusable blocks of code that perform specific tasks. They are fundamental to JavaScript and help organize code, reduce repetition, and manage complexity.

Function declarations use the function keyword followed by a name, parameters in parentheses, and a body in curly braces. They are hoisted — available throughout their scope regardless of where they are defined.

function greet(name) {
  return `Hello, ${name}!`;
}

Function expressions assign a function to a variable. They are not hoisted and can be anonymous.

Arrow functions (ES6) provide a concise syntax with a lexical this binding. They use => and are always anonymous. For single expressions, the return keyword is implicit.

const square = (x) => x * x;
const add = (a, b) => a + b;

Parameters are the placeholders in the function definition. Arguments are the actual values passed when calling the function. Default parameters allow specifying fallback values:

function greet(name = "Guest") {
  return `Hello, ${name}!`;
}

Rest parameters (...args) collect all remaining arguments into an array. This allows functions to accept a variable number of arguments.

Scope determines where variables are accessible. JavaScript has three scope levels:

Global scope — accessible everywhere
Function scope — accessible within a function (var)
Block scope — accessible within a block (let, const)

Hoisting moves declarations to the top of their scope during compilation. Function declarations are fully hoisted; var declarations are hoisted but not their initializations; let and const are hoisted but not accessible (Temporal Dead Zone).

IIFE (Immediately Invoked Function Expression) runs as soon as it is defined, creating a private scope.

Callbacks are functions passed as arguments to other functions. They are essential for asynchronous operations and array methods. Higher-order functions either take functions as arguments or return functions.

Practical Examples

Example 1: Function Types and Default Parameters

javascript

Example 2: Callbacks and Higher-Order Functions

javascript

Exercises

Create a Greeting Function

easy

Create an arrow function called 'greet' that takes a name parameter with a default value of 'Stranger'. The function should return 'Hello, [name]! Nice to meet you.' Call it with and without an argument.

Starter Code:

// Write your arrow function here

Expected Output:

Hello, Alice! Nice to meet you.\nHello, Stranger! Nice to meet you.

Array Calculator with Callbacks

medium

Write a higher-order function called 'calculate' that takes an array and a callback function. It should apply the callback to each element and return a new array. Then use it with a 'double' and a 'square' callback.

Starter Code:

function calculate(arr, callback) {\n  // Your code here\n}

Expected Output:

[2, 4, 6, 8, 10]\n[1, 4, 9, 16, 25]

Rest Parameters Sum

medium

Write a function called 'sumAll' that accepts any number of arguments using rest parameters and returns their sum. Test it with 2, 5, and 8 arguments.

Starter Code:

function sumAll(...numbers) {\n  // Your code here\n}

Expected Output:

6\n15\n36

Mini Quiz

Mini Project

Mini Project: Temperature Utility Library

Create a set of utility functions for temperature conversion and analysis using different function types.

Requirements:

Bonus Challenge

Add an IIFE that logs 'Temperature Utility Loaded' when the script runs.