JavaScript: Function Types You Should Know!

Renan Ferro - Apr 26 '23 - - Dev Community

Heyy, how are you?!

Have you ever had to deal with some JavaScript functions just... they weren't exactly the way you expected? Maybe it looked like the functions were written in a different way than what you've seen and I don't mean "logically" speaking... ๐Ÿ˜…

If yes, I would like to introduce you to some possibilities of types of functions that we can find!

So, let's start it and see some basic types!


๐ŸŽฏ Named Function (Traditional way):

The traditional way of creating a function and it's a set of statements that performs a task or calculates a value!

function sayHello() {
  console.log('Hey everyone!');
}

sayHello();

// Output
'Hey everyone!'
Enter fullscreen mode Exit fullscreen mode

๐ŸŽฏ Arrow Function:

Arrow Functions are simpler, are always unnamed and compact than traditional function expression!

const sayHello = () => console.log('Hey everyone!');

sayHello();

// Output
'Hey everyone!'
Enter fullscreen mode Exit fullscreen mode

๐ŸŽฏ Anonymous Function:

Anonymous Functions don't have a name specified after the function declaration, so we declare it with a variรกvel to call this function at a some point and the function is anonymous but assigned to a variable!

const sayHello = function () {
  console.log('Hey everyone!');
}

sayHello();

// Output
'Hey everyone!'
Enter fullscreen mode Exit fullscreen mode

๐ŸŽฏ Higher Order Function:

Higher Order Functions in a nutshell words is a function that can take one or more functions as arguments or return a function as output. Some of Higher order types is like: reduce, filter, map and others.

// A simple function to print a console.log
function sayHello(){
  console.log('Hey everyone!');
}

// Higher Order Function Example:
function higherOrderFnExample(functionToExecute){

  console.log('I can do anything!');

  functionToExecute()
}

higherOrderFnExample(sayHello);
Enter fullscreen mode Exit fullscreen mode

๐ŸŽฏ Constructor Function:

It's is used to create Function objects and we need to use the new keyword to create a new Function instance!

// Creating the Constructor Function
function Car () {
  this.name = 'Ford',
  this.color = 'Black'
}

// Creating the Object
const myCar = new Car();

console.log(myCar.name);
// Output
'Ford'

console.log(myCar.color);
// Output
'Black'
Enter fullscreen mode Exit fullscreen mode

Hope this makes you feel a bit more comfortable with functions and their possibilities!

Feel free to reach out to me if you have any questions!

and obviously I hope you enjoyed it ๐ŸคŸ๐Ÿ’ช๐ŸคŸ๐Ÿ’ช

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .