DEV Community

Yash Kapure
Yash Kapure

Posted on • Edited on

1 1 1 1 1

Functions in JavaScript

#javascript #webdev #programming #beginners

Function

  • A Function Declaration (defining a function)

  • A Function Call (calling/executing a function)

Types of Functions in JavaScript

  • Normal(Regular) Function:

In JavaScript, a regular function is a reusable block of code that performs a specific task. It is defined using the function keyword, followed by a name (optional) and a set of parameters enclosed in parentheses.

//Function Declaration
function functionName(a,b){
  return a+b;
}

// function call
const res = functionName(a,b);
console.log(res);
Enter fullscreen mode Exit fullscreen mode
  • Anonymous Function:

An anonymous function in JavaScript is a function without a specified name. It is typically defined on the fly and assigned to a variable or used directly as an argument in a function call.

const functionName = function(a,b){
  //Do something
}
const result = functionName(3, 4);
console.log(result);
Enter fullscreen mode Exit fullscreen mode
  • Immediately Invoked Function Expression (IIFE):

An Immediately Invoked Function Expression (IIFE) is a JavaScript design pattern where a function is defined and executed immediately after its creation. This pattern is often used to create a private scope for variables, preventing them from polluting the global scope.

const result = (function(a,b){
   return a+b; 
  })(2,4);
Enter fullscreen mode Exit fullscreen mode
  • Arrow Function:

An arrow function in JavaScript is a concise way to write anonymous functions. Arrow functions were introduced in ECMAScript 6 (ES6) and provide a more compact syntax compared to traditional function expressions.

const functionName = (a,b) => {
   // do something
}
Enter fullscreen mode Exit fullscreen mode
  • Implicit Return:

If the function body consists of a single expression, the return statement is implicit.

const functionName  = (a, b) => a + b;
console.log(functionName(3, 4));
Enter fullscreen mode Exit fullscreen mode

NOTE!: Every function in JavaScript returns undefined unless and until specified.

Please feel free to add more information to the post if you have any.

Postmark
 Promoted

Postmark Image

20% off for developers shipping features, not fixing email

Build your product without worrying about email infrastructure. Our reliable delivery, detailed analytics, and developer-friendly API let you focus on shipping features that matter.

Start free

Top comments (1)

Collapse
 
svidlak profile image
Max Svidlo •

The following case throws an exception error because of how hoisting works in JS:

x();

const x = () => {
    console.log('wawa');
}
Enter fullscreen mode Exit fullscreen mode

while the regular function will print "wawa" because of how hoisting works:

x();

function x() {
    console.log('wawa');
}
Enter fullscreen mode Exit fullscreen mode

also, different function types handling this and scoping in different ways:

function test(){
    return {
        y: 'test',
        firstFunc(){
            console.log(this)
        },
        secondFunc: () => {
            console.log(this);
        }
    }
}

const x = test();
x.firstFunc()
x.secondFunc()
Enter fullscreen mode Exit fullscreen mode

firstFunc() will print out the scope of the test() function, while, the secondFunc() will print out the global scope, as arrow functions inherit the this from the surrounding scope, instead of inheriting current scope

profile
_SurveyJS
 Promoted

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more