1. Function Declaration (Named Function)
This is the most traditional way to define a function. It uses the function
keyword followed by a name, parameters in parentheses, and a block of code in curly braces.
function greet(name) {
return "Hello, " + name + "!";
}
console.log(greet("Alice")); // Output: Hello, Alice!
- Hoisting: Function declarations are hoisted to the top of their scope, so you can call them before they are defined in the code.
2. Function Expression
A function expression defines a function inside a variable. The function can be anonymous or named, and it is not hoisted like function declarations.
const greet = function(name) {
return "Hi, " + name;
};
console.log(greet("Bob")); // Output: Hi, Bob
- Function expressions are useful when passing a function as a value.
- Not hoisted, so must be defined before use.
3. Arrow Functions (ES6)
Introduced in ES6, arrow functions offer a more concise way to write functions. They are especially useful for short, simple operations and are often used in callback functions.
// Basic syntax
const add = (a, b) => a + b;
console.log(add(3, 5)); // Output: 8
// With one parameter
const square = x => x * x;
// With no parameters
const sayHello = () => console.log("Hello!");
- Does not have its own
this
: Useful in cases where you don’t want to bindthis
. - No
arguments
object: You can’t accessarguments
in arrow functions.
4. Parameters vs. Arguments
- Parameters: Variables listed in the function definition.
- Arguments: Actual values passed to the function when it's invoked.
function multiply(a, b) { // a and b are parameters
return a * b;
}
console.log(multiply(4, 5)); // 4 and 5 are arguments
5. Default Parameters
You can set default values for function parameters to prevent undefined
when no argument is passed.
function greet(name = "Guest") {
return "Hello, " + name;
}
console.log(greet()); // Output: Hello, Guest
6. Rest Parameters
Use the rest operator (...
) to accept multiple arguments as an array.
function sum(...numbers) {
return numbers.reduce((acc, val) => acc + val, 0);
}
console.log(sum(1, 2, 3, 4)); // Output: 10
7. Anonymous Functions
Functions without a name. Often used in expressions and as callbacks.
setTimeout(function() {
console.log("Executed after 2 seconds");
}, 2000);
8. Callback Functions
A callback is a function passed as an argument to another function, to be executed later.
function processUserInput(callback) {
const name = "John";
callback(name);
}
processUserInput(function(name) {
console.log("Welcome, " + name);
});
9. Immediately Invoked Function Expressions (IIFE)
A function that runs immediately after it is defined. Often used to avoid polluting the global scope.
(function() {
console.log("This runs immediately!");
})();
10. Pure vs. Impure Functions
- Pure Function: Given the same input, always returns the same output and has no side effects.
- Impure Function: May produce different results or affect external state (e.g., modifying global variables).
11. Returning Functions from Functions
In JavaScript, functions are first-class citizens, meaning you can return a function from another function.
function outerFunction() {
return function(name) {
return "Hello from inner function, " + name;
};
}
const inner = outerFunction();
console.log(inner("Alice")); // Output: Hello from inner function, Alice
12. Closures
A closure gives you access to an outer function’s scope from an inner function, even after the outer function has closed.
function outer() {
let count = 0;
return function() {
count++;
return count;
};
}
const counter = outer();
console.log(counter()); // 1
console.log(counter()); // 2
Explanation: The inner function remembers the value of count
even after outer()
has executed.
JavaScript Function
1. What is the behavior of function declarations in JavaScript?
2. What will be the output of the following arrow function?
const add = (a, b) => a + b;
console.log(add(2, 3));
3. What is true about function expressions in JavaScript?
4. What is true about 'this' in arrow functions?
5. Which of the following is an example of a higher-order function?
6. What is a closure in JavaScript?
7. What will be the output of the following code?
let numbers = [1, 2, 3, 4, 5];
let result = numbers.filter(num => num > 3);
console.log(result);
8. What is a callback function in JavaScript?
9. Which statement is true about arrow functions in JavaScript?
10. What will be the output of the following code using 'reduce'?
let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum);
11. What is the main difference between function declarations and function expressions in terms of hoisting?
12. What does the 'map' function do in JavaScript?
13. What will be the output of the following code using 'reduce'?
let arr = [1, 2, 3];
let sum = arr.reduce((acc, value) => acc + value, 0);
console.log(sum);
14. What does a closure in JavaScript allow a function to do?
15. Which of the following is a characteristic of a higher-order function?
16. What does the 'filter' method do in JavaScript?
17. What is the main use of a callback function?
18. What will be the output of the following code?
let arr = [2, 3, 4];
let product = arr.reduce((acc, value) => acc * value, 1);
console.log(product);
19. How does 'this' work in arrow functions?
20. In JavaScript, are function declarations hoisted?