Mahijendra B V K

Functions in JavaScript

Mahijendra 's photo
Mahijendra
·

3 min read

Function

Functions are one of the fundamental building blocks in JavaScript. A JavaScript function is a block of code designed to perform a particular task. A JavaScript function is executed when "something" invokes it (calls it).

Why Functions?

  • You can reuse code: Define the code once and use it many times.
  • You can use the same code many times with different arguments, to produce different results.

A Function is defined by using the function keyword followed by the function name and parentheses ( ), to hold inputs(parameter1, parameter2) if any.

A function can have zero or more parameters separated by commas.

// creating a function
function myFun(a, b) {
  return a * b;   // The function returns the product of a and b
}

Functions can be parameterized and non-parameterized which means they may or may not take any input.

Functions are also objects

Functions are also maintained as objects. However, they are special as they are invocable (callable).

The typeof returns function for functions however, functions can still be given key-value pairs just like objects.s

function hello(){
 console.log("hello")
}
hello.a = 1
hello.b = 2

// works fine

typeof(hello) // "function"

Function Return

When JavaScript reaches a return statement, the function will stop executing.

If the function was invoked from a statement, JavaScript will "return" to execute the code after the invoking statement.

var x = myFunction(4, 3);   // Function is called, return value will end up in x

function myFunction(a, b) {
  return a * b;             // Function returns the product of a and b
}

//The result in x will be : 12

Function Declarations

A function declaration on the other hand, is a statement that defines a named variable with a value of type function.

Declared functions are not executed immediately. They are "saved for later use", and will be executed later, when they are invoked (called upon).

function myFunction(a, b) {
  return a * b;
}

Function Expression

A JavaScript function can also be defined using an expression.A function expression can be stored in a variable:

var x = function (a, b) {return a * b};

After a function expression has been stored in a variable, the variable can be used as a function. Functions stored in variables do not need function names. They are always invoked (called) using the variable name.

Arrow Functions

Arrow function or fat arrow function is a shorthand notation for defining an anonymous function in JavaScript.

Arrow functions in JavaScript had been there for a while now and I cannot stress enough on how convenient it is for a developer to use arrow functions while coding. Arrow function is something every web developer must know.

The best way to know how an arrow function looks like is to compare it with a traditional JavaScript function.

//Traditional function in JS
var myFunction = function(parameter){
    return result;
}
//Arrow function in JS
var myFunction = (parameter) => { return result; }

Are Arrow functions Beneficial?

Well, that depends. In terms of functionality and ease of use, Arrow functions are the best. But when it comes to readability and understanding, you might find this arrow notation to be a little inconvenient. If there are many nested functions, keeping track of all the functions would be tedious as there are no keywords like function and return used in arrow functions.

Hope this was useful! Let me know in the comment section.

functionsJavaScriptprogrammingWeb Development2Articles1Week