Basic Functions

Program demonstrating function declarations and expressions

BeginnerTopic: Function Programs
Back

JavaScript Basic Functions Program

This program helps you to learn the fundamental structure and syntax of JavaScript programming.

Try This Code
// Method 1: Function Declaration
function greet(name) {
    return "Hello, " + name + "!";
}

console.log("Function declaration:", greet("John"));

// Method 2: Function Expression
const greet2 = function(name) {
    return "Hello, " + name + "!";
};

console.log("Function expression:", greet2("Jane"));

// Method 3: Arrow Function (ES6)
const greet3 = (name) => {
    return "Hello, " + name + "!";
};

console.log("Arrow function:", greet3("Bob"));

// Method 4: Arrow Function (one-liner)
const greet4 = name => "Hello, " + name + "!";

console.log("Arrow one-liner:", greet4("Alice"));

// Method 5: Function with default parameters
function greet5(name = "Guest") {
    return "Hello, " + name + "!";
}

console.log("\nWith default:");
console.log(greet5("Tom"));
console.log(greet5());

// Method 6: Function with multiple parameters
function calculate(a, b, operation = 'add') {
    switch(operation) {
        case 'add':
            return a + b;
        case 'subtract':
            return a - b;
        case 'multiply':
            return a * b;
        case 'divide':
            return a / b;
        default:
            return "Invalid operation";
    }
}

console.log("\nCalculate function:");
console.log("10 + 5 =", calculate(10, 5, 'add'));
console.log("10 - 5 =", calculate(10, 5, 'subtract'));
console.log("10 * 5 =", calculate(10, 5, 'multiply'));
console.log("10 / 5 =", calculate(10, 5, 'divide'));
Output
Function declaration: Hello, John!
Function expression: Hello, Jane!
Arrow function: Hello, Bob!
Arrow one-liner: Hello, Alice!

With default:
Hello, Tom!
Hello, Guest!

Calculate function:
10 + 5 = 15
10 - 5 = 5
10 * 5 = 50
10 / 5 = 2

Understanding Basic Functions

This program demonstrates different ways to define functions in JavaScript.

Method 1: Function Declaration

Traditional function:

function functionName(parameters) {
}

    // code
    return value;

Characteristics:

•Hoisted (can call before declaration)
•Has its own this context
•Can be used as constructor

Method 2: Function Expression

Assign function to variable:

const func = function(parameters) {
};

    // code

Characteristics:

•Not hoisted
•Anonymous function assigned to variable
•Can be reassigned

Method 3: Arrow Function

ES6 syntax:

const func = (parameters) => {
};

    // code
    return value;

Method 4: Arrow Function (One-liner)

Implicit return:

const func = parameter => expression;

Arrow Function Features:

•Shorter syntax
•No this binding (uses parent scope)
•Cannot be used as constructor
•Implicit return for single expressions

Method 5: Default Parameters

ES6 feature:

function func(param = defaultValue) {
}

    // code

When to Use:

-

Declaration

: General purpose, hoisting needed

-

Expression

: When reassignment needed

-

Arrow

: Modern, concise, no this binding

-

Default params

: Optional parameters

Function vs Arrow Function:

| Feature | Function | Arrow |

|---------|----------|-------|

| this binding | Own context | Parent scope |

| Hoisting | Yes | No |

| Constructor | Yes | No |

| Arguments | Yes | No |

| Syntax | Verbose | Concise |

Best Practices:

•Use arrow functions for callbacks
•Use declarations for main functions
•Use default parameters for optional args

Let us now understand every line and the components of the above program.

Note: To write and run JavaScript programs, you need to set up the local environment on your computer. Refer to the complete article Setting up JavaScript Development Environment. If you do not want to set up the local environment on your computer, you can also use online IDE to write and run your JavaScript programs.

Next
Callback Functions
Next
Callback Functions

Table of Contents