DEV Community

Yash Kapure
Yash Kapure

Posted on • Updated 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

burtds profile image

Laravel Reverb: Getting started

Bert De Swaef -

jamescroissant profile image

What React beginners should know about React 19 first.

Yu Hamada -

ivordev profile image

Designing React Hooks for Flexibility

Ivor -

palchandu_dev profile image

Random Password Generate

Chandra Prakash Pal -