Functions in JavaScript

What is a function?

A function is a snippet of code that has been written to perform a certain task and which can be called in the code at a later point in time or in javascript, it can be called even before the function has even been initialized which brings us to the concept of hoisting, which will be covered in another article shortly.

So, in how many ways can a function be created in Javascript?

There are a few different ways in which functions can be created in Javascript that have to be discussed which might be helpful for you in understanding a lot of books, blogs, journals, etc. which generally follow the terminology.

Function Statement or Function Declaration:

How do we create a function using the function statement?

function functionStatement(){
    console.log("Function Statement");
}
function functionDeclaration(){
    console.log("Function Statement");
}

As you can see in the above mentioned code snippet, a function statement or a function declaration (both of them serve the same purpose) is the most general way of creating a function in Javascript, which involves using the function keyword and then adding the name of the function following the function keyword.

Function Expression and Anonymous Functions:

A very good and reusable feature of functions is that we can assign the function to a variable, which can then, in turn, be used to call the function as many times as we want, further in the code.

How do we create a function using the function expression?

const functionExpression = function() {
    console.log("Function Expression");
}
const anonymousFunction = function() {
    console.log("Function Expression");
}

As you can see in the above mentioned code snippet, a function with no name, has been assigned to a variable named functionExpression. The reason I’ve used the const keyword here and not the let and var keywords is because the function we are assigning here will be constant and we won’t be changing it.

An anonymous function is nothing but a function without a name, and we can only assign those functions to other variables similar to the above code snippet.

Named Function Expression:

A named function expression is very similar to a function expression or to an anonymous function, with the only difference being the addition of a name to the already existing code.

How do we create a named function expression?

const namedFunctionExpression = function insideName(){
    console.log("Named Function Expression");
    console.log(insideName);
}
namedFunctionExpression();
insideName();

What is the output for the above code? (it’s tricky)

Named Function Expression
ƒ name(){
    console.log("Named Function Expression");
    console.log(name);
}
Uncaught ReferenceError: insideName is not defined
    at <anonymous>:7:1

Don’t panic, I know it’s kinda tricky. So, let’s decode what’s happening…

1. We created a named function expression on line 1 with the name, name, and the function is intended to log a string “Named Function Expression” to the console, whenever we call the function.
2. We called the function using the name of the variable, i.e, “namedFunctionExpression” on the 5th line, and this will log a string “Named Function Expression” to the console.
3. Here comes the tricky part, we called the same function but this time with the name, we declared inside of the declared variable, i.e, insideName, but this time we get an error that says, Uncaught ReferenceError: insideName is not defined, what does this error tell us? When we declare a namedFunctionExpression and give it a name on the inside (insideName here), that name on the inside should only be used when that function is being called on the inside, i.e, if we look at the 3rd line in the code snippet, we can see that the function is being called on the inside, and the name that is being used is the name that has been given to the function on the inside.
4. So, giving a name to the function on the inside, would only us in using that name only on the inside. Hope you got that clear…

Arrow Function Expressions:

Arrow function expressions have been quite a new addition to Javascript with other things like the var, let, const keywords in ES6 (ECMAScript 6 or ECMAScript 2015). An arrow function expression is always a function expression and is comparatively a much compact and easy way to write the same function, that we’ve written in the previous sections.

How do we create an arrow function expression?

// Function Statement
function functionStatement(){
    console.log("Function Statement");
}
// Arrow Function Expression
const arrowFunction = () => "Arrow Function";

As we can see from the above code snippet, the function statement is the traditional way of creating a function, and the arrow function is a much more recently introduced way of creating a function inside of Javascript.

Using the arrow functions would reduce the number of lines in the code significantly, but as always everything has its bane too. There are certain restrictions to arrow functions, so these cannot be used all the time, rather they’ll do your work almost at all times.

So, this has been “Functions in JavaScript”. I will come back again with another concept in JavaScript very soon, until then…👋