assign function to variable javascript

Function declarations and variable declarations are always moved ( hoisted ) invisibly to the top of their containing scope by the JavaScript interpreter. Function parameters and language-defined names are, obviously, already there. ben cherry

This means that code like this:

Notice that the assignment portion of the declarations were not hoisted. Only the name is hoisted.

But in the case with function declarations, the entire function body will be hoisted as well :

Other commenters have already covered the semantic difference of the two variants above. I wanted to note a stylistic difference: Only the "assignment" variation can set a property of another object.

I often build JavaScript modules with a pattern like this:

With this pattern, your public functions will all use assignment, while your private functions use declaration.

(Note also that assignment should require a semicolon after the statement, while declaration prohibits it.)

An illustration of when to prefer the first method to the second one is when you need to avoid overriding a function's previous definitions.

, this definition of myfunction will override any previous definition, since it will be done at parse-time.

does the correct job of defining myfunction only when condition is met.

An important reason is to add one and only one variable as the "Root" of your namespace...

There are many techniques for namespacing. It's become more important with the plethora of JavaScript modules available.

Also see How do I declare a namespace in JavaScript?

Hoisting is the JavaScript interpreter’s action of moving all variable and function declarations to the top of the current scope.

However, only the actual declarations are hoisted. by leaving assignments where they are.

Javascript is called loosely typed language. Which means Javascript variables can hold value of any Data-Type . Javascript automatically takes care of changing the variable-type based on the value/literal provided during runtime.

Default return value of function is ' undefined ', Variable declaration default value also 'undefined'

Function Expression

Function assigned to variable Example:

javascript interpreted as

You can check function declaration, expression test over different browser's using jsperf Test Runner

ES5 Constructor Function Classes : Function objects created using Function.prototype.bind

JavaScript treats functions as first-class objects, so being an object, you can assign properties to a function.

ES6 introduced Arrow function : An arrow function expression has a shorter syntax, they are best suited for non-method functions, and they cannot be used as constructors.

ArrowFunction : ArrowParameters => ConciseBody . const fn = (item) => { return item & 1 ? 'Odd' : 'Even'; }; console.log( fn(2) ); // Even console.log( fn(3) ); // Odd

I'm adding my own answer just because everyone else has covered the hoisting part thoroughly.

I've wondered about which way is better for a long while now, and thanks to http://jsperf.com now I know :)

Function declarations are faster, and that's what really matters in web dev right? ;)

see answer about performance below , different results – d9k Mar 1, 2021 at 17:19

𝗧𝗵𝗲𝗿𝗲 𝗮𝗿𝗲 𝗳𝗼𝘂𝗿 𝗻𝗼𝘁𝗲𝘄𝗼𝗿𝘁𝗵𝘆 𝗰𝗼𝗺𝗽𝗮𝗿𝗶𝘀𝗼𝗻𝘀 𝗯𝗲𝘁𝘄𝗲𝗲𝗻 𝘁𝗵𝗲 𝘁𝘄𝗼 𝗱𝗶𝗳𝗳𝗲𝗿𝗲𝗻𝘁 𝗱𝗲𝗰𝗹𝗮𝗿𝗮𝘁𝗶𝗼𝗻𝘀 𝗼𝗳 𝗳𝘂𝗻𝗰𝘁𝗶𝗼𝗻𝘀 𝗮𝘀 𝗹𝗶𝘀𝘁𝗲𝗱 𝗯𝗲𝗹𝗼𝘄.

Availability (scope) of the function

The following works because function add() is scoped to the nearest block:

try { console.log("Success: ", add(1, 1)); } catch(e) { console.log("ERROR: " + e); } function add(a, b){ return a + b; }

The following does not work because the variable is called before a function value is assigned to the variable add .

try { console.log("Success: ", add(1, 1)); } catch(e) { console.log("ERROR: " + e); } var add=function(a, b){ return a + b; }

The above code is identical in functionality to the code below. Note that explicitly assigning add = undefined is superfluous because simply doing var add; is the exact same as var add=undefined .

var add = undefined; try { console.log("Success: ", add(1, 1)); } catch(e) { console.log("ERROR: " + e); } add = function(a, b){ return a + b; }

The following does not work because var add= begins an expression and causes the following function add() to be an expression instead of a block. Named functions are only visible to themselves and their surrounding block. As function add() is an expression here, it has no surrounding block, so it is only visible to itself.

try { console.log("Success: ", add(1, 1)); } catch(e) { console.log("ERROR: " + e); } var add=function add(a, b){ return a + b; }

(function) .name

The name of a function function thefuncname(){} is thefuncname when it is declared this way.

function foobar(a, b){} console.log(foobar.name);

var a = function foobar(){}; console.log(a.name);

Otherwise, if a function is declared as function(){} , the function .name is the first variable used to store the function.

var a = function(){}; var b = (function(){ return function(){} }); console.log(a.name); console.log(b.name);

If there are no variables set to the function, then the functions name is the empty string ( "" ).

console.log((function(){}).name === "");

Lastly, while the variable the function is assigned to initially sets the name, successive variables set to the function do not change the name.

