Functions

Question 0

What is the distinguishing characteristic of functions in Javascript?
Discuss Functions as Objects.

Answer 0

JS objects have internal properties wrapped in [[ ]]. They are not accessible via you code, and exist only for internal processing.

Functions are the only objects with the internal property [[Call]]. [[Call]] means that the object can be executed/invoked. Fact: typeof returns “function” when the object has the internal property [[Call]].

Since functions are objects, they can have properties and methods. When a function is declared, a pointer to the function-object is returned (just like all reference data types). If you reference the function without invoking it, you are acting on the function as an object, which is why you can chain function methods from it, like:
func.bind(this);
newFunc = func; // newFunc now has the same pointer as func

Question 1

What are the 2 literal forms of functions? What are the differences?

Answer 1

Function declaration
function name () {}

Function expression (anonymous function)
function () {}

Function declarations are hoisted to the top, so they can be declared after they are used. Since function declarations are hoisted, you cannot do this:
var f = function name () {};
var o = {
  meth: function name() {}
}
[ ].sort(function name () {});

But you can do this:
function name () {}
var f = name;

In other words, function expressions can be treated like all other data types—assigned to variables, passed as arguments, returned from functions, etc. But function declarations can only be treated this way after they are declared.

Question 2

Function parameters.

Answer 2

All functions have an array-like object called arguments which stores all the parameters passed during invocation. Named parameters can also exist, which does not effect the arguments object, but does provide convenience when referencing a parameter (so name instead of arguments[0]). It also is useful when referencing the .length property of the function, which lets you know how many parameters the function expects (unless the function is using arguments internally). Example:

var f = function (name, age) {
  return arguments.length;
};
f(1, 2, 3); //=> 3
f.length;  //=> 2

Question 3

What is function arity?

Answer 3

The number of parameters a function expects. This is exposed through the functions .length property.

Question 4

Defining multiple function declarations with the same name.

Answer 4

The last function declaration wins, no errors involved. Remember, functions are objects, so:
function n () {}
function n () {}
... is just like:
n = new Function();
n = new Function();

Question 5

What is this?

Default assignment of this.

Answer 5

Every scope in JS has an object named this, which represents the “calling object”. In global scope, this is the global object (like window in the browser).

When a function is invoked, the scope invoking the function passes in its `this` object by default. If globally invoked, then the global scope is passed in; if invoked by an object, the object's scope passed in. So:
function pn () {
  return this.name;
}
var name = "Julie";
var o = { name: "David", p: pn };
pn(); //=> "Julie", because the global scope was passed into pn
o.p(); //=> "David", because the object scope was passed into pn

Remember, both o.p and pn are both just references to a function object, so JS will bind this to whatever scope invokes that function object.

Question 7

How to manipulate this?

Answer 7

There are 3 methods to manipulate this (manipulating the default behavior):

.call(thisObj, arg1, arg2, …);
.apply(thisObj, [arg1, arg2, …]); // or, array-like objects
.apply(thisObj, arguments);
.bind(thisObj, arg1, arg2, …);

Use .apply if the arguments are already in array-like format, and use .call if the arguments are already stored in separated variables.

The difference between .call and .bind is that .bind does not invoke the function like .call and .apply do, rather, it binds the value for this, and if provided arguments (optional), permanently binds the argument values for you. So:

function print (age, subtitle) {
  return this.name + ", " age + ", " + subtitle;
}
var b1 = print.bind({name: "Julie"}, 27);
var b2 = print.bind({name: "Julie"});
b1("Mother"); //=> "Julie, 27, Mother"
b2("Mother"); //=> "Julie, Mother, undefined"
b2(27, "Mother"); //=> "Julie, 27, Mother"

print. length //=> 2
b1. length //=> 1
b2. length //=> 2

Question 8

Get a function’s name. Anonymous vs declared functions.

Answer 8

function fn () { }
fn.name //=> “fn”
var fn = function () { };
fn.name //=> “”