Declaration, Expression, Immediately Invoked (IIFE) and Arrow Functions
Function declarations
When you use the function
keyword to declare a named function and do not assign it to another variable, it is a function declaration.
function greet(firstName = "new", lastName = "user") {
return `Hello ${firstName} ${lastName}`;
}
console.log(greet("Parwinder", "Bhagat")); // Hello Parwinder Bhagat
console.log(greet()); // Hello new user
greet
is an example of a function declaration.
You see that in my first function invocation, I am passing the required arguments to the function. It works even without those arguments in the second invocation. This is called default values. You would do this when the caller of the function could pass you no value for an argument. When this happens, the function falls back on default values.
Function expression
When a function is assigned to a named variable, it is called a function expression. When using a function expression, we mostly use an anonymous function (no name for the function).
const greet = function (firstName = "new", lastName = "user") {
return `Hello ${firstName} ${lastName}`;
}
console.log(greet("Parwinder", "Bhagat")); // Hello Parwinder Bhagat
console.log(greet()); // Hello new user
Function declaration and expressions work almost identical in most situations. Function decelerations are loaded before any code is executed, whereas expressions are loaded only when the JavaScript interpreter reaches that line of code. This happens because of the principle of hoisting in JavaScript. It is a bit of an advanced topic, and we will discuss it in a future blog post.
Immediately invoked function expressions (IIFE)
IIFE is a function that is declared and invoked at the same time. You create them by using anonymous functions and enclosing the function in round brackets ()
. You can then invoke them by merely calling the expression immediately with a followed pair of round brackets.
(function(name){ // function expression enclosed in ()
console.log(`Hello ${name}`); // Hello Parwinder
})("Parwinder"); // Immediately called by using () in the end. Yes we can pass arguments
Arrow functions
An arrow function expression is a compact version of a regular function expression. The name comes from the symbol =>
that is used in arrow functions.
const hello = () => {
return "Hello World!";
}
console.log(hello()); // Hello World
You can see that we have taken away the function
keyword and added the =>
symbol. We can make this more abbreviated.
const hello = () => "Hello World!";
console.log(hello()); // Hello World
We have omitted the return
keyword. This is entirely acceptable, and we can do this when a function has one statement, and that statement returns a value.
Arrow functions can also take arguments.
const hello = (name) => `Hello ${name}`;
console.log(hello("Parwinder")); // Hello Parwinder
If you have only one parameter, the parentheses around it can be removed.
const hello = name => `Hello ${name}`;
console.log(hello("Parwinder")); // Hello Parwinder
Arrow functions are not just prettier/compact versions of regular function expressions, but they also don't have their bindings to this
, arguments
, super
or new.target
. We will go over these principles of JS in the future blog posts.
Top comments (1)
Thanks thanks thanks for you and thanks for your efforts :)