How To Declare Functions In JS?

How To Declare Functions In JS?

In any programming language function is a parametric block of a code, which is declared one time & called multiple times as per the requirement.

In JavaScript, functions are influenced by the function components like:

● Js code that forms the function body

● The list of Parameters added in the function definition

● The variable accessible from the lexical scope

● The returned value of the function

● The use of this() scope

● Named & Anonymous function

● The variable that holds the function object

● Arguments object

In this blog, you will learn how to declare functions in JavaScript?, how to write a function body?, how to call a particular JavaScript function? & which type of function needs to be used in which circumstances?

1. Function Declaration

In JavaScript, we declare a function with Function keyword followed by function name & list of parameters. To write a function body we use {..}.

For example,

function isOdd(n1)

{

return n1%2 == 1;

}

Result

isOdd(3) --> True;

isOdd(4)--> False;

In the above example, function isOdd(n1) is a function declaration, which defines function isOdd, which finds the given number is odd. this function declaration creates a function variable in the current scope with an identifier equal to the current scope. This function variable also holds a function object.

The function variable is hoisted up to the top of the current scope, which means that function can be called before the function declaration. The function which we have created is a named function, which means that the name property of the function holds a function name as its value which is very much helpful while tracking or debugging the code.

1.1. A regular function declaration

A regular function declaration matches for cases when it is needed. Here, the regular meaning is that you declare a function once & call it as per the requirement.

For example ,

function add(a,b)

{

return a+b;

}

Result

add(10,23) --> 33;

Here, in this example, a function declaration creates a variable in the current scope. This regular function is useful for the recursion also. Recursion is nothing calling a function within the same function body recursively.

For example, let's calculate the factorial of any number.

function fact(n1)

{

if

(n1==0)

{ return 1;

}

return n1 * fact (n1-1); }

Result -

fact(4) --> 24.

In the function fact(), a recursive call to function fact() is made by fact(n1-1).

1.2. Function declaration in Conditionals

In the JavaScript function body, we can use conditional statements like if, if__else, for & while. In these statements we declare a condition, when that condition is true then only the code we used for the condition executes otherwise it skips that code & starts executing the next lines of code.

Let's take an example of comparisons between 2 numbers - function compare(n1,n2)

{ if (n1>n2) return n1;

else return n2; } Result -compare (56,34) --> 56

In this example, 2 numbers get compared inside the if condition & if this condition is true then it will return an n1 as a greater number otherwise the else part gets executed to return an n2 number as a greater number.

2. Function Expression

A function expression is declared by a function keyword followed by an optional function name, a list of parameters & function body code in {...}.

For example,

const n = function (x,y)

{

return x*y;

};

document.write (n);

Result

n(2,3) --> 6

In this example, a function expression creates an object which can be used in different situations

● assigned to a variable as an object.

● can create a method on an object.

● can be used as a function callback.

2.1. Named function expression

A function is anonymous when it doesn't have any name. That is the name property of the function is empty. The above example is actually an anonymous function, which is assigned to a variable & whenever we need to call a function we need to call a variable name only.

When an expression has a name specified, then it is called a named function expression. When we make a named function expression the following things happened - Name property holds the function name. Inside the function body variable with the same name holds the function object.

3. Shorthand method definition

Shorthand method definition can be used in a method declaration on object literals. you can define them using the function name, list of parameters followed by the function body in {..}.

For example,

const elements = {

array : [];

add(..array) {

this.array.push(..array);

}

Result

elements.add(1,3,5) --> array : [1, 3,5]

Here, add method in elements object is used by shorthand method definition. Which are usually called elements.add().

This shorthand method definition gives the following benefits

● A shorter syntax is easier to understand.

● It is useful for debugging as it creates a named function contrary to function expression.

4. Arrow function

An arrow function defined by adding the number of parameters within parenthesis followed by fat arrow => & function body in {..}.

When an arrow function has only one parameter you can omit the parenthesis & if it has only one statement in the function body you can omit the {} as well.

For example, const mul = (x,y) => x*y;

Result

mul(4,5) -->20

In the above example, mul is an object which calls a function to multiply the numbers which are passed to the function.

The arrow function has the following properties -

● you can't use this in the arrow function.

● They are not well suited to define the object method.

● Arrow functions are not hoisted, they need to define before use.

● const is always safer to use than var because function expression is always a constant value.

5. Generator function

A generator function in JavaScript returns a Generator object. Its syntax is similar to the function expression, function declaration, or method declaration with only the star * is required in the function definition.

For example,

function* indexGenerator()

{

var i =0;

while(true)

{

i++;

}

}

const index = indexGenerator();

Result

index.next().value --> 0

index.next().value --> 1

Here, we are generating the next index which starts from 0. Whenever you call an inbuilt method next it will generate a next index.

6. New Function

In JavaScript functions are the first-class object, a function is a regular object of a type function. The above function declaration types define the same function object type.

For example,

function sum1(a,b)

{

return a+b;

}

const sum2 = function(a,b)

{

return a+b ;

}

const sum3 = (a,b)=>a+b;

Result

typeOf sum1 == function.

typeOf sum2 == function.

typeOf sum3 == function.

Here, the function object type has a constructor: Function. when a Function is invoked as a constructor new function(param1, param2, body string) is created. A param1, param2 becomes a function parameter & body string becomes a function body.

In JavaScript function declarations never use a new function() because the function body is evaluated on the runtime.

So, which JavaScript function declaration is useful?

It completely depends upon the situation. But still, you can follow some rules:

● An arrow function is good if you are using this in enclosing function

● When you want to declare a function on object literals then shorthand function declaration is useful.

● You can't use new for function declaration

You've successfully subscribed to HTML5Awesome
Great! Next, complete checkout to get full access to all premium content.
Welcome back! You've successfully signed in.
Unable to sign you in. Please try again.
Success! Your account is fully activated, you now have access to all content.
Error! Stripe checkout failed.
Success! Your billing info is updated.
Billing info update failed.