DEV Community

Cover image for JavaScript: Function Types You Should Know!

JavaScript: Function Types You Should Know!

Renan Ferro on April 26, 2023

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 li...
Read full post
Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ • • 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
}
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.

Collapse
 
renancferro profile image
Renan Ferro •

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

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ • • 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>
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
Thread Thread
 
renancferro profile image
Renan Ferro •

Niiiicee 🀩

Collapse
 
prsaya profile image
Prasad Saya •

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 .

Collapse
 
renancferro profile image
Renan Ferro •

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.

Collapse
 
whatsavadim profile image
WhatsAVadim • • 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 :)

Collapse
 
renancferro profile image
Renan Ferro •

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 πŸ˜€

Collapse
 
dimensioncloud profile image
DimensionCloud •

can u revised my code ?

Collapse
 
renancferro profile image
Renan Ferro •

Hey, what code?! πŸ€”

Collapse
 
dimensioncloud profile image
DimensionCloud • • Edited

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

Collapse
 
dhruvjoshi9 profile image
Dhruv Joshi •

Informative!

Collapse
 
renancferro profile image
Renan Ferro •

Thanks dude πŸ₯³

Collapse
 
jonahbutler profile image
jonah-butler •

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.

Collapse
 
bsorrentino profile image
bsorrentino •

I think you should add generator functions

Collapse
 
fruntend profile image
fruntend •

Π‘ongratulations πŸ₯³! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up πŸ‘