JavaScript Tutorial

The language for programming web pages.

JS Functions

JavaScript Functions

A JavaScript function is a block of code designed to perform a particular task. A function is executed when something invokes (calls) it.

Function Types:

Function Declaration — function name() {}
Function Expression — const name = function() {}
Arrow Function — const name = () => {}
IIFE — Immediately Invoked Function Expression
Callback — Function passed as argument

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<body style="font-family:Arial; padding:20px;">
  <h2>JS Functions Demo</h2>
  <div id="out" style="background:#1e1e1e; color:#abb2bf; padding:15px; border-radius:8px; font-family:monospace; line-height:2.2;"></div>
  <button onclick="runAll()" style="margin-top:10px; padding:10px 20px; background:#f7df1e; color:#1a1a2e; border:none; border-radius:5px; cursor:pointer; font-weight:bold;">▶ Run All</button>
  <script>
    // 1. Function Declaration
    function greet(name) {
      return "Hello, " + name + "! 👋";
    }

// 2. Function Expression
    const square = function(n) { return n * n; };

// 3. Arrow Function
    const add = (a, b) => a + b;

// 4. Default Parameters
    const welcome = (name = "Guest") => `Welcome, ${name}!`;

// 5. Rest Parameters
    const sum = (...nums) => nums.reduce((a, b) => a + b, 0);

function runAll() {
      document.getElementById("out").innerHTML = `
        Declaration: ${greet("Ali")}<br>
        Expression:  square(7) = ${square(7)}<br>
        Arrow:       add(10, 5) = ${add(10, 5)}<br>
        Default Param: ${welcome()}<br>
        Default Param: ${welcome("Sara")}<br>
        Rest Params: sum(1,2,3,4,5) = ${sum(1,2,3,4,5)}
      `;
    }
  </script>
</body>
</html>

Result

Topics