JavaScript/Function Programs/Program

Basic Functions

Program demonstrating function declarations and expressions

JavaScriptBeginner
JavaScript
Try
// 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

This program demonstrates different ways to define functions in JavaScript.

Method 1: Function Declaration

Traditional function:

javascript
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:

javascript
const func = function(parameters) {
    // code
};

Characteristics:

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

Method 3: Arrow Function

ES6 syntax:

javascript
const func = (parameters) => {
    // code
    return value;
};

Method 4: Arrow Function (One-liner)

Implicit return:

javascript
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:

javascript
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:

FeatureFunctionArrow
this bindingOwn contextParent scope
HoistingYesNo
ConstructorYesNo
ArgumentsYesNo
SyntaxVerboseConcise

Best Practices:

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