Functions are first-class objects and they provide scope.
• Can be created dynamically at runtime, during the execution of the program
• Can be assigned to variables, can have their references copied to other variables, can be augmented, and, except for a few special cases, can be deleted
• Can be passed as arguments to other functions and can also be returned by other functions
• Can have their own properties and methods
// antipattern
// for demo purposes only
var add = new Function('a, b', 'return a + b');
add(1, 2); // returns 3
Any variable defined with var inside of a function is a local variable, invisible outside the function. Saying that curly braces don’t provide local scope means that if you define a variable with var inside of an if condition or inside of a for or a while loop, that doesn’t mean the variable is local to that i for for.
Variable scope
It’s only local to the wrapping function, and if there’s no wrapping function, it becomes a global variable.
Disambiguation of Terminology
function expression/ anonymous function
// function expression, a.k.a. anonymous function
var add = function (a, b) {
return a + b;
};
named function expression
// named function expression
var add = function add(a, b) {
return a + b;
};
Note
The only difference is that the name property of the function object will be a blank string. The name property is an extension of the language (it’s not part of the ECMA standard) but widely available in many environments.
The name property is useful when using debuggers, such as Firebug, or when calling the same function recursively from itself.
function declarations
function foo() {
// function body goes here
}
Declarations Versus Expressions: Names and Hoisting
// this is a function expression, passed as an argument to the function `callMe`
callMe(function () {
// I am an unnamed function expression
// also known as an anonymous function
});
// this is a named function expression
callMe(function me() {
// I am a named function expression
// and my name is "me"
});
// another function expression
var myobject = {
say: function () {
// I am a function expression
}
};
Function declarations can only appear in “program code,” meaning inside of the bodies of other functions or in the global space. Their definitions cannot be assigned to variables or properties, or appear in function invocations as parameters.
// global scope
function foo() {}
function local() {
// local scope
function bar() {}
return bar;
}
Function’s name Property
The availability of the read-only name property.
function foo() {} // declaration
var bar = function () {}; // expression
var baz = function baz() {}; // named expression
foo.name; // "foo"
bar.name; // "" // undefined in IE; empty string in FF, Webkit
baz.name; // "baz"
The case against function declarations and the reason to prefer function expressions is that the expressions highlight that functions are objects like all other objects and not some special language construct.
Note
Don't assign a different name to a named function expression since it's not properly implemented in some browsers(IE).
var foo = function bar() {};
Function Hoisting
// antipattern
// for illustration only
// global functions
function foo() {
alert('global foo');
}
function bar() {
alert('global bar');
}
function hoistMe() {
console.log(typeof foo); // "function"
console.log(typeof bar); // "undefined"
foo(); // "local foo"
bar(); // TypeError: bar is not a function
// function declaration:
// variable 'foo' and its implementation both get hoisted
function foo() {
alert('local foo');
}
// function expression:
// only variable 'bar' gets hoisted
// not the implementation
var bar = function () {
alert('local bar');
};
}
hoistMe();
Just like with normal variables, the mere presence of foo and bar anywhere in the hoistMe() function moves them to the top, overwriting the global foo and bar. The difference is that local foo()’s definition is hoisted to the top and works fine; although it’s defined later. The definition of bar()is not hoisted, only its declaration. That’s why until the code execution reaches bar()’s definition, it’s undefined and not usable as a function (while still preventing the global bar()from being “seen” in the scope chain).