JavaScript Functions

1. What is a Function?

A function is a block of reusable code designed to perform a particular task. A function is executed when "something" invokes it (calls it). Functions help in reducing code redundancy and making the code modular.

2. Function Declaration

A function declaration defines a named function. These are hoisted, meaning they can be called before they are defined.

Syntax

function functionName(parameters) {
    // code to be executed
}

Example

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

console.log(add(5, 10)); // 15
Output will appear here...

3. Function Expression

A function expression defines a function inside a variable. These are not hoisted.

Syntax

const functionName = function(parameters) {
    // code to be executed
};

Example

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

document.write(multiply(4, 5)); // 20
Output will appear here...

4. Arrow Function (ES6)

Arrow functions provide a shorter syntax for writing function expressions. They do not have their own this context.

Syntax

const functionName = (parameters) => {
    // code to be executed
};

Example

const subtract = (a, b) => a - b;

// One-liner (implicit return)
const square = n => n * n;

document.write(subtract(10, 3)); // 7
document.write(square(6));       // 36
Output will appear here...

5. Parameters & Return Values

Parameters are variables listed in the function definition.
Arguments are values passed to the function when it is invoked.
The return statement stops the execution of a function and returns a value to the caller.

Example

function greet(name = "Guest") { // Default parameter
    return "Welcome, " + name;
}

document.write(greet("Ragini")); // "Welcome, Ragini"
document.write(greet());         // "Welcome, Guest"
Output will appear here...

6. IIFE (Immediately Invoked Function Expression)

An IIFE is a function that runs as soon as it is defined. It is often used to create a private scope.

Example

(function() {
    let secret = "I am hidden";
    document.write("IIFE executed immediately!");
})();
Output will appear here...

7. Comparison Table

Type Syntax Hoisted? 'this' Binding
Declaration function foo() {} Yes Dynamic
Expression const foo = function() {} No Dynamic
Arrow const foo = () => {} No Lexical (Inherited)
✅ Best Practice: Use Arrow Functions for concise code and callbacks. Use Function Declarations when you need hoisting or a named function for debugging.

Practice Questions

Test your understanding of JavaScript Functions.

Easy

Q1: Create a function to multiply two numbers.

  • Write a function declaration named multiply.
  • It should accept two parameters (e.g., a and b).
  • Return the product of the two parameters.
Easy

Q2: Convert a standard function to an arrow function.

Convert the following function declaration into an ES6 arrow function:

function isEven(num) {
    return num % 2 === 0;
}
Medium

Q3: Write an Immediately Invoked Function Expression (IIFE).

  • Write an anonymous function.
  • Make it execute immediately after it is defined.
  • Log "I am running immediately!" to the console inside the function.
Medium

Q4: Create a function with a default parameter.

  • Write a function named power.
  • It should accept two parameters: base and exponent.
  • Set the default value of exponent to 2.
  • Return the calculation (you can use the ** operator).
Hard

Q5: Create a function that demonstrates a Closure.

  • Write a function makeCounter that initializes a count to 0.
  • It should return an inner function that increments and returns the count.
  • Demonstrate how calling the returned function preserves the state of count.

Answer

Code: