Function in JavaScript - part1

Functions

Functions are one of the most important concepts in JavaScript.

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

Instead of writing the same code multiple times, we can place the code inside a function and call it whenever needed.

For example, instead of writing console.log("Welcome") multiple times, we can create a function.

function greet() {
    console.log("Welcome");
}

The code inside the function will not execute until the function is called.

greet();

Output:

Welcome

Why Do We Use Functions?

Functions help us avoid repeating the same code. They also make programs more organized, reusable, and easier to understand.

For example, without a function:

console.log("Welcome, John");
console.log("Welcome, David");
console.log("Welcome, Mary");

Using a function:

function greet() {
    console.log("Welcome");
}

greet();
greet();
greet();

A function can be called multiple times whenever the same task needs to be performed.

Function Declaration

A function declaration is one of the most common ways to create a function in JavaScript.

The syntax is:

function functionName() {
    // code to execute
}

A function declaration contains:

• The function keyword.
• A function name.
• Parentheses ().
• Curly braces {} containing the function code.

For example:

function showMessage() {
    console.log("Learning JavaScript");
}

Here, showMessage is the name of the function.

Calling a Function

Creating a function does not automatically execute its code. We need to call or invoke the function to execute it.

A function is called by writing its name followed by parentheses.

function showMessage() {
    console.log("Learning JavaScript");
}

showMessage();

Output:

Learning JavaScript

Here, the function is declared first and then called using showMessage().

Calling a Function Multiple Times

One of the main advantages of functions is reusability. We can call the same function multiple times.

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

welcome();
welcome();
welcome();

Output:

Welcome to our website
Welcome to our website
Welcome to our website

The same block of code is executed every time the function is called.

Parameters

Parameters are variables that are written inside the parentheses of a function. They allow a function to receive values when it is called.

For example:

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

Here, name is a parameter.

The function can receive different values through this parameter.

greet("John");
greet("David");

Output:

Hello, John
Hello, David

The function uses the value passed to it and produces different results.

Multiple Parameters

A function can have more than one parameter. Multiple parameters are separated by commas.

For example:

function introduce(name, city) {
    console.log(name + " is from " + city);
}

introduce("John", "Chennai");

Output:

John is from Chennai

Here, name and city are parameters.

Arguments

Arguments are the actual values that are passed to a function when it is called.

For example:

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

add(10, 20);

Here:

• a and b are parameters.
• 10 and 20 are arguments.

Output:

30

Parameters vs Arguments

Parameters	Arguments
Variables defined in the function declaration	Actual values passed when calling the function
Receive values inside the function	Provide values to the function
Example: function add(a,b)	Example: add(10,20)
a & b are parameter	10 and 20 are an argument

The return Statement

The return statement is used to send a value back from a function.

For example:

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

let result = add(10, 20);

console.log(result);

Output:

30

Here, the function calculates a + b and returns the result.

The returned value is stored in the result variable.

return vs console.log()

console.log() displays a value in the console, while return sends a value back from the function.

For example:

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

add(10, 20);

Output:

30

In this example, the result is only displayed.

Now consider:

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

let result = add(10, 20);

console.log(result);

Output:

30

Here, the result is returned from the function and can be stored in a variable or used in another operation.

For example:

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

let total = add(10, 20) * 2;

console.log(total);

Output:

60

This is one of the main advantages of using return.

Important Point About return

When JavaScript reaches a return statement, the function stops executing.

For example:

function check() {
    console.log("Start");

    return "Completed";

    console.log("End");
}

console.log(check());

Output:

Start
Completed

The code after the return statement is not executed.

Conclusion

Functions help us organize and reuse code in JavaScript. A function is created using the function keyword and is executed when it is called. Functions can receive values through parameters and arguments, and they can send results back using the return statement.

Understanding function declarations, function calls, parameters, arguments, and return values is important because these concepts form the foundation for working with functions in JavaScript.