Dev Club Weekly: Javascript Functions - Beginner to Advanced

• Javascript Functions

In the magical world of programming, functions are your spells (and we all need more spells)

Simple Example (Beginner):

• var x = function (d) {return d;}

Pass in something, and it throws it back to you (reflection spell)

• x("hello world")  >>> "hello world"

The point is to not have to type as much (be lazy).  Use general functions to save yourself time.

If you are trying to get the computer to sing you "Old McDonald" (polymorph spell)

• var chorus=function(animal){return "and on that farm he had a " + animal + " e i e i o";}

• chorus("cow") >>> "and on that farm he had a cow e i e i o"

Arguments (Intermediate):

If you don't actually know how many arguments will be passed to the function, multiple arguments can be referenced using the "arguments" keyword to access a something almost identical to an array ( it's a pseudoarray, just know it's not 'totally' an array like you're used to, but you can loop over it like an array, and look up the edge-cases later), this is available in all functions! (mass polymorph)

• chorus = function( ) { 

•     x = "" ;  

•     for (var i = 0; i < arguments.length; i++) { 

•         x += " he had a " + arguments[i]  + " e i e i o; } 

•     return x; 

•     };

Closures (Intermediate):

Functions are the only real way to isolate variables in Javascript (a 'closure' in the CS lingo)

http://en.wikipedia.org/wiki/Closure_(computer_programming)

So there are some crazy hacks (that EVERYONE uses) to encapsulate chunks of code.

• (function(){var x="something unreachable from the outside world, but usable here.";})()

• 
  

• x >>> undefined

call( ), apply( ), and bind( ) in Javascript (Advanced):

Sometimes you want to steal a method (function attached to an object) to use on another object. Here's some black magic:

Start with an object:

• var a={};

Give it some properties:

• a.width=10;

• a.height=10;

And a Method (a function attached to an object):

• a.area=function(){return this.width * this.height;};

That method uses 'this' which refers to the object itself - so in this case this.width is the same as a.width is the same as 10, so when we call area...

• a.area() >>> 100

Now for the theft!

Another object:

• var b={};

Same properties:

• b.width=2;

• b.height=2;

But no area method, so...

• b.area() >>> TypeError: undefined is not a function

Use it once:

• a.area.call(b) >>> 4

Or steal it completely:

• b.area=a.area.bind(b);

• b.area() >>> 4

• a.area() >>> 100

call( ) and bind( ) reassign 'this' to a new target, so as long as this['property name'] is the same between objects, the methods can be shared.

P.S.

apply( ) is like call, but you can pass the arguments as an array (if what I just said doesn't make any sense to you: don't worry about it, apply's not that important most of the time). Mostly you can ignore it, except that it lets you do this cool trick. Bear with me for a sec.

• Math.max(100,200) >>> 200

• Math.max(3, 4, 5, 8, 9000, 10) >>> 9000

But what if I have this:

• var d=[1,2,3,200,12,3,4,5,1000];

???

Behold: Magic!

• Math.max.apply(null,d) >>> 1000

and that's pretty much all you'll ever use apply( ) for... probably...