Today I have learned about Named function, Anonymous function, Function expression, Arrow function, Immediately Invoked Function Expression (IIFE) in JS.
- JavaScript functions can be categorized by how they are defined, how they handle execution context, and how they behave during execution. The primary categories include syntax-based definitions, control-flow variants, and functional design patterns.
1.Named Function
A named function is a function that is declared with a specific name and can be called using that name whenever needed.
function greet() {
console.log("Hello");
}
greet();
Output
Hello
Advantages of Named Functions
Reusable – Call it multiple times.
Readable – The function name describes its purpose.
Debugging is easier – Error messages show the function name.
Hoisted (for function declarations) – Can be called before its declaration.
sayHi();
function sayHi() {
console.log("Hi");
}
Output
Hi
This works because function declarations are hoisted.
2.Anonymous Function
A function that does not have a name. It is usually assigned to a variable or used as a callback. Since it has no name, it cannot be called directly.
let greet = function() {
console.log("Hello");
};
greet();
Here, the function has no name, so it is called an anonymous function.
Output
Hello
- An anonymous function is a function that does not have a function name and is usually stored in a variable or passed as an argument to another function.
1. Stored in a Variable
let add = function(a, b) {
return a + b;
};
console.log(add(10, 20));
Output
30
2. Passed as an Argument
setTimeout(function() {
console.log("Executed after 2 seconds");
}, 2000);
An anonymous function cannot exist alone as a statement. It is usually:
Assigned to a variable,
Passed as an argument,
Returned from another function.
Valid example:
let show = function() {
console.log("Hello");
};
Invalid example:
function() {
console.log("Hello");
}
This gives an error because JavaScript expects a function name when a function declaration is used.
3.Function Expression
A Function Expression is a function that is created and assigned to a variable. It can be anonymous or named and is executed by calling the variable that stores it.
- A Function Expression is a function that is assigned to a variable.
let greet = function() {
console.log("Hello");
};
greet → variable name
function() {} → function expression (anonymous function)
The function is stored in the variable greet
Calling the Function
let greet = function() {
console.log("Hello");
};
greet();
Output
Hello
Example with Parameters
let add = function(a, b) {
return a + b;
};
console.log(add(10, 20));
Output
30
Function Expression (Not Fully Hoisted)
greet();
let greet = function() {
console.log("Hello");
};
Error
ReferenceError: Cannot access 'greet' before initialization
Named Function Expression
A function expression can also have its own name:
let add = function sum(a, b) {
return a + b;
};
console.log(add(10, 20));
Here:
add → variable name
sum → function name (used mainly for debugging)
A common interview question
"Is every anonymous function a function expression?"
Answer: No. Anonymous functions are often used in function expressions, but they can also be used as callbacks:
setTimeout(function() {
console.log("Hello");
}, 1000);
This is an anonymous function, but it is being passed as an argument rather than assigned to a variable.
4.Arrow Function (ES6)
An Arrow Function is a shorter way to write a function, introduced in ECMAScript 2015 (ES6).
Arrow Function
let greet = () => {
console.log("Hello");
};
Example with Parameters
let add = (a, b) => {
return a + b;
};
console.log(add(10, 20));
Output
30
Shorter Syntax for Single Return Statement
If the function has only one statement that returns a value:
let add = (a, b) => a + b;
console.log(add(10, 20));
here the function contain only one statement so we don't need to return the value explicitly it happens implicitly without writing any return statement.
- JavaScript automatically returns the result.
Single Parameter
Parentheses are optional when there is only one parameter.
let square = n => n * n;
console.log(square(5));
Output
25
No Parameters
let greet = () => console.log("Hello");
greet();
Output
Hello
Uses => operator
Does not have its own this
Cannot be used as a constructor
No arguments object
Shorter syntax
When to Use Arrow Functions
Callbacks (map, filter, forEach)
Short utility functions
When you want a shorter syntax.
5.Immediately Invoked Function Expression (IIFE)
An IIFE (Immediately Invoked Function Expression) is a function that is defined and executed immediately after it is created.
(function() {
console.log("I am executed immediately");
})();
How It Works
function() {} → Function definition
(function() {}) → Converts it into a function expression
() → Immediately calls the function
Example with Parameters
(function(name) {
console.log("Welcome " + name);
})("Vicky");
Output
Welcome Vicky
Why Use IIFE?
Avoid Polluting the Global Scope
Without IIFE:
let message = "Hello";
console.log(message);
The variable is available globally.
With IIFE:
(function() {
let message = "Hello";
console.log(message);
})();
Output
Hello
Outside the function:
console.log(message);
ReferenceError: message is not defined
The variable stays private inside the IIFE.
IIFE with Arrow Function
(() => {
console.log("Arrow IIFE");
})();
Output
Arrow IIFE
- An IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined. It is commonly used to create a private scope and avoid polluting the global namespace.
General Pattern
(function() {
// code
})();
or
(() => {
// code
})();
Why is JavaScript called Single-Threaded?
Because it has one Call Stack and executes one operation at a time.
function first() {
console.log("First");
}
function second() {
console.log("Second");
}
first();
second();
Output
First
Second
first() completes before second() starts.
Then How Does JavaScript Handle Timers and API Calls?
JavaScript is single-threaded, but the browser (or Node.js) provides features like:
Timers (setTimeout)
Network requests (fetch)
Event handling
These are handled outside the main thread and their results are queued back to JavaScript when ready.
Example:
console.log("Start");
setTimeout(() => {
console.log("Timer Finished");
}, 2000);
console.log("End");
Output
Start
End
Timer Finished
Even though the timer is started first, JavaScript continues executing the next line instead of waiting.
Interview Definition
JavaScript is a single-threaded language, meaning it executes one task at a time using a single call stack. It relies on the Event Loop, Web APIs, and callback queues to handle asynchronous operations without blocking the main thread.
- "JavaScript is single-threaded but non-blocking because of the Event Loop and asynchronous APIs."
Process vs Thread
Process
A process is an independent program that is running.
Examples:
Chrome browser
VS Code
Spotify
Each process has its own memory space.
Thread
A thread is the smallest unit of execution inside a process.
A process can have:
One thread (single-threaded)
Multiple threads (multi-threaded)
Real-Life Example
Imagine a restaurant:
Restaurant = Process
Workers inside the restaurant = Threads
One restaurant can have many workers doing different tasks.
Browser Example
When you use:
setTimeout(() => {
console.log("Done");
}, 2000);
console.log("Start");
JavaScript remains single-threaded.
- The timer is handled by browser APIs, and when it finishes, the callback is placed in a queue. The Event Loop later moves it to the call stack. Output:
Start
Done
Process
A process is an independent running instance of a program with its own memory and resources.
Thread
A thread is the smallest unit of execution within a process. Multiple threads can exist inside a single process and share the same memory.
JavaScript
JavaScript is primarily single-threaded, meaning it executes code on one main thread using a single call stack. Asynchronous operations are handled with the Event Loop and runtime APIs.
Synchronous vs Asynchronous in JavaScript
1. Synchronous (Sync)
Synchronous means tasks execute one after another. The next task waits until the current task finishes.
Example
console.log("Task 1");
console.log("Task 2");
console.log("Task 3");
Output
Task 1
Task 2
Task 3
Execution flow:
Task 1 → Task 2 → Task 3
Each task waits for the previous one to complete.
2. Asynchronous (Async)
Asynchronous means a task can start, and JavaScript can continue executing other code without waiting for that task to finish.
Example
console.log("Start");
setTimeout(() => {
console.log("Task Finished");
}, 2000);
console.log("End");
Output
Start
End
Task Finished
Execution flow:
Start
↓
Timer starts (2 seconds)
↓
End
↓
Task Finished
JavaScript does not wait for the timer to finish.
Real-Life Example
Synchronous
Making tea:
Boil water
↓
Add tea powder
↓
Pour into cup
You must finish one step before the next.
Asynchronous
Ordering food online:
Order food
↓
Continue watching a movie
↓
Food arrives later
You don't sit idle waiting for the food.
Why Async is Needed?
Imagine:
console.log("Start");
// Downloading a huge file (takes 10 seconds)
console.log("End");
If JavaScript waited for every long task, the application would freeze.
Async allows:
Timers (setTimeout)
API calls (fetch)
Database operations
File operations
to happen without blocking the main thread.
Synchronous
Synchronous execution means code runs sequentially, and each operation waits for the previous one to complete.
Asynchronous
Asynchronous execution means long-running operations can run in the background while JavaScript continues executing other code, improving responsiveness and performance.
Reference
https://www.geeksforgeeks.org/javascript/functions-in-javascript/
https://www.geeksforgeeks.org/javascript/synchronous-and-asynchronous-in-javascript/
Top comments (3)
There are a number of things that are not correct in this post. Can I ask where you learned about functions? Where you taught this as part of a course, or have you just sourced information from the various sites you've posted links to above?
Presumably this is also an assignment of some kind?
Thanks for taking the time to read the post and leave feedback.
The article was written based on my learning from documentation, tutorials, and other resources, not as part of an assignment. It's intended as a beginner-friendly overview of these concepts.
If you've noticed specific inaccuracies, I'd genuinely appreciate it if you could point them out. I'm always open to correcting mistakes and improving the content. And I also attached the refernce link above in my blog refer it.
Looking at those sources, my main advice would be to avoid the geeksforgeeks site. I looked around the site briefly and there is a lot of poorly written and inaccurate content. A far better reference for JavaScript is MDN