Beginner JavaScript - 9 - Functions and Different Ways of Declaring them

Hey everyone ,

In this article, let us discuss about the Functions in JavaScript. This is the ninth part of my Beginner JavaScript Series on Dev.

Functions in JavaScript - A Complete Picture

Functions in JavaScript are one of the most fundamental building blocks that you will often find being used heavily in all the codebases that you work with.

" A function is kind of similar to a procedure, so you basically define a procedure similar to what we have for preparing a recipe or something like that. The job of a function is to perform a task for which we define a set of statements inside the body of the function and all that happens on the execution of the function is the execution of those statements line by line to do some work and optionally return a value. "

Now for a procedure to serve the role of a function, it should take some input as arguments and return an output where there is some obvious relationship between the input and the output.
To use a function, as a first step we need to define it.

function <name_of_function>(argument_one, argument_two,...) {    // here goes the body of the function }

Then to invoke it we just have to say:

<name_of_function>(); 

Note: The invocation parenthesis is a must after the name of the function in order to call it.

So now we know the syntax for declaring a function. Let us see an example of a simple function to multiply two numbers and then see how we can invoke it.

function multiplyTwoNumbers(numberOne, numberTwo) {  // Name of the function - multiplyTwoNumbers  // Arguments : numberOne, numberTwo  const product = numberOne * numberTwo;   return product; } // Now in order to call it we need to make use of the invocation parenthesis and store the returned result in a variable. // Let's name it as result. const result = multiplyTwoNumbers(2,3);console.log(result);  // logs 6 to the console. 

Different Ways of Declaring Functions

1. Function Declarations

2. Function Expressions

3. Arrow Functions

Let us first talk about Function Declarations.

Function Declarations

A function definition (also called a function declaration, or function statement) consists of the function keyword, followed by:

• 1. The name of the function.
• 2. A list of parameters to the function, enclosed in parentheses and separated by commas.
• 3. The body of the function that is enclosed in the curly braces.

Check the multiplyTwoNumbers function for example.

Function Expressions

A function expression is very similar to and has almost the same syntax as a function declaration. But there is a slight difference in the syntax as well. Let us understand the syntax.

const <name_of_function> = function (argument_one, argument_two,...) {  // body of the function } // To invoke the function, it is dead simple, all you have to do // is to use the invocation parenthesis to call it. <name_of_function>(); 

But... what is the difference between function declarations and function expressions, then ?

The difference lies in how the browser loads them into the execution context.

Function declarations get loaded before any code gets executed. They are always hoisted at the top of the file.

Function expressions load only when the interpreter reaches that line of code where they are declared.

So if you try to call a function expression before it's loaded, you'll get an error! If you call a function declaration instead, it'll always work, because no code can be called until all declarations are loaded.

Let us see an example for it :

// Example for Function Expressions console.log(add(3,4)); // ERROR! add wasn't loaded yetvar add = function(numberOne, numberTwo) {       return numberOne + numberTwo; } // Example for Function Declarationsconsole.log(add_2(3,4)); // logs 7 (declarations are loaded first before execution happens)function add_2(numberOne, numberTwo) {      return numberOne + numberTwo; }  

Arrow Functions

Arrow functions in ES2015 provide a more concise syntax but it is more or less the same as a function expression.

An arrow function expression is an anonymous function expression written with the fat arrow syntax ( => ). Like traditional function expressions, arrow functions are not hoisted, and so you cannot call them before you declare them.

const <name_of_function> = (argument_one, argument_two,...) => {  // body of the function } // To invoke the function, it is dead simple, all you have to do // is to use the invocation parenthesis to call it. <name_of_function>(); 

We will learn more about arrow functions in a later post.
So this is it for this one.

Check these videos where I cover everything pertaining to this article with more examples.

If you are looking to learn Web Development, I have curated a FREE course for you on my YouTube Channel, check the below article :

(2021) - Web Developer Full Course : HTML, CSS, JavaScript, Node.js and MongoDB

The Nerdy Dev Apr 28 2 min read

#html #css #node #javascript

Looking to learn React.js with one Full Project, check this out :

Learn React with one BIG Project [NOTES included] - Demo and Video Link

The Nerdy Dev Jun 10 1 min read

#100daysofcode #javascript #react #webdev

Follow me on Twitter : https://twitter.com/The_Nerdy_Dev

Check out my YouTube Channel : https://youtube.com/thenerdydev