var a = function(){}; var b = a; var c = b; console.log(a.name); console.log(b.name); console.log(c.name);

Performance

In Google's V8 and Firefox's Spidermonkey there might be a few microsecond JIT compilation difference, but ultimately the result is the exact same. To prove this, let's examine the efficiency of JSPerf at micro-benchmarks by comparing the speed of two blank code snippets. The JSPerf tests are found here . And, the jsben.ch tests are found here . As you can see, there is a noticeable difference when there should be none. If you are really a performance freak like me, then it might be more worth your while trying to reduce the number of variables and functions in the scope and especially eliminating polymorphism (such as using the same variable to store two different types).

Variable Mutability

When you use the var keyword to declare a variable, you can then reassign a different value to the variable like so.

(function(){ "use strict"; var foobar = function(){}; // initial value try { foobar = "Hello World!"; // new value console.log("[no error]"); } catch(error) { console.log("ERROR: " + error.message); } console.log(foobar, window.foobar); })();

However, when we use the const-statement, the variable reference becomes immutable. This means that we cannot assign a new value to the variable. Please note, however, that this does not make the contents of the variable immutable: if you do const arr = [] , then you can still do arr[10] = "example" . Only doing something like arr = "new value" or arr = [] would throw an error as seen below.

(function(){ "use strict"; const foobar = function(){}; // initial value try { foobar = "Hello World!"; // new value console.log("[no error]"); } catch(error) { console.log("ERROR: " + error.message); } console.log(foobar, window.foobar); })();

Interestingly, if we declare the variable as function funcName(){} , then the immutability of the variable is the same as declaring it with var .

(function(){ "use strict"; function foobar(){}; // initial value try { foobar = "Hello World!"; // new value console.log("[no error]"); } catch(error) { console.log("ERROR: " + error.message); } console.log(foobar, window.foobar); })();

𝗪𝗵𝗮𝘁 𝗜𝘀 𝗧𝗵𝗲 "𝗡𝗲𝗮𝗿𝗲𝘀𝘁 𝗕𝗹𝗼𝗰𝗸"

The "nearest block" is the nearest "function," (including asynchronous functions, generator functions, and asynchronous generator functions). However, interestingly, a function functionName() {} behaves like a var functionName = function() {} when in a non-closure block to items outside said closure. Observe.

Normal var add=function(){}

try { // typeof will simply return "undefined" if the variable does not exist if (typeof add !== "undefined") { add(1, 1); // just to prove it console.log("Not a block"); }else if(add===undefined){ // this throws an exception if add doesn't exist console.log('Behaves like var add=function(a,b){return a+b}'); } } catch(e) { console.log("Is a block"); } var add=function(a, b){return a + b}

Normal function add(){}

try { // typeof will simply return "undefined" if the variable does not exist if (typeof add !== "undefined") { add(1, 1); // just to prove it console.log("Not a block"); }else if(add===undefined){ // this throws an exception if add doesn't exist console.log('Behaves like var add=function(a,b){return a+b}') } } catch(e) { console.log("Is a block"); } function add(a, b){ return a + b; }

try { // typeof will simply return "undefined" if the variable does not exist if (typeof add !== "undefined") { add(1, 1); // just to prove it console.log("Not a block"); }else if(add===undefined){ // this throws an exception if add doesn't exist console.log('Behaves like var add=function(a,b){return a+b}') } } catch(e) { console.log("Is a block"); } (function () { function add(a, b){ return a + b; } })();

Statement (such as if , else , for , while , try / catch / finally , switch , do / while , with )

try { // typeof will simply return "undefined" if the variable does not exist if (typeof add !== "undefined") { add(1, 1); // just to prove it console.log("Not a block"); }else if(add===undefined){ // this throws an exception if add doesn't exist console.log('Behaves like var add=function(a,b){return a+b}') } } catch(e) { console.log("Is a block"); } { function add(a, b){ return a + b; } }

Arrow Function with var add=function()

try { // typeof will simply return "undefined" if the variable does not exist if (typeof add !== "undefined") { add(1, 1); // just to prove it console.log("Not a block"); }else if(add===undefined){ // this throws an exception if add doesn't exist console.log('Behaves like var add=function(a,b){return a+b}') } } catch(e) { console.log("Is a block"); } (() => { var add=function(a, b){ return a + b; } })();

Arrow Function With function add()

try { // typeof will simply return "undefined" if the variable does not exist if (typeof add !== "undefined") { add(1, 1); // just to prove it console.log("Not a block"); }else if(add===undefined){ // this throws an exception if add doesn't exist console.log('Behaves like var add=function(a,b){return a+b}') } } catch(e) { console.log("Is a block"); } (() => { function add(a, b){ return a + b; } })();

A function declaration and a function expression assigned to a variable behave the same once the binding is established.

There is a difference however at how and when the function object is actually associated with its variable. This difference is due to the mechanism called variable hoisting in JavaScript.

Basically, all function declarations and variable declarations are hoisted to the top of the function in which the declaration occurs (this is why we say that JavaScript has function scope ).

When a function declaration is hoisted, the function body "follows" so when the function body is evaluated, the variable will immediately be bound to a function object.

When a variable declaration is hoisted, the initialization does not follow, but is "left behind". The variable is initialized to undefined at the start of the function body, and will be assigned a value at its original location in the code. (Actually, it will be assigned a value at every location where a declaration of a variable with the same name occurs.)

The order of hoisting is also important: function declarations take precedence over variable declarations with the same name, and the last function declaration takes precedence over previous function declarations with the same name.

Some examples...

Variable foo is hoisted to the top of the function, initialized to undefined , so that !foo is true , so foo is assigned 10 . The foo outside of bar 's scope plays no role and is untouched.

Function declarations take precedence over variable declarations, and the last function declaration "sticks".

In this example a is initialized with the function object resulting from evaluating the second function declaration, and then is assigned 4 .

Here the function declaration is hoisted first, declaring and initializing variable a . Next, this variable is assigned 10 . In other words: the assignment does not assign to outer variable a .

The first example is a function declaration:

The second example is a function expression:

The main difference is how they are hoisted (lifted and declared). In the first example, the whole function declaration is hoisted. In the second example only the var 'abc' is hoisted, its value (the function) will be undefined, and the function itself remains at the position that it is declared.

To put it simply:

To study more about this topic I strongly recommend you this link

In terms of code maintenance cost, named functions are more preferable:

I suspect more PROS for named functions are follow. And what is listed as an advantage of named functions is a disadvantage for anonymous ones.

Historically, anonymous functions appeared from the inability of JavaScript as a language to list members with named functions:

In computer science terms, we talk about anonymous functions and named functions. I think the most important difference is that an anonymous function is not bound to a name, hence the name anonymous function. In JavaScript it is a first class object dynamically declared at runtime.

For more information on anonymous functions and lambda calculus, Wikipedia is a good start: Anonymous Functions .

I use the variable approach in my code for a very specific reason, the theory of which has been covered in an abstract way above, but an example might help some people like me, with limited JavaScript expertise.

I have code that I need to run with 160 independently-designed brandings. Most of the code is in shared files, but branding-specific stuff is in a separate file, one for each branding.

Some brandings require specific functions, and some do not. Sometimes I have to add new functions to do new branding-specific things. I am happy to change the shared coded, but I don't want to have to change all 160 sets of branding files.

By using the variable syntax, I can declare the variable (a function pointer essentially) in the shared code and either assign a trivial stub function, or set to null.

The one or two brandings that need a specific implementation of the function can then define their version of the function and assign this to the variable if they want, and the rest do nothing. I can test for a null function before I execute it in the shared code.

From people's comments above, I gather it may be possible to redefine a static function too, but I think the variable solution is nice and clear.

Greg's Answer is good enough, but I still would like to add something to it that I learned just now watching Douglas Crockford's videos.

Function expression:

Function statement:

The function statement is just a shorthand for var statement with a function value.

Which expands further to:

And they are both hoisted to the top of the code.

@EugeneLazutkin gives an example where he names an assigned function to be able to use shortcut() as an internal reference to itself. John Resig gives another example - copying a recursive function assigned to another object in his Learning Advanced Javascript tutorial. While assigning functions to properties isn't strictly the question here, I recommend actively trying the tutorial out - run the code by clicking the button in the upper right corner, and double click the code to edit to your liking.

Examples from the tutorial: recursive calls in yell() :

Tests fail when the original ninja object is removed. (page 13)

function assert(predicate, message) { if(!predicate) { throw new Error(message); } } var ninja = { yell: function(n){ return n > 0 ? ninja.yell(n-1) + "a" : "hiy"; } }; assert( ninja.yell(4) == "hiyaaaa", "A single object isn't too bad, either." ); var samurai = { yell: ninja.yell }; var ninja = null; try { samurai.yell(4); } catch(e){ assert( false, "Uh, this isn't good! Where'd ninja.yell go?" ); }

If you name the function that will be called recursively, the tests will pass. (page 14)

function assert(predicate, message) { if(!predicate) { throw new Error(message); } } var ninja = { yell: function yell(n){ return n > 0 ? yell(n-1) + "a" : "hiy"; } }; assert( ninja.yell(4) == "hiyaaaa", "Works as we would expect it to!" ); var samurai = { yell: ninja.yell }; var ninja = {}; assert( samurai.yell(4) == "hiyaaaa", "The method correctly calls itself." ); console.log(samurai.yell(4));

Another difference that is not mentioned in the other answers is that if you use the anonymous function

and use that as a constructor as in

then one.constructor.name will not be defined. Function.name is non-standard but is supported by Firefox, Chrome, other Webkit-derived browsers and IE 9+.

it is possible to retrieve the name of the constructor as a string with two.constructor.name .

The first one (function doSomething(x)) should be part of an object notation.

The second one ( var doSomething = function(x){ alert(x);} ) is simply creating an anonymous function and assigning it to a variable, doSomething . So doSomething() will call the function.

You may want to know what a function declaration and function expression is.

A function declaration defines a named function variable without requiring variable assignment. Function declarations occur as standalone constructs and cannot be nested within non-function blocks.

ECMA 5 (13.0) defines the syntax as function Identifier ( FormalParameterList opt ) { FunctionBody }

In above condition the function name is visible within its scope and the scope of its parent (otherwise it would be unreachable).

And in a function expression

A function expression defines a function as a part of a larger expression syntax (typically a variable assignment ). Functions defined via functions expressions can be named or anonymous. Function expressions should not start with “function”.

ECMA 5 (13.0) defines the syntax as function Identifier opt ( FormalParameterList opt ) { FunctionBody }

I'm listing out the differences below:

A function declaration can be placed anywhere in the code. Even if it is invoked before the definition appears in code, it gets executed as function declaration is committed to memory or in a way it is hoisted up, before any other code in the page starts execution.

Take a look at the function below:

This is because, during execution, it looks like:-

A function expression, if not defined before calling it, will result in an error. Also, here the function definition itself is not moved to the top or committed to memory like in the function declarations. But the variable to which we assign the function gets hoisted up and undefined gets assigned to it.

Same function using function expressions:

This is because during execution, it looks like:

It is not safe to write function declarations in non-function blocks like if because they won't be accessible.

Named function expression like the one below, may not work in Internet Explorer browsers prior to version 9.

About performance:

New versions of V8 introduced several under-the-hood optimizations and so did SpiderMonkey .

There is almost no difference now between expression and declaration. Function expression appears to be faster now.

Anonymous function expressions appear to have better performance against Named function expression.

If you would use those functions to create objects, you would get:

In JavaScript there are two ways to create functions:

Function declaration:

This is very basic, self-explanatory, used in many languages and standard across C family of languages. We declared a function defined it and executed it by calling it.

What you should be knowing is that functions are actually objects in JavaScript; internally we have created an object for above function and given it a name called fn or the reference to the object is stored in fn. Functions are objects in JavaScript; an instance of function is actually an object instance.

JavaScript has first-class functions, that is, create a function and assign it to a variable just like you create a string or number and assign it to a variable. Here, the fn variable is assigned to a function. The reason for this concept is functions are objects in JavaScript; fn is pointing to the object instance of the above function. We have initialized a function and assigned it to a variable. It's not executing the function and assigning the result.

Reference: JavaScript function declaration syntax: var fn = function() {} vs function fn() {}

Named Functions Vs. Anonymous Functions

The first function syntax is Anonymous Function Expression :

While, the second one is Function Declaration :

The main difference between both is the function name since Anonymous Functions have no name to call. Anonymous functions are quick and easy to declare, and many libraries and tools tend to encourage this idiomatic style of code. However, anonymous functions have some drawbacks :

Readability: anonymous functions omit a name which could cause less readable code.

Debugging: anonymous functions have no name in stack traces, which can make debugging more difficult.

Self-Reference: what if the function needs to refer to itself, for recursion for example.

Naming Function Expression

Providing a name for your function expression quite effectively addresses all these drawbacks, and has no tangible downsides. The best practice is to always name your function expressions:

Naming IIFEs (Immediate Invoked Function Expression)

For functions assigned to a variable, naming the function, in this case, is not very common and may cause confusion, in this case, the arrow function may be a better choice.

In light of the "named functions show up in stack traces" argument, modern JavaScript engines are actually quite capable of representing anonymous functions.

As of this writing, V8, SpiderMonkey, Chakra and Nitro always refer to named functions by their names. They almost always refer to an anonymous function by its identifier if it has one.

SpiderMonkey can figure out the name of an anonymous function returned from another function. The rest can't.

If you really, really wanted your iterator and success callbacks to show up in the trace, you could name those too...

But for the most part it's not worth stressing over.

Harness ( Fiddle )

Spidermonkey.

Both are different ways of defining a function. The difference is how the browser interprets and loads them into an execution context.

The first case is of function expressions which loads only when the interpreter reaches that line of code. So if you do it like the following, you will get an error that the functionOne is not a function .

The reason is that on the first line no value is assigned to functionOne, and hence it is undefined. We are trying to call it as a function, and hence we are getting an error.

On the second line we are assigning the reference of an anonymous function to functionOne.

The second case is of function declarations that loads before any code is executed. So if you do like the following you won't get any error as the declaration loads before code execution.

They are pretty similar with some small differences, first one is a variable which assigned to an anonymous function (Function Declaration) and second one is the normal way to create a function in JavaScript(Anonymous function Declaration), both has usage, cons and pros:

1. Function Expression

A Function Expression defines a function as a part of a larger expression syntax (typically a variable assignment ). Functions defined via Functions Expressions can be named or anonymous. Function Expressions must not start with “function” (hence the parentheses around the self invoking example below).

Assign a variable to a function, means no Hoisting, as we know functions in JavaScript can Hoist, means they can be called before they get declared, while variables need to be declared before getting access to them, so means in this case we can not access the function before where it's declared, also it could be a way that you write your functions, for the functions which return another function, this kind of declaration could make sense, also in ECMA6 & above you can assign this to an arrow function which can be used to call anonymous functions, also this way of declaring is a better way to create Constructor functions in JavaScript.

2. Function Declaration

A Function Declaration defines a named function variable without requiring variable assignment. Function Declarations occur as standalone constructs and cannot be nested within non-function blocks. It’s helpful to think of them as siblings of Variable Declarations. Just as Variable Declarations must start with “var”, Function Declarations must begin with “function”.

This is the normal way of calling a function in JavaScript, this function can be called before you even declare it as in JavaScript all functions get Hoisted, but if you have 'use strict' this won't Hoist as expected, it's a good way to call all normal functions which are not big in lines and neither are a constructor function.

Also, if you need more info about how hoisting works in JavaScript, visit the link below:

https://developer.mozilla.org/en-US/docs/Glossary/Hoisting

This is just two possible ways of declaring functions, and in the second way, you can use the function before declaration.

Not the answer you're looking for? Browse other questions tagged javascript function methods syntax or ask your own question .

Hot Network Questions

Your privacy

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy .

How to Assign a Function to a Variable in JavaScript

This blog post will provide a JavaScript example of how to assign a function to a variable.

How to Assign a Function to a Variable in JavaScript?

There are two different types of functions in JavaScript, that will be used by assigning them to variables:

Let’s see how to assign these function types to a variable.

Assign an Anonymous Function to a Variable

An “ anonymous ” function is the simplest type of function that can be assigned to a variable. As indicated by the name, the function will declare without the name.

Syntax Follow the given syntax for assigning an anonymous function to a variable:

Example 1: Assign an Anonymous Function to a Variable Without Parameter Create a variable “ sum ” and assign an anonymous function to it. In the function, create two variables “ a ” and “ b ” by assigning values “ 12 ” and “ 8 ” respectively, and finally, return the sum of two numbers “ a ” and “ b ”:

Call the function by a variable name “ sum ” with braces ” () ” that denotes the function:

The output displays “ 20 ” while calling the anonymous function assigned to a variable:

Example 2: Assign an Anonymous Function to a Variable With Parameter Here, assign an anonymous function to the variable with two parameters “ a ” and “ b ”. It will return the sum of two numbers that will be passed during the function call as an argument:

Call the anonymous function using variable “ sum ” by passing number “ 4 ” as a first argument “ a ” and “ 6 ” as the second argument “ b ”:

The corresponding output will be:

Assign an Arrow Function to a Variable

The “ arrow function ” is the second way to apply the function to the variable. The only difference between the arrow function and the anonymous function is that it will create without using the keyword “ function ” and instead use an arrow. The arrow function in JavaScript has the shortest syntax for function declaration.

Syntax Use the following syntax for assigning the arrow function to the variable:

Example 1: Assign an Arrow Function to a Variable Without Parameter Create a variable “ sum ” and assign an arrow function to it. In the function, create two variables “ a ” and “ b ” by assigning values “ 9 ” and “ 12 ” respectively, and lastly, return the sum of two numbers “ a ” and “ b ”:

Call the function by a variable name “ sum ”:

The output displays “ 21 ” while calling the arrow function without parameters assigned to a variable:

Example 2: Assign an Arrow Function to a Variable With Parameter Create an arrow function with variables “ a ” and “ b ” that will return the sum of two numbers. It is the same as the anonymous function with parameters but without the “ function ” keyword:

Invoke the arrow function using the variable name “ sum ”:

About the author

Farah Batool

I completed my master's degree in computer science. I am an academic researcher and love to learn and write about new technologies. I am passionate about writing and sharing my experience with the world.

6 Ways to Declare JavaScript Functions

A function is a parametric block of code defined once and called multiple times later. In JavaScript a function is composed and influenced by many components:

This post teaches you six approaches to declare JavaScript functions: the syntax, examples and common pitfalls. Moreover, you will understand when to use a specific function type in certain circumstances.

Before I go on, let me recommend something to you.

If you want to significantly improve your JavaScript knowledge, take the amazingly useful course "Modern JavaScript From The Beginning 2.0" by Brad Traversy. Use the coupon code "DMITRI" and get up to 20% discount!

1.1 a regular function, 1.2 difference from function expression, 1.3 function declaration in conditionals, 2.1 named function expression, 2.2 favor named function expression, 3.1 computed property names and methods, 4.1 context transparency, 4.2 short callbacks, 5. generator function, 6. one more thing: new function, 7. at the end, which way is better, 1. function declaration.

A function declaration is made of function keyword, followed by an obligatory function name, a list of parameters in a pair of parenthesis (para1, ..., paramN) and a pair of curly braces {...} that delimits the body code.

An example of function declaration:

function isEven(num) {...} is a function declaration that defines isEven function, which determines if a number is even.

The function declaration creates a variable in the current scope with the identifier equal to the function name. This variable holds the function object.

The function variable is hoisted up to the top of the current scope, which means that the function can be invoked before the declaration (see this chapter for more details).

The created function is named , which means that the name property of the function object holds its name. It is useful when viewing the call stack: in debugging or error messages reading.

Let's see these properties in an example:

The function declaration function hello(name) {...} create a variable hello that is hoisted to the top of the current scope. hello variable holds the function object and hello.name contains the function name: 'hello' .

The function declaration matches for cases when a regular function is needed. Regular means that you declare the function once and later invoke it in many different places. This is the basic scenario:

Because the function declaration creates a variable in the current scope, alongside regular function calls, it is useful for recursion or detaching event listeners. Contrary to function expressions or arrow functions, that do not create a binding with the function variable by its name.

For example, to calculate recursively the factorial you have to access the function inside:

Inside factorial() a recursive call is being made using the variable that holds the function: factorial(n - 1) .

It is possible to use a function expression and assign it to a regular variable, e.g. const factorial = function(n) {...} . But the function declaration function factorial(n) is compact (no need for const and = ).

An important property of the function declaration is its hoisting mechanism. It allows using the function before the declaration in the same scope.

Hoisting is useful in some situations. For example, when you'd like to see how the function is called at the beginning of a script, without reading the function implementation. The function implementation can be located below in the file, so you may not even scroll there.

It is easy to confuse the function declaration and function expression . They look very similar but produce functions with different properties.

An easy to remember rule: the function declaration in a statement always starts with the keyword function . Otherwise it's a function expression (see 2. ).

The following sample is a function declaration where the statement starts with function keyword:

In case of function expressions the JavaScript statement does not start with function keyword (it is present somewhere in the middle of the statement code):

Some JavaScript environments can throw a reference error when invoking a function whose declaration appears within blocks {...} of if , for or while statements. Let's enable the strict mode and see what happens when a function is declared in a conditional:

When calling ok() , JavaScript throws ReferenceError: ok is not defined , because the function declaration is inside a conditional block.

The function declaration in conditionals is allowed in non-strict mode, which makes it even more confusing.

As a general rule for these situations, when a function should be created by conditions - use a function expression. Let's see how it is possible:

Because the function is a regular object, assign it to a variable depending on the condition. Invoking ok() works fine, without errors.

2. Function expression

A function expression is determined by a function keyword, followed by an optional function name, a list of parameters in a pair of parenthesis (para1, ..., paramN) and a pair of curly braces { ... } that delimits the body code.

Some samples of the function expression:

The function expression creates a function object that can be used in different situations:

The function expression is the working horse in JavaScript. Usually, you deal with this type of function declaration, alongside the arrow function (if you prefer short syntax and lexical context).

A function is anonymous when it does not have a name ( name property is an empty string '' ):

This is an anonymous function, which name is an empty string.

Sometimes the function name can be inferred. For example, when the anonymous is assigned to a variable:

The anonymous function name is 'myFunctionVar' , because myFunctionVar variable name is used to infer the function name.

When the expression has the name specified, this is a named function expression . It has some additional properties compared to simple function expression:

Let's use the above example, but set a name in the function expression:

function funName(variable) {...} is a named function expression. The variable funName is accessible within function scope, but not outside. Either way, the property name of the function object holds the name: funName .

When a function expression const fun = function() {} is assigned to a variable, some engines infer the function name from this variable. However, callbacks might be passed as anonymous function expressions, without storing into variables: so the engine cannot determine its name .

It is reasonable to favor named functions and avoid anonymous ones to gain benefits like:

3. Shorthand method definition

Shorthand method definition can be used in a method declaration on object literals and ES2015 classes. You can define them using a function name, followed by a list of parameters in a pair of parenthesis (para1, ..., paramN) and a pair of curly braces { ... } that delimits the body statements.

The following example uses a shorthand method definition in an object literal:

add() and get() methods in collection object are defined using short method definition. These methods are called as usual: collection.add(...) and collection.get(...) .

The short approach of method definition has several benefits over traditional property definition with a name, colon : and a function expression add: function(...) {...} :

The class syntax requires method declarations in a short form:

ECMAScript 2015 adds a nice feature: computed property names in object literals and classes. The computed properties use a slight different syntax [methodName]() {...} , so the method definition looks this way:

[addMethod](...) {...} and [getMethod](...) {...} are shorthand method declarations with computed property names.

4. Arrow function

An arrow function is defined using a pair of parenthesis that contains the list of parameters (param1, param2, ..., paramN) , followed by a fat arrow => and a pair of curly braces {...} that delimits the body statements.

When the arrow function has only one parameter, the pair of parentheses can be omitted. When it contains a single statement, the curly braces can be omitted too.

Let's see the arrow function basic usage:

absValue is an arrow function that calculates the absolute value of a number.

The function declared using a fat arrow has the following properties:

this keyword is a confusing aspect of JavaScript (check this article for a detailed explanation on this ). Because functions create own execution context, often it is difficult to detect this value.

ECMAScript 2015 improves this usage by introducing the arrow function, which takes the context lexically (or simply uses this from the immediate outer scope). This is nice because you don't have to use .bind(this) or store the context var self = this when a function needs the enclosing context.

Let's see how this is inherited from the outer function:

Numbers class holds an array of numbers and provides a method addNumber() to insert new numbers. When addNumber() is called without arguments, a closure is returned that allows inserting numbers. This closure is an arrow function that has this as numbersObject instance because the context is taken lexically from addNumbers() method.

Without the arrow function, you have to manually fix the context. It means using workarounds like .bind() method:

or store the context into a separated variable var self = this :

The context transparency can be used when you want to keep this as is, taken from the enclosing context.

When creating an arrow function, the parenthesis pairs and curly braces are optional for a single parameter and single body statement. This helps in creating very short callback functions.

Let's make a function that finds if an array contains 0 :

item => item === 0 is an arrow function that looks straightforward.

Note that nested short arrow functions are difficult to read. The convenient way to use the shortest arrow function form is a single callback (without nesting).

If necessary, use the expanded syntax of arrow functions when writing nested arrow functions. It's just easier to read.

The generator function in JavaScript returns a Generator object . Its syntax is similar to function expression, function declaration or method declaration, just that it requires a star character * .

The generator function can be declared in the following forms:

a. Function declaration form function* <name>() :

b. Function expression form function* () :

c. Shorthand method definition form *<name>() :

In all 3 cases the generator function returns the generator object g . Later g is used to generate a series of incremented numbers.

In JavaScript functions are first-class objects - a function is a regular object of type function . The ways of the declaration described above create the same function object type. Let's see an example:

The function object type has a constructor: Function . When Function is invoked as a constructor new Function(arg1, arg2, ..., argN, bodyString) , a new function is created. The arguments arg1, args2, ..., argN passed to constructor become the parameter names for the new function and the last argument bodyString is used as the function body code.

Let's create a function that sums two numbers:

sumFunction created with Function constructor invocation has parameters numberA and numberB and the body return numberA + numberB .

The functions created this way don't have access to the current scope, thus closures cannot be created. They are always created in the global scope.

One possible application of new Function is a better way to access the global object in a browser or NodeJS script:

Remember that functions almost never should be declared using new Function() . Because the function body is evaluated on runtime, this approach inherits many eval() usage problems : security risks, harder debugging, no way to apply engine optimizations, no editor auto-complete.

There is no winner or loser. The decision which declaration type to choose depends on the situation.

There are some rules however that you may follow in common situations.

If the function uses this from the enclosing function, the arrow function is a good solution. When the callback function has one short statement, the arrow function is a good option too, because it creates short and light code.

For a shorter syntax when declaring methods on object literals, the shorthand method declaration is preferable.

new Function way to declare functions normally should not be used. Mainly because it opens potential security risks, doesn't allow code auto-complete in editors and loses the engine optimizations.

Do you prefer arrow functions or function expressions? Tell me why in a comment below!

Like the post? Please share!

Quality posts into your inbox.

I regularly publish posts containing:

Subscribe to my newsletter to get them right into your inbox.

About Dmitri Pavlutin

This forum is now read-only. Please use our new forums! Go to forums

assigning functions to variable

In this lesson, we all of a sudden are told we can create functions by just writing function ‘name’ (X)

What is the difference between this and var ‘name’ = function (x) Can you use this way of declaring functions for objects?

Answer 55d25737937676a0e4000247

This is an anonymous function expression:

We can assign this to a variable,

or we can assign it to a property of an object,

or we can write it has a handler (callback) in an event listener, (assume we have a button element with id=”click-me”),

We call it an expression because it is not a statement, and it needs a context or an assignment.

The declared function is a little different in that it is a complete statement right off the hop:

This form of function is immutable, meaning it cannot be changed. bar is carved in stone in memory and cannot be given a new assignment. foo above can be given a new assignment at any time.

To learn more about this, search, ‘function declaration vs function expression’ and keep an eye out for the term, ‘hoisting’ so you get an idea how that fits into this picture.

Aside: name is reserved word in JavaScript and we cannot use it in global window context, only inside a function or as an object property. Search name window context and you might find something about this.

Popular free courses

Learn javascript.

JS Tutorial

Js versions, js functions, js html dom, js browser bom, js web apis, js vs jquery, js graphics, js examples, js references, javascript function definitions.

JavaScript functions are defined with the function keyword.

You can use a function declaration or a function expression .

Function Declarations

Earlier in this tutorial, you learned that functions are declared with the following syntax:

Declared functions are not executed immediately. They are "saved for later use", and will be executed later, when they are invoked (called upon).

Semicolons are used to separate executable JavaScript statements. Since a function declaration is not an executable statement, it is not common to end it with a semicolon.

Function Expressions

A JavaScript function can also be defined using an expression .

A function expression can be stored in a variable:

After a function expression has been stored in a variable, the variable can be used as a function:

The function above is actually an anonymous function (a function without a name).

Functions stored in variables do not need function names. They are always invoked (called) using the variable name.

The function above ends with a semicolon because it is a part of an executable statement.

The Function() Constructor

As you have seen in the previous examples, JavaScript functions are defined with the function keyword.

Functions can also be defined with a built-in JavaScript function constructor called Function() .

You actually don't have to use the function constructor. The example above is the same as writing:

Most of the time, you can avoid using the new keyword in JavaScript.

Function Hoisting

Earlier in this tutorial, you learned about "hoisting" ( JavaScript Hoisting ).

Hoisting is JavaScript's default behavior of moving declarations to the top of the current scope.

Hoisting applies to variable declarations and to function declarations.

Because of this, JavaScript functions can be called before they are declared:

Functions defined using an expression are not hoisted.

Self-Invoking Functions

Function expressions can be made "self-invoking".

A self-invoking expression is invoked (started) automatically, without being called.

Function expressions will execute automatically if the expression is followed by ().

You cannot self-invoke a function declaration.

You have to add parentheses around the function to indicate that it is a function expression:

The function above is actually an anonymous self-invoking function (function without name).

Functions Can Be Used as Values

JavaScript functions can be used as values:

JavaScript functions can be used in expressions:

Functions are Objects

The typeof operator in JavaScript returns "function" for functions.

But, JavaScript functions can best be described as objects.

JavaScript functions have both properties and methods .

The arguments.length property returns the number of arguments received when the function was invoked:

The toString() method returns the function as a string:

A function defined as the property of an object, is called a method to the object. A function designed to create new objects, is called an object constructor.

Arrow Functions

Arrow functions allows a short syntax for writing function expressions.

You don't need the function keyword, the return keyword, and the curly brackets .

Arrow functions do not have their own this . They are not well suited for defining object methods .

Arrow functions are not hoisted. They must be defined before they are used.

Using const is safer than using var , because a function expression is always constant value.

You can only omit the return keyword and the curly brackets if the function is a single statement. Because of this, it might be a good habit to always keep them:

Arrow functions are not supported in IE11 or earlier.

Get started with your own server with Dynamic Spaces

COLOR PICKER

Get your certification today!

Get certified by completing a course today!

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

[email protected]

Your Suggestion:

Thank you for helping us.

Your message has been sent to W3Schools.

Assign a Function to a Variable in JavaScript

This article explains how we assign a declared function to any variable and check whether the function contains parameters or not. The function associated with the variable may return any value and store that value in a variable; we can also call the function using its assigned variable as many times as we want.

Example of Assigning a Function to a Variable Using JavaScript in HTML

Please enable JavaScript

Examine the Given HTML Code

Create a text document using a notepad or any other text editing tool., paste the given code in the created text file., save that text file with the extension of .html and open it with any default browser., you can see the input form to insert value and the submit button; using that button, you can check your value., alternative way to assign a function to a variable in javascript, related article - javascript function, related article - javascript variable.

Assign variable to function VS assign function to variable

I know that in the code above, we passed a function to a variable. fn=baz , if I change it to fn=baz() IDE will give me a type error: fn is not a function. So I assume in js we do not assign functions to variables, we assign the output of the functions into a variable. Because the elements at the each side of = has to be the same type. Am I correct?

Then what does this mean? function bar(){fn();} ? why do we need to add a parameter after a variable?

I am a bit confused…

You can assign functions to variables (because in JS you can pass around functions as if they were plain data), like in var f = function() {...}; . You can also invoke the function in f by writing f() in your code.

Also, variables in JS have no type. A variable that previously held a number doesn’t care if you assign it a string or array, or a function

When you changed it to fn = baz() , you were invoking the baz function, which returns undefined (simply because there are no return statements in that function). So fn now is undefined , which is definitely not a function, and you get the error when fn() was executed.

I don’t think that baz function returns undefined because here in this example, it returns 2.

But to understand the code I put 1st was

Don’t confuse the result of console.log ging with return values. The 2 that you see is not a return value, but rather the result of console.log ging the 2 from inside baz() . When a function has no return statements, their return values are implicitly undefined .

True. The global fn variable holds a reference to the baz function. Then you can later invoke the baz function by using fn()

I will remember this from now on. Thanks!!

IMAGES

how to assign function to variable in typescript Code Example
40 Javascript Assign Function To Variable
Declare & Assign values to variables in JavaScript
Javascript
32 How To Assign Value In Javascript
38 Let In Javascript Vs Var

VIDEO

Functions in JavaScript
What is Function Expression in JavaScript
C++ Binary Tree
Using a Ternary Statement in JavaScript to Assign a Variable to One of Two Possibilities
Javascript Variables
JavaScript Add Parameters to a Function

COMMENTS

How can we assign a function to a variable in JavaScript
Programmers can create a single variable using the var, let, or const keywords and assign the function expression to that. However, creating a
javascript
However, when we use the const-statement, the variable reference becomes immutable. This means that we cannot assign a new value to the variable. Please note
How to Assign a Function to a Variable in JavaScript
Assign an Anonymous Function to a Variable ... An “anonymous” function is the simplest type of function that can be assigned to a variable. As indicated by the
Functions
Parameters are essentially passed to functions by value — so if the code within the body of a function assigns a completely new value to a
6 Ways to Declare JavaScript Functions
It is possible to use a function expression and assign it to a regular variable, e.g. const factorial = function(n) {...} . But the function
assigning functions to variable
Aside: name is reserved word in JavaScript and we cannot use it in global window context, only inside a function or as an object property. Search name window
The Differences Between Declaring a Function and Assigning a
This video explains the difference between declaring a function and assigning an anonymous function to a variable on JavaScript.
JavaScript Function Definitions
Functions stored in variables do not need function names. They are always invoked (called) using the variable name. The function above ends with a semicolon
Assign a Function to a Variable in JavaScript
Example of Assigning a Function to a Variable Using JavaScript in HTML ; script type · text/javascript · > ; form id="form" onsubmit · return false;
Assign variable to function VS assign function to variable
You can assign functions to variables (because in JS you can pass around functions as if they were plain data), like in var f = function() {...};