11

I have always learned that to declare a function in javascript you should do something like:

function myfunction(fruit){
    alert('I like ' + fruit + '!');
}

or something like:

var myfunction = function(fruit){
    alert('I like ' + fruit + '!');
};

However, most recently, I have noticed that some people actually define functions as constants: 

const myfunction = fruit=> alert('I like ' + fruit + '!');

Or even using the keyword let:

let myfunction = fruit=> alert('I like ' + fruit + '!');

At this point I am quite confused.

  • Why so many ways of defining functions?
  • When/where should I use each one?
  • Which way is more efficient?
Improve this question
3
  • 3
    About efficiency, I do not think this could ever be a bottleneck Commented Dec 9, 2015 at 12:56
  • 1
    Then why so many ways? There has to be an advantage to doing it differently right? It is not like developers just create do things for the heck of it :D Commented Dec 9, 2015 at 12:57
  • I was wondering which is the recommended style declaring functions now. Commented Jan 24, 2021 at 23:06

3 Answers 3

Reset to default
9

I think it will depend on your needs. For example

this will define your function with myfunction name on your local scope

function myfunction(fruit){
    alert('I like ' + fruit + '!');
}

on the other hand, the code below will define a variable called myfunction that points to an annonimous function inside your local scope.

var myfunction = function(fruit){
    alert('I like ' + fruit + '!');
};

while the code below will define an arrow function of ECMA6 that are not supported by all browsers at the current date. Besides, let statement declares a block scope local variable, optionally initializing it to a value. So your myfunction variable won't be seen after the code block is closed.

let myfunction = fruit=> alert('I like ' + fruit + '!');

let allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used. You can read more and see some examples here

As the oficial documentation says:

The const declaration creates a read-only reference to a value. It does not mean the value it holds is immutable, just that the variable identifier cannot be reassigned.

const myfunction = fruit=> alert('I like ' + fruit + '!');

So if you try to reassign myfunction it will fail (silently) (but does not fail in Safari)

// this will fail silently in Firefox and Chrome 
myfunction = fruit=> alert('No! I DO NOT like ' + fruit + '!');

About let and const similarities the MDN reference says that

Constants are block-scoped, much like variables defined using the let statement. The value of a constant cannot change through re-assignment, and it can't be redeclared.

So, as Aurelio de Rosa says,

constants share a feature with variables declared using let in that they are block-scoped instead of function-scoped

Read more about const here

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

what about const? Is there any difference between const and let?
I'll write it in a moment =)
"it will fail silently" - it should not. Try using strict mode. In sloppy mode, browsers have implemented all kind of legacy compatibilities, including assignability.
1

Using const makes it so that function variable (or constant in this case) can't be re-assigned to something else. So the function can't be modified.

Using let restricts the scope of the function to the block it was defined in, versus var which restricts the scope of the function to the execution context. As defined on MDN:

The scope of a variable declared with var is its current execution context, which is either the enclosing function or, for variables declared outside any function, global.

For example, using let inside a for loop would restrict that variable to the for loop.

As for efficiency, I don't see how any of these could impact performance, but there could be nuances that I am unaware of. I doubt anyone would ever see any noticeable difference in performance.

Improve this answer

Comments

1

const

  • provides a read only reference to your function variable, you can see it as a constant function, but don't think of it as an immutable one.

let

  • allows you to create a local function, meaning that it's scope will be valid only within the enclosing block where it resides.

MDN references:

Note: if I remember correctly, let and const are not interpreted correctly by all browsers.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.