DEV Community

loading...

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

The Nerdy Dev
I am a Full Stack Developer and occasionally a freelancer too. Building products is my profession, Creating content is my passion.
・Updated on ・4 min read

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 
}
Enter fullscreen mode Exit fullscreen mode

Then to invoke it we just have to say:

<name_of_function>(); 
Enter fullscreen mode Exit fullscreen mode

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. 
Enter fullscreen mode Exit fullscreen mode

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>(); 

Enter fullscreen mode Exit fullscreen mode

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 yet
var add = function(numberOne, numberTwo) { 
      return numberOne + numberTwo; 
} 

// Example for Function Declarations

console.log(add_2(3,4)); // logs 7 (declarations are loaded first before execution happens)
function add_2(numberOne, numberTwo) { 
     return numberOne + numberTwo; 
}  

Enter fullscreen mode Exit fullscreen mode

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>(); 

Enter fullscreen mode Exit fullscreen mode

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 :

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

πŸ‘‰πŸ» Follow me on Twitter : https://twitter.com/The_Nerdy_Dev

πŸ‘‰πŸ» Check out my YouTube Channel : https://youtube.com/thenerdydev

Discussion (2)

Collapse
vineethtrv profile image
Vineeth.TR

Hi one doubt,
How did you add syntax highlight on Dev code ?

Collapse
tbhaxor profile image
Gurkirat Singh • Edited

Hi vineeth, here you go docs.github.com/en/github/writing-...