JavaScript: Difference between Function Declaration and Function Expression

1. What is Function Declaration and Function Expression

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 ( FormalParameterListopt ) { FunctionBody }

in above condition the function name is visible within it’s scope and the scope of it’s parent (otherwise it would be unreachable)

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 Identifieropt ( FormalParameterListopt ) { FunctionBody }

2. Difference between Function Declaration and Function Expression

Essentially, Function Declaration (function functionTwo(x)) should be part of an object notation, meanwhile Function Expression (var doSomething = functionOne(x){ alert(x);}) is simply creating an anonymous function and assigning it to a variable doSomething . So doSomething() will call the function.

Secondly, there is difference due to the mechanism called variable hoisting in JavaScript. 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). It causes that Function Declaration (functionTwo) is hoisted and defined at parse-time for a script block, whereas Function Expression (functionOne) is defined at run-time. For example:

This also means you can’t conditionally define functions using the second syntax:

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, where the entire function body will be hoisted as well.

Therefore, Function Declaration can be placed anywhere in the code and 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.

In the meantime, Function Expression will result in error if not defined before calling. 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.

Resource: Stackoverflow

Leave a Reply

Your email address will not be published. Required fields are marked *