What is the most efficient way to declare functions in Javascript?

Question

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?

Answer 1

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