JavaScript Functions: A Simple Guide for Beginners

A function in JavaScript is a reusable block of code that performs a specific task.

Instead of writing the same code multiple times, you can put it inside a function and use that function whenever you need it.

In this tutorial, you will learn how to create, call, and use functions in JavaScript with simple examples.

What is a Function in JavaScript?

A function is a block of code designed to perform a particular task.

For example, suppose you want to print a welcome message:

console.log("Welcome to JavaScript");

If you need to print this message many times, writing the same code repeatedly is not a good approach.

You can create a function instead:

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

Now you can run the function whenever you want.

How to Create a Function

The basic syntax of a JavaScript function is:

function functionName() {
    // code
}

For example:

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

Here:

• function is the JavaScript keyword.
• sayHello is the function name.
• { } contains the code that the function will execute.

How to Call a Function

Creating a function does not execute it.

You need to call the function:

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

sayHello();

Output:

Hello!

You can call the same function multiple times:

sayHello();
sayHello();
sayHello();

Output:

Hello!
Hello!
Hello!

Function Parameters

Functions can accept information called parameters.

For example:

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

Now we can pass a name when calling the function:

greet("Harshit");

Output:

Hello Harshit

You can also pass different values:

greet("Rahul");
greet("Amit");
greet("Priya");

Multiple Parameters

A function can have multiple parameters.

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

add(10, 20);

Output:

30

Here, a and b are parameters, while 10 and 20 are the values passed to the function.

Returning a Value from a Function

A function can return a value using the return statement.

function add(a, b) {
    return a + b;
}

You can store the returned value in a variable:

let result = add(10, 20);

console.log(result);

Output:

30

The return statement sends the result back to the code that called the function.

Function with No Parameters

A function does not always need parameters.

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

showMessage();

Function with Default Parameters

You can provide a default value for a parameter.

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

If you provide a name:

greet("Harshit");

Output:

Hello Harshit

If you don’t provide a name:

greet();

Output:

Hello Guest

JavaScript Function Expression

You can also store a function inside a variable.

const greet = function() {
    console.log("Hello!");
};

greet();

This is called a function expression.

Arrow Functions

Modern JavaScript also provides a shorter way to write functions called arrow functions.

Traditional function:

function add(a, b) {
    return a + b;
}

Arrow function:

const add = (a, b) => {
    return a + b;
};

For a simple function, you can make it even shorter:

const add = (a, b) => a + b;

Arrow functions are commonly used in modern JavaScript applications.

Why Are Functions Important?

Functions make your JavaScript code:

• Reusable
• Easier to understand
• Easier to maintain
• Less repetitive
• Easier to test

For example, instead of writing:

console.log(10 + 20);
console.log(30 + 40);
console.log(50 + 60);

You can create one reusable function:

function add(a, b) {
    return a + b;
}

console.log(add(10, 20));
console.log(add(30, 40));
console.log(add(50, 60));

Conclusion

JavaScript functions allow you to create reusable blocks of code. You can create a function using the function keyword, pass data using parameters, and return results using the return statement.

Once you understand functions, you will be ready to learn more advanced JavaScript concepts such as callback functions, arrow functions, higher-order functions, and closures.

Quick Example

Here is a complete example:

function calculateTotal(price, quantity) {
    return price * quantity;
}

let total = calculateTotal(500, 3);

console.log(total);

Output:

1500

This is one of the main benefits of functions: write the logic once and reuse it whenever you need it.