Javascript Functions

Purpose of Function in Javascript:

1. 1. 1. Functions in JavaScript are reusable blocks of code designed to perform specific tasks. They allow you to organize, reuse, and modularize code. They can take inputs, perform actions, and return outputs.
2. 2. 2. We can Call the functions wherever we want.
3. 3. Functions help us use one of fundamental software design principle — DRY (Don’t repeat yourself).
4. We can pass the parameters in functions too.

Function Syntax:

• Function name in Camel case(Ex:functionName).
• All of the function name must be unique. We can call the function by function name with () ( Ex:functionName(); )

Understanding Parameters in function:

In functions, parameters are placeholders defined in the function, while arguments are the actual values you pass when calling the function.

**Example:

function greet(name) { // 'name' is a parameter
console.log("Hello " + name);
}

greet("Karthika"); // "Karthika" is the argument**

Parameter: name (placeholder inside the function).
Argument: "Karthika" (real value given at call time).

Default Parameters:
Default parameters are used when no argument is provided during the function call.
If no value is passed, the function automatically uses the default value.
Example:
function greet(name = "Guest") {
console.log("Hello, " + name);
}

greet();
greet("Karthi");

Output:

Hello, Guest

Hello, Karthi

Return Statement

• The return statement is used to send a result back from a function.
• When return executes, the function stops running at that point.
• The returned value can be stored in a variable or used directly.

Example:
function add(a, b) {
return a + b; // returns the sum
}
console.log(add(5,5));//directly give argument here
Output:
10
Or
function add(a, b) {
return a + b; // returns the sum
}

let result = add(5, 10);//can assign variable to store value
console.log(result);
Output:
10

Types of Functions:

Here we will see some type of functions below,

1. Named Function
A function that has its own name when declared. It’s easy to reuse and debug because the name shows up in error messages or stack traces.

Example:

function greet() {
return "Hello!";
}
console.log(greet());
Output: Hello!

2. Anonymous Function

1. An anonymous function is a function defined without an explicit name.
2. It is commonly used as a callback or assigned to a variable.

Example:

const greet = function() {
return "Hi there!";
};
console.log(greet());
Output: Hi there!

1. Function Expression A function expression is a function created as part of an expression and assigned to a variable or passed to another function. It can be named or anonymous function.

Example:

const add = function(a, b) {
return a + b;
};
console.log(add(2, 3));
Output: 5

1. Arrow Function (ES6) A new way to write functions using the => syntax. They are shorter and do not have their own this binding, which makes them useful in some cases.

Example:

const add =(a, b)=>a + b;
console.log(add(2, 3));
Output: 5

1. Immediately Invoked Function Expression (IIFE) Immediately Invoked Function Expressions (IIFE) are JavaScript functions that are executed immediately after they are defined. They are typically used to create a local scope for variables to prevent them from polluting the global scope.

Example:

(function () {
console.log("This runs immediately!");
})();
Output:This runs immediately!

6.Callback function

• A callback function is a function that is passed as an argument to another function and executed later.
• A function can accept another function as a parameter.
• Callbacks allow one function to call another at a later time.
• A callback function can execute after another function has finished.

Example:

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

function sayBye() {
console.log("Goodbye!");
}

greet("Karthi", sayBye);

Output:
Hello, Karthi

Goodbye!
Note:Here, sayBye() is passed as a callback to greet(), which executes after the greeting.

Uses:

1. Handling Asynchronous Operations
2. Callbacks in Functions Handling Operations
3. Callbacks in Event Listeners(TBD)

Example:

console.log("Start");

setTimeout(function () {
console.log("Inside setTimeout");
}, 3000);

console.log("End");

Output:
Start

End

Inside setTimeout

Explanantion:

1. setTimeout() is an asynchronous function that takes a callback to execute after 3 seconds.
2. The rest of the code continues executing without waiting.