DEV Community

Anees Abdul
Anees Abdul

Posted on • Edited on

Functions in JavaScript

#tutorial #beginners #javascript #programming

What is a Function?
-A function is a block of code designed to perform a specific task.

  • Instead of writing the same code again and again, we can put it inside a function and reuse it. 
function functionName() {
    // code to execute
}
Enter fullscreen mode Exit fullscreen mode 
function greet() {
    console.log("Hello");
}

greet(); // calling the function
O/P: Hello
Enter fullscreen mode Exit fullscreen mode

Functions with Parameters

  • Parameters allow you to pass values into a function. 
function greet(name) {
    console.log("Hello " + name);
}

greet("Anees");
O/P: Hello Anees
Enter fullscreen mode Exit fullscreen mode

Functions with Return Value

  • A function can return a value using return. 
function add(a, b) {
    return a + b;
}

let result = add(2, 3);
console.log(result);
O/P: 5
Enter fullscreen mode Exit fullscreen mode

Types of Functions in JavaScript
1- Function Declaration
2- Function Expression
3- Arrow Functions (Modern JavaScript)
4- Anonymous Function
5- Callback Function
6- IIFE (Immediately Invoked Function)

What is Function Declaration:

  • A function declaration (or simply a function) is defined using:
  • The function keyword
  • function name
  • Parameters in parentheses
  • code block brackets

Hoisted (can be used before declaration)

function add(a, b) {
return a + b;}
Enter fullscreen mode Exit fullscreen mode 
function show() {
    console.log("Function Declaration");
Enter fullscreen mode Exit fullscreen mode

What is Function Expression:
A function expression is a way of creating a function and assigning it to a variable.

A function expression is defined using:

  • The function keyword
  • Parameters in parentheses
  • A code block brackets

Not hoisted - Must be defined before calling.

const add = function(a, b) {return a + b;};
Enter fullscreen mode Exit fullscreen mode 
const add = function(a, b) {
    return a + b;
};

console.log(add(3, 4));

O/P:7
Enter fullscreen mode Exit fullscreen mode

What is Arrow Function:

  • Arrow Functions allow a shorter syntax for function expressions.

You can skip the function keyword, the return keyword, and the curly brackets:

  • An arrow function uses the => symbol.
  • An arrow function is always written as a function expression. 
const multiply = (a, b) => a * b;
console.log(multiply(3,4));
O/P: 12
Enter fullscreen mode Exit fullscreen mode

What is an Anonymous Function:

  • An anonymous function is a function without a name.
  • It is usually used where functions are needed temporarily. Often used in timers or callbacks. 
setTimeout(function() {
    console.log("Hello after delay");
}, 1000);
O/P: Hello after delay
Enter fullscreen mode Exit fullscreen mode

What is Callback Function:

  • A callback function is a function passed as an argument to another function. -It is executed after a specific task is completed. Commonly used in asynchronous operations. 
function process(name, callback) {
    console.log("Processing " + name);
    callback();
}

function done() {
    console.log("Done!");
}

process("Anees", done);

O/P: 
Processing Anees
Done!
Enter fullscreen mode Exit fullscreen mode

How it works

process is called
Prints "Processing Anees"
Calls callback()
done() runs

What is IIFE (Immediately Invoked Function):

  • An IIFE is a function that runs immediately after it is created. No need to call it separately. 
(function() {
    console.log("IIFE executed");
})();
O/P: IIFE executed
Enter fullscreen mode Exit fullscreen mode

What is Closure:

  • A closure is a function that remembers variables from its outer function. Even after the outer function finishes, the inner function can still access those variables. Used for data privacy and maintaining state.

Top comments (0)