DEV Community

Dharan Ganesan
Dharan Ganesan

Posted on

Dive into functions in JS🧑‍💻

A function is a block of code that performs a specific task. It can accept parameters and return values. Functions in JavaScript are treated as first-class objects, which means they can be assigned to variables, passed as arguments, and returned from other functions.

Types of Functions

1. Function Declaration

A function declaration is a statement that defines a function with a name, parameters, and a body.

function greet(name) {
  console.log(`Hello, ${name}!`);
}
Enter fullscreen mode Exit fullscreen mode

2. Function Expression

A function expression is a way to define a function as an expression, which can be assigned to a variable.

const greet = function(name) {
  console.log(`Hello, ${name}!`);
};
Enter fullscreen mode Exit fullscreen mode

3. Arrow Function

An arrow function is a shorthand syntax for defining a function expression.

const greet = (name) => {
  console.log(`Hello, ${name}!`);
};
Enter fullscreen mode Exit fullscreen mode

4. Anonymous Function

An anonymous function is a function without a name.

const add = function(a, b) {
  return a + b;
};
Enter fullscreen mode Exit fullscreen mode

5. IIFE

An IIFE (Immediately Invoked Function Expression) is a function that is executed as soon as it is defined.

(function() {
  console.log('IIFE executed');
})();
Enter fullscreen mode Exit fullscreen mode

Function Parameters and Arguments

A function parameter is a variable listed in the function definition, while an argument is the value passed to the function when it is called.

function greet(name) { // "name" is a parameter
  console.log(`Hello, ${name}!`);
}

greet('John'); // 'John' is an argument
Enter fullscreen mode Exit fullscreen mode

Functions can have multiple parameters and arguments.

function add(a, b) {
  return a + b;
}

console.log(add(2, 3)); // 5
Enter fullscreen mode Exit fullscreen mode

Function Return Values

A function can return a value using the return statement. If a function doesn't return a value, it implicitly returns undefined.

function add(a, b) {
  return a + b;
}

const result = add(2, 3);
console.log(result); // 5
Enter fullscreen mode Exit fullscreen mode

Function Scope

Variables declared inside a function are only accessible within the function's scope.

function greet() {
  const message = 'Hello, world!';
  console.log(message);
}

greet(); // 'Hello, world!'
console.log(message); // ReferenceError: message is not defined
Enter fullscreen mode Exit fullscreen mode

Function Hoisting

Function declarations are hoisted to the top of the scope, which means they can be called before they are defined.

greet(); // 'Hello, world!'

function greet() {
  console.log('Hello, world!');
}
Enter fullscreen mode Exit fullscreen mode

However, function expressions and arrow functions are not hoisted and must be defined before they are called.

greet(); // TypeError: greet is not a function

const greet = function() {
  console.log('Hello, world!');
};
Enter fullscreen mode Exit fullscreen mode

Other type of functions

Callback Function:

A callback function is a function that is passed as an argument to another function and is called by that function. A common use case for callback functions is with asynchronous code, where the callback is executed once the asynchronous operation is complete. Here's an example:

function getUser(id, callback) {
  setTimeout(() => {
    const user = {
      id: id,
      name: 'John Doe'
    };
    callback(user);
  }, 2000);
}

getUser(123, (user) => {
  console.log(user); // Output: { id: 123, name: 'John Doe' }
});
Enter fullscreen mode Exit fullscreen mode

Higher-Order Function:

A higher-order function is a function that takes one or more functions as arguments or returns a function as its result. A common use case for higher-order functions is with array methods like map, filter, and reduce.

const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map((num) => {
  return num * 2;
});

console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]
Enter fullscreen mode Exit fullscreen mode

Advanced

Closures

Closures are a powerful feature of JavaScript that allows a function to access variables from its parent scope, even after the parent function has returned. This can be used to create private variables and functions, which are not accessible from outside the function.

function counter() {
  let count = 0;

  function increment() {
    count++;
    console.log(count);
  }

  return increment;
}

const myCounter = counter();
myCounter(); // Output: 1
myCounter(); // Output: 2
Enter fullscreen mode Exit fullscreen mode

Currying

Currying is a technique in functional programming that allows a function to take multiple arguments as a series of single-argument functions. This can make your code more modular and easier to reuse.

function add(a) {
  return function(b) {
    return a + b;
  }
}

const add2 = add(2);
console.log(add2(3)); // Output: 5
Enter fullscreen mode Exit fullscreen mode

Memoization

Memoization is a technique that allows a function to cache its results based on its input arguments. This can improve the performance of a function, especially if it performs complex calculations or data retrieval.

function fibonacci(n, memo = {}) {
  if (n in memo) return memo[n];
  if (n <= 1) return 1;
  memo[n] = fibonacci(n - 1, memo) + fibonacci(n - 2, memo);
  return memo[n];
}

console.log(fibonacci(10)); // Output: 89
Enter fullscreen mode Exit fullscreen mode

🎉 Congratulations, you have now learned about functions

Top comments (3)

Collapse
 
jonrandy profile image
Jon Randy 🎖

The function stored in add in your anonymous function example is not an anonymous function. The act of assigning an anonymous function to a variable gives it a name:

const add = function(a, b) {
  return a + b
}
console.log(add.name)  // 'add'
Enter fullscreen mode Exit fullscreen mode

Compare this to checking the name of an anonymous function:

console.log( (function(a, b) { return a+b }).name )  // <empty string>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
dhrn profile image
Dharan Ganesan

nice catch, thanks!. will update this

Collapse
 
corners2wall profile image
Corners 2 Wall

Good article.
Btw u can do curry with bind :)
function sum(a,b) {
return a + b
}
const plusTwo = sum.bind(null, 2);

Same behavior for your example of curry