Renan Ferro

Posted on Apr 26, 2023

JavaScript: Function Types You Should Know!

#javascript #beginners #frontend #learning

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!'

🎯 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!'

🎯 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!'

🎯 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);

🎯 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'

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 🤟💪🤟💪

Top comments (16)

Jon Randy 🎖️ • Apr 26 '23 • Edited

Did you know that the act of assigning an anonymous function to a variable makes that function no longer anonymous (in most cases)?

This code:

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

Is equivalent to this code:

let add = function(a, b) {
  return a+b
}

BOTH functions actually have a name - so neither is anonymous. You can test this by checking add.name - which in both cases above will be 'add'.

You can find more about anonymous functions in this post.

Renan Ferro • Apr 26 '23

Yess, is not anonymous because it is assigned to a variable 😅! Thanks for the tip and I'll definitely read it!!

Jon Randy 🎖️ • Apr 26 '23 • Edited

Just because a function is assigned to a variable does not necessarily mean it is not anonymous. It is perfectly possible to assign an anonymous function to a variable without losing its anonymity:

const a = []
a.push(function(a, b) {
  return a+b
})
let myFunction = a[0]

console.log(typeof myFunction)  // 'function'
console.log(myFunction.name)  // <empty string>

The name of the variable and the name of the function are two different things:

let myFunction = function add(a,b) {
  return a+b
}
console.log(myFunction.name)  // 'add'

Renan Ferro • Apr 27 '23

Niiiicee 🤩

Prasad Saya • Apr 26 '23

I'd like to mention the IIFE (Immediately Invoked Function Expression) here. This is a JavaScript function that runs as soon as it is defined. See IIFE @ MDN .

Renan Ferro • Apr 26 '23

Cool, I like the IIFE functions! We have Pure Functions too, for example! But in this article I just wanted to share some basic types! But thanks for the comment and the tip.

WhatsAVadim • Apr 26 '23 • Edited

I think you could add potential use cases for them. Specifically maybe mention async await and which functions can/cannot use this. Additionally how some js methods mixed with arrow functions throw errors. Besides that, good stuff :)

Renan Ferro • Apr 27 '23

Sure, I'm doing a new article talking about async/await, Promise and some other stuff! This article I just wanted to talk a little bit about some different types functions that we can use with JavaScript.

But thanks a lot for the tip 😀

DimensionCloud • Apr 27 '23

can u revised my code ?

Renan Ferro • Apr 27 '23

Hey, what code?! 🤔

DimensionCloud • Apr 27 '23 • Edited

express.js ? on my website: dimense.net code: github.com/reroote/core

Dhruv Joshi • Apr 27 '23

Informative!

Renan Ferro • Apr 27 '23

Thanks dude 🥳

jonah-butler • Apr 28 '23

I think it's worth mentioning too: high order functions are the basis of Decorators. For those not working with Angular or NestJS regularly, that syntax can be a little odd at first. But working with HOF will make the decorator syntax and use case very clear.