Essential Function Concepts to Master Before Your Next Interview

Function Declaration

In javascript, the function keyword is used to declare a function. The term "function declaration" refers to the process of defining a function prototype, which includes the function name, parameters, and statements.

Syntax:

function name(parameter){
  statement
}

• Function Statement and Function Definition are other terms for function declaration.

Example:

function square (num){
  return num*num
}

Function Expression

Like any other data, functions can be stored in Variables. We must use the function keyword to create an anonymous function to accomplish this.

Syntax:

const variableName = function(parameter){
  statement
}

variableName : name of the variable

Example:

const square = function (num){
  return num*num
}
// with Arrow Function
const square = num =>num*num

The function on the right hand is a Anonymous Function. Anonymous Function : Anonymous functions are functions that don't have a name and can be declared using the 'function' ' keyword or 'arrow function.

Difference between function statement and function expression

Hoisting

If we call a function statement before it is initialized, it will function normally and produce output. Example:

square(2)
function square (num){
  return num*num
}
// -> 4

Learn how functions are hoisted in javascript to gain a better understanding of how it works.

However, if we call Function Expression before it has been initialized, a Reference error will occur, stating that the variable cannot be accessed. This is due to the fact that in JavaScript, function expressions are considered like any other variable.

square(2)
const square = function (num){
  return num*num
}
// -> ReferenceError: Cannot access 'square' before initialization

Gist: function statements are hoisted but not function expression

Named Function Expression

This is a little strange, however we can do it with javascript. We can assign a named function to the variable

const squareFunction = function square (num){
  return num*num
}

Note: here squareFunc can be called but not square We'll get an error if we call square because square isn't in the global scope. It exists in that variable's local scope.

Callback Function

A callback function is a function that is passed to another function as an argument, which can be invoked inside the outer function to do some action.

Example:

 function greeter(name){
      return `Hello, ${name}`
}

function greetUser () {
    const username = "mimansha"
    return greeter(username)
}

console.log( greetuser() )

// ->  Hello, mimansha

First Class Function

First class Function is nothing but the ability to use function as value. We can use Functions as arguments, return a function, and assign a function to variable.

First Class Citizen : ability to use function as value makes function First Class Citizen

First class Citizen is same as First class Function

Arrow vs Regular Function

• syntax is different
• we don't need implicit keyword in arrow function
• arguments keyword is not accessible inside arrow function
• this refers to global in arrow function and tend to bind with the parent of arrow function