Learn about JS Functions with Examples

In JavaScript, a function is a reusable block of code that performs a specific task or a set of tasks. Functions are used to encapsulate logic, promote code reusability, and make the code more organized and modular. They are a fundamental building block in JavaScript programming.

Anatomy of a Function:

A JavaScript function consists of the following components:

1. Function Keyword: The function keyword is used to declare a function.

2. Function Name: The name of the function, which is used to call the function later.

3. Parameters: Enclosed in parentheses after the function name, parameters are placeholders for values that the function can accept as inputs.

4. Function Body: The code enclosed in curly braces {} contains the instructions that the function executes when called.

5. Return Statement: Functions can optionally return a value using the return keyword. If a function doesn't explicitly return a value, it returns undefined.

Function Declaration Example:

// Function declaration

function greet(name) {

    return "Hello, " + name + "!";

}

// Calling the function

let greeting = greet("Alice");

console.log(greeting); // Outputs: "Hello, Alice!"

Function Expression Example:

// Function expression

let add = function(a, b) {

    return a + b;

};

// Calling the function

let result = add(3, 5);

console.log(result); // Outputs: 8

Function Properties and Types:

1. Function Properties:

• name: Returns the name of the function as a string.
• length: Returns the number of parameters expected by the function.

function exampleFunc(a, b, c) {}

console.log(exampleFunc.name);   // Outputs: "exampleFunc"

console.log(exampleFunc.length); // Outputs: 3

 

2. Types of Functions:

• Named Function Declaration: Defined using the function keyword followed by the function name.

function multiply(x, y) {

    return x * y;

}

 

• Function Expression: Assigning an anonymous function to a variable.

let divide = function(x, y) {

    return x / y;

};

 

• Arrow Function Expression: A concise syntax for writing functions.

let subtract = (x, y) => x - y;

 

• Immediately Invoked Function Expression (IIFE): Executed as soon as it's defined.

(function() {

    console.log("IIFE executed!");

})();

 

• Method: A function that's a property of an object.

let person = {

    name: "John",

    greet: function() {

        console.log("Hello, " + this.name);

    }

};

person.greet(); // Outputs: "Hello, John"

 

• Constructor Function: Used to create objects using the new keyword.

function Car(make, model) {

    this.make = make;

    this.model = model;

}

let myCar = new Car("Toyota", "Camry");

 

• Generator Function: Generates a sequence of values using the yield keyword.

function* countUp() {

    let count = 0;

    while (true) {

        yield count++;

    }

}

let counter = countUp();

console.log(counter.next().value); // Outputs: 0

 

• Async Function: Used to write asynchronous code in a synchronous-like manner.

async function fetchData() {

    let response = await fetch('https://api.example.com/data');

    let data = await response.json();

    return data;

}

 

Functions are a fundamental concept in JavaScript, enabling you to modularize your code, improve reusability, and make complex logic more manageable. Understanding the different types of functions and their features will help you write more efficient and organized code.