JavaScript: Function Types You Should Know!
Renan Ferro

Renan Ferro @renancferro

About: Frontend Developer ❤️‍🔥 | Just learning, practicing, coding and letting a little bit of it spread out forever and ever ➿ Be brave enough to be bad at something new!

Location:
Brazil
Joined:
Apr 20, 2021

JavaScript: Function Types You Should Know!

Publish Date: Apr 26 '23
32 16

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

Comments 16 total

  • Jon Randy 🎖️
    Jon Randy 🎖️Apr 26, 2023

    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
    }
    
    Enter fullscreen mode Exit fullscreen mode

    Is equivalent to this code:

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

    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
      Renan FerroApr 26, 2023

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

      • Jon Randy 🎖️
        Jon Randy 🎖️Apr 26, 2023

        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>
        
        Enter fullscreen mode Exit fullscreen mode

        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'
        
        Enter fullscreen mode Exit fullscreen mode
  • Prasad Saya
    Prasad SayaApr 26, 2023

    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
      Renan FerroApr 26, 2023

      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
    WhatsAVadimApr 26, 2023

    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
      Renan FerroApr 27, 2023

      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
    DimensionCloud Apr 27, 2023

    can u revised my code ?

  • Dhruv Joshi
    Dhruv JoshiApr 27, 2023

    Informative!

  • jonah-butler
    jonah-butlerApr 28, 2023

    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.

  • fruntend
    fruntendMay 1, 2023

    Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
    Keep it up 👍

  • bsorrentino
    bsorrentinoMay 4, 2023

    I think you should add generator functions

Add comment