❮ Previous Next ❯

Function Declaration

  • This lesson explains how to declare and use functions in JavaScript.

  • In JavaScript, a function is a reusable block of code designed to perform a specific task.

    Instead of writing the same code again and again, we:

    • Write it once inside a function

    • Call it whenever needed

    Functions help in:

    • Code reusability

    • Better readability

    • Easy debugging

    • Modular programming

    What is a Function ?

    A function is a set of statements that:

    • Takes input (optional)

    • Performs some operations

    • Returns output (optional)

    Basic Syntax of a Function

    function functionName() {

      // code to execute

    }

    Function Declaration

    What is Function Declaration ?

    A function declaration is the traditional way of defining a function using the function keyword.

    Syntax: Function Declaration

    function functionName(parameters) {

      // function body

      return value;

    }

Function Declaration

Defines a function using the function keyword with optional parameters. 

// Function declaration

function greet() {
  console.log("Welcome to JavaScript Functions");
}

greet();


// Function with parameters

function add(a, b) {
  console.log(a + b);
}

add(10, 20);

  • Characteristics of Function Declaration

    • Uses function keyword

    • Function name is mandatory

    • Hoisting is supported

    • Can be called before definition

Function Declaration Hoisting

Allows calling the function before its definition due to hoisting. 

// Function hoisting example

sayHello();

function sayHello() {
  console.log("Hello!");
}

  • This works because function declarations are hoisted.

    Function Expression

    What is Function Expression ?

    A function expression is when a function is assigned to a variable.

    Syntax: Function Expression

    const functionName = function(parameters) {

      // function body

    };

Function Expression

Stores a function inside a variable and executes it using the variable name. 

// Function expression

const greet = function() {
  console.log("Hello from Function Expression");
};

greet();
  • Difference: Declaration vs Expression
    FeatureFunction DeclarationFunction Expression
    Name requiredYesOptional
    HoistingYesNo
    Stored in variableNoYes
    ExecutionBefore definition allowedAfter definition only

    Parameters & Return Values

    What Are Parameters ?

    Parameters are variables listed inside the function definition that receive values when the function is called.

Parameters and Return Values

Accepts input values and returns a result from the function. 

// Function with parameters and return value

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

let result = multiply(5, 4);

console.log(result); // 20

  • What is a Return Value ?

    The return statement:

    • Sends a value back to the caller

    • Ends function execution

      Default Parameters

      What Are Default Parameters ?

      Default parameters allow a function parameter to have a default value if no argument is passed.

      Syntax: Default Parameters

      function functionName(param = defaultValue) {

        // code

      }

    Default Parameters

    Uses a default value when no argument is passed to the function. 

    // Default parameter example

function greet(name = "Guest") {
  console.log("Hello " + name);
}

greet("Amit"); // Hello Amit
greet();       // Hello Guest

    • Why Use Default Parameters ?

      • Prevent undefined values

      • Make functions safer

      • Reduce extra checks

      Callback Functions

      What is a Callback Function ?

      A callback function is a function that is:

      • Passed as an argument to another function

      • Executed later inside that function

      Simple Definition

      A callback is a function that is called back after some operation is completed.

    Callback Function

    Passes a function as an argument to be executed later inside another function. 

    // Callback function example

function greetUser(name, callback) {
  console.log("Hello " + name);
  callback();
}

function showMessage() {
  console.log("Welcome to the website");
}

greetUser("Rahul", showMessage);

    • How Callback Works

      1. One function is passed as a parameter

      2. It is executed inside another function

      3. Enables flexible and reusable logic

      Why Callbacks Are Important ?

      • Handle asynchronous operations

      • Reusable logic

      • Event handling

      • Timers and APIs

        Anonymous Functions

        What is an Anonymous Function ?

        An anonymous function is a function without a name.

        It is commonly used:

        • As function expressions

        • As callbacks

        Syntax: Anonymous Function

        function () {

          // code

        }

      Anonymous Functions

      Uses functions without names for expressions and callbacks. 

      // Anonymous function expression

const sayHi = function() {
  console.log("Hi there!");
};

sayHi();


// Anonymous callback function

setTimeout(function() {
  console.log("This runs after 2 seconds");
}, 2000);
      • Difference: Named vs Anonymous Functions
        FeatureNamed FunctionAnonymous Function
        Has nameYesNo
        ReusableYesLimited
        ReadabilityHighMedium
        UsageGeneral logicCallbacks, events

        Common Mistakes

        • Forgetting return

        • Confusing parameters with arguments

        • Calling function before expression definition

        • Overusing anonymous functions

        • Not understanding callback flow

        Best Practices for Functions

        • Use meaningful function names

        • Keep functions small

        • One function = one task

        • Avoid deeply nested callbacks

        • Use default parameters when needed

      ❮ Previous Next ❯