Functions in Javascript
Function Expression:
A function expression in JavaScript is when you assign a function to a variable. It's an alternative way to define a function compared to the traditional function declaration. In your example:
const square = function(num) {
return num * num;
};
square(5); // Returns 25
Here, const square
is a function expression where the function is assigned to the variable square
.
First-Class Functions:
In JavaScript, functions are first-class citizens, which means they can be treated like any other variable. Specifically, this means you can pass functions as arguments to other functions, return them from other functions, and assign them to variables.
function displaySquare(fn) {
console.log("Square is " + fn(5));
}
displaySquare(square); // Calls displaySquare with the square function as an argument
Here, displaySquare
takes a function as an argument (fn
) and then calls that function with a value (5
in this case).
IIFE (Immediately Invoked Function Expression):
An IIFE is a function that is executed immediately after it is defined. It's often used to create a local scope to avoid polluting the global scope. Here's an example:
(function square(num) {
console.log(num * num);
})(5); // Outputs 25
The function (function(num) { console.log(num * num); })
is defined and immediately invoked with (5)
as the argument.
One Output Based Question (IIFE Example):
(function(x) {
return (function(y) {
console.log(x); // Outputs 1
})(2);
})(1);
The output of this code is 1
because the inner IIFE is immediately invoked with 2
as the argument, and it logs the value of x
, which is 1
.
Function Hoisting:
In JavaScript, function declarations are hoisted to the top of their scope. This means you can call a function before it is declared in the code. For example:
functionName(); // Outputs "rsc"
function functionName() {
console.log("rsc");
}
Even though functionName()
is called before it's defined, it works because of hoisting.
Callback Function:
A callback function is a function that is passed as an argument to another function and is executed inside that function. It's commonly used in asynchronous programming to handle asynchronous operations.
Arrow Function:
Arrow functions are a shorthand way to write functions in JavaScript. They have a concise syntax and also have some differences compared to regular functions, like lexical scoping of this
. Here's an example of an arrow function:
const add = (first, second) => first + second;
In this example, add
is an arrow function that takes two parameters and returns their sum.
Here's a breakdown of the points you mentioned:
Syntax: Arrow functions have a shorter syntax compared to regular functions.
Implicit return keyword: Arrow functions have implicit return for single expressions without curly braces (
{}
).Arguments: Arrow functions don't have their own
arguments
object.This keyword: Arrow functions do not have their own
this
binding; instead, they use thethis
value of the enclosing lexical context.
Subscribe to my newsletter
Read articles from Abhishek Dandriyal directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
Abhishek Dandriyal
Abhishek Dandriyal
Frontend Developer , I design and code user-friendly and responsive web applications and projects using,HTML5 , React /Redux MUI . I collaborate with backend developer, UI/UX designers, and project managers to deliver high-quality products that meet the clients' needs and expectations.