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

admin管理员组

文章数量:1290314

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?

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?

• javascript
• function

Share Improve this question Follow asked Dec 9, 2015 at 12:50 Flame_PhoenixFlame_Phoenix 17.6k4040 gold badges144144 silver badges284284 bronze badges 3

• 3 About efficiency, I do not think this could ever be a bottleneck – Matteo Tassinari 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 – Flame_Phoenix Commented Dec 9, 2015 at 12:57
• I was wondering which is the remended style declaring functions now. – Archimedes Trajano Commented Jan 24, 2021 at 23:06

Add a ment  | 

3 Answers 3

Sorted by: 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

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.

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:

• https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Statements/let
• https://developer.mozilla/en/docs/Web/JavaScript/Reference/Statements/const

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

本文标签： What is the most efficient way to declare functions in JavascriptStack Overflow