Introduction to JavaScriptModule 3

Client Side JS Programming Group @ M-GO Sponsored By

www.mgo.com

Module 3 Topics• Functions

– Creating a function– Anatomy of a function

• Global Variables• Function.arguments• Function Invocation

– Function()– Function.call– Function.apply

• Recursion• Callback Functions• Call Stack• Prototype Chain• Constructors

– new• Forget that last part

– beget• Closures

I’ve heard of some of these words…

Functions• Functions are the building blocks of your code.

Functions make everything happen.• Functions create the scope in which your

variables are accessible.• Functions are first class objects.• The versatility of functions are the coolest

thing in all of JavaScript without a doubt.FUNCTIONS!!!!

Creating a function• You can do this. Called a function declaration.

• Or this. Called a Function expression.

• Or best of all, A function expression with a private name.

• But all are valid, and all are totally stylistically cool. Which is the best kind of cool.

Anatomy of a function

Variable that referencesthis function

Function name Argument list

Function body

Return statement

Scope variable

Invoking a function• To invoke a function use ()

• You can use two other methods to invoke a function• <function>.call allows you to define the value of the “this”

variable.

• <function>.apply allows you to define the value of the “this” variable and pass your variables as an array.

Call and apply are super cool, but we won’t be using them until we learn more about arrays in the next module.

What is THIS!?

Global Variables

• All programs on a web page exist within the global scope.

• Think of the global scope as a great big outer function that you can’t see that is invoked when the web page loads up.

• Because all JavaScript programs exist in this scope it’s very important to use it as sparingly as possible, and when you do use it, make unique variables that won’t be overwritten by other developers.

Function arguments• Function arguments are the values passed to the function

during invocation.• These values are automatically assigned to the argument list in

the functions declaration when the function is invoked.• There is no minimum or maximum number of arguments that

can be passed to any function.• You can access arguments through the argument variables you

created when you declared the function or you can use the arguments array.

Recursion

• Recursion is when a function calls itself creating a loop.

• This function will continue to call itself until a condition is satisfied.

Recursion is bad ass

Callback Functions• A callback function is a function you pass to

another function as an argument to be invoked at a later time within that function. This is a very common practice in JavaScript.

Another common method is to use an anonymous function in the argument list.

Call Stack• Each time a function is invoked the code path enters into the

function. The call stack is the list of functions that the code path in currently inside of.

• Think of the call stack as a path back to the original function that was called.

• You can only see the call stack within the debugger.• The call stack is very useful when debugging, it will show you

where your function was invoked from.

Prototype Chain • All objects, this includes functions, variables, arrays –

everything, inherits its properties from its prototype.• Think of the prototype as the “parent object” that the object

draws its properties from.• These prototype objects have prototype objects of their own

creating a chain all the way back to the base Object constructor.• Any properties or methods added to the prototype of an object

are inherited by the object.

Constructors• A constructor is a function that creates copies of itself when invoked

with the “new” keyword. This is called instantiating the constructor.• When you instantiate a constructor it causes the “this” keyword to

reference the function itself inside of the function, rather than the global object, window, which is what it is usually referring to.

• Constructors always begin their names with capital letters.

(there’s a reason I’m here)

Constructors can have prototypes

• it's important to set the constructor property or it will appear that this object created with the Mammal constructor.

(You’ll hate the next slide)

beget• Now forget all of that. The new

keyword is dangerous, so it’s best that you don’t use it at all. A better method is to use the beget method defined inside of JavaScript: The Good Parts. This encapsulates the rather silly syntax required to define a prototype object.

• The reason it’s dangerous is if you invoke a constructor function without the new keyword the “this” variable will continue to refer to the global object causing all sorts of terrible things to happen, least of which is your code will not work.

• By using beget is easy and feels more like classical inherence.

Why the hell did you just tell me about

constructors then!?

Closures• A closure ties a function to the context in which it was

declared.• When you create a function, you create an Execution

Context.• The execution context consists of the lexical scope, the

variable scope and the binding of the “this” object.– Lexical scope consists of the chain of closures (outer functions)

that the function was declared in.– Variable scope consists of the variables in the calling closure.– The binding of the “this” object isn’t related to closure.

Code Like a Sir!

• Avoid using global variables, you risk conflicting with other programs running on your page.

• Avoid using “this” and “new”.• Do use beget for prototypal inheritance.• Recursion is super cool! Anytime you can use it, do it!• Callback functions are cool too! Don’t limit your idea of function

arguments to primitive types like strings and numbers, functions are objects too.

• When you’re constructing your class like objects, modules and namespaces make sure you use the power of closures!

• Don’t forget to use code quality tools like http://jslint.com/.• Thank about what you’re going to do a long time before you write

the first line, but experiment often.• Think about coding and try to solve problems in your head when

you’re idle. Dream about coding. For me, many of my best solutions and ideas come in the moments just before sleep.

Client Side JS Programming Group @ M-GOSponsored By

www.mgo.comContact Me: Tony GermaneriEmail Tony.Germaneri@mgo.comHangouts TonyGermaneri@gmail.comSkype tony.germaneri.mobile