DEV Community

Yash Kapure
Yash Kapure

Posted on • Edited on

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.

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

Read next

mayankchawdhari profile image

CID-FUNNY-LOGIN

Mayank Chawdhari -

rigbyjs profile image

Medusa B2B Starter

Rigby -

ayusharpcoder profile image

🎥Exploring 3D Timewave Ripple

Ayush Kumar Vishwakarma -

encodedots profile image

Flutter 3.27.0 Release Notes: In-Depth Analysis

Encodedots Technolabs -