JavaScript Functions

Diving Deep into
JavaScript Functions
By: Colin DeCarlo
colindecarlo@colindecarlo

About Me

About Me
Colin DeCarlo
Software Developer
PHP & JavaScript

Why?

Other people need to know this

–Johnny Appleseed
“Type a quote here.”

Warning
This talk will be technical

Agenda
(function printAgenda() {
var topics = [
'What is a Function?',
'How do I create these "functions"?',
'What happens when I invoke a Function?',
'How do I wield this power?'
];
return topics.join("n");
})();
// => 'What is a Function?',
// => 'How do I create these "functions"?,
// => 'What happens when I invoke a Function?',
// => 'How do I wield this power?"

What is a JavaScript Function?

Functions are Objects
With properties, methods and a {{Prototype}}

function add(x, y) {
return x + y;
}

return x + y;
}
Own Properties Inherited Methods
name: add
length: 2
Function.prototype
call
apply
bind
Object.prototype
toString

How do I create these “functions”?

Named Function
function named_function() {
return "I'm a named function!"
}

Function Expression
var function_expression = function () {
return "I'm a function expression!";
}

Immediately Invoked Function Expression
(function () {
var button = document.getElementById(
'submit_button'
);
button.addEventListener('click',
function (e) {
this.classList.add('disabled');
}
);
})();

What happens when I invoke a
function?

add(2, 3);
Execution Context
scope chain

add(2, 3);
Execution Context
scope chain
Activation
Object

Scopes
var globalVar = 'found in global scope';
function global_function() {
var localVar = 'found in global_function';
function inner_function() {
var innerVar = 'found in inner_function';
console.log(globalVar, localVar, innerVar);
console.log(notFoundAnywhere);
}
inner_function();
}
global_function();
global scope
globalVar: ‘found in global scope’
global_function: [Function]

Scopes
}
inner_function();
}
global_function();
global scope
global_function scope

Scopes
}
inner_function();
}
global_function();
global scope
localVar: ‘found in global_function’
inner_function: [Function]

Scopes
}
inner_function();
}
global_function();
global scope
inner_functon scope

Scopes
}
inner_function();
}
global_function();
global scope
innerVar: ‘found in inner_function’
inner_functon scope

Scopes
}
inner_function();
}
global_function();
// => found in global scope, found in global_function, found in inner_function
// => undefined
global scope
innerVar: ‘found in inner_function’
inner_functon scope

Activation Object

this
contains a reference to some object
add(2, 3); this: {{ object }}

var that = this;

A function which is simply executed
var debug = true;
function something_complicated() {
if (this.debug) {
console.log('Starting something_complicated');
}
// ...
return complex_result;
}
something_complicated();

A function which is simply executed
var debug = true;
function something_complicated() {
if (this.debug) {
}
// ...
}
something_complicated();
this === window;
// => true

Functions as object properties
var calculator = {
debug: true,
something_complicated: function () {
if (this.debug) {
}
// ...
}
};
calculator.something_complicated();

Functions as object properties
this === calculator;
// => true
var calculator = {
debug: true,
something_complicated: function () {
if (this.debug) {
}
// ...
}
};
calculator.something_complicated();

As element attributes
<button id="calculate" onmouseover="this.style['border-color'] = 'blue';">
Calculate
</button>

As element attributes
this === calculate;
// => true
<button id="calculate" onmouseover="this.style['border-color'] = 'blue';">
Calculate
</button>

Functions as event handlers
<script>
var calculate = document.getElementById('calculate');
calculate.addEventListener('click', function (e) {
this.innerHTML = 'Calculating...';
});
</script>

Functions as event handlers
this === calculate;
// => true
<script>
var calculate = document.getElementById('calculate');
calculate.addEventListener('click', function (e) {
this.innerHTML = 'Calculating...';
});
</script>

In a constructor function
function Circle(radius) {
this.radius = radius;
}
var myCircle = new Circle(42);

In a constructor function
this instanceof Circle;
// => true
function Circle(radius) {
this.radius = radius;
}
var myCircle = new Circle(42);

arguments
“Array like” object with numerical properties
this: window
add(2, 3);

arguments
“Array like” object with numerical properties
this: window
add(2, 3);
arguments: {
0: 2, 1: 3
}

Named Formal Parameters
this: window
add(2, 3); arguments: {
0: 2, 1: 3
}

Named Formal Parameters
this: window
add(2, 3); arguments: {
0: 2, 1: 3
}
x: 2
y: 3

Declaration and Hoisting
function concat() {
return " ".join(to_array(arguments));
function to_array(args) {
var words = [];
for (var i = 0; i < args.length; i++) {
words.push(args[i]);
}
return words;
}
}

functions are declared
function concat() {
var words = [];
}
return words;
}
}

functions are declared
variables are declared
function concat() {
var words = [];
}
return words;
}
}

function concat() {
var words = [];
}
return words;
}
}
function concat() {
var words = [],
i;
for (i = 0; i < args.length; i++) {
}
return words;
}
}

Hoisting: One Simple Rule

Hoisting: One Simple Rule
Don’t. Declare all variables and functions at the top.

function?
• The Execution Context is created and placed on top of the execution stack

function?
• this and arguments are declared and assigned

function?
• Named formal parameters are declared and assigned

function?
• Named functions are declared

function?
• Named functions are declared
• Local variables are declared

How may I wield this power?

var colors = enumer('RED', 'GREEN', ‘BLUE’),
selectedColor = ‘RED’;
colors.contains(selectedColor);
// => true
selectedColor = ‘YELLOW’;
// => false
Variadic Functions

Modifying Context
Taking control of this
call(thisArg, arg1, …, argN)
use to set the value of this when you know the number
of arguments and what they are

Modifying Context
apply(thisArg, argsArray)
use to set the value of this when you don’t know the number
of arguments

Modifying Context
bind(thisArg, arg1, …, argN)
use to set the value of this but without executing the function

Partial Application with bind
the process of taking a function which accepts N arguments and turning it 
into a function which accepts N - x arguments

return x + y;
}
var plus42 = add.bind(undefined, 42);
plus42(42);

return x + y;
}
var plus42 = add.bind(undefined, 42);
plus42(42);
// => 84

Closures
A function which “closes over” a variable from an outer scope

Closures
A function which holds a reference to another function’s Activation Object
thus allowing that function to access variables and functions deﬁned
within it

Closures
function plusX(x) {
return function(n) {
return n + x;
};
}
within it

Closures
function plusX(x) {
return function(n) {
return n + x;
};
}
var plus42 = plusX(42);
plus42(1);
// => 43
within it

Trick Question

var funcs = [];
for (var i = 0; i < 5; i++) {
funcs.push(function () {
console.log(i);
});
}
for (var j = 0; j < 5; j++) {
funcs[j]();
}

// => 5
// => 5
// => 5
// => 5
// => 5
var funcs = [];
for (var i = 0; i < 5; i++) {
funcs.push(function () {
console.log(i);
});
}
for (var j = 0; j < 5; j++) {
funcs[j]();
}

// => 0
// => 1
// => 2
// => 3
// => 4
var funcs = [];
for (var i = 0; i < 5; i++) {
funcs.push((function (i) {
return function () {
console.log(i);
};
})(i));
}
for (var j = 0; j < 5; j++) {
funcs[j]();
}

Encapsulation: A Better enumer

var colors = enumer('RED', 'GREEN', 'BLUE');
colors.contains('RED');
// => true
colors.contains('YELLOW');
// => false
function enumer() {
}
values = {};
}
return values;
}

// => true
// => false
colors.YELLOW = 'YOLO';
// => true
function enumer() {
}
values = {};
}
return values;
}

// => true
// => false
// => true
delete colors.RED;
// => false
function enumer() {
}
values = {};
}
return values;
}

// => true
// => false
// => true
colors.contains('contains');
// => true
delete colors.RED;
// => false
function enumer() {
}
values = {};
}
return values;
}

// => true
// => false
function enumer() {
var slice = Array.prototype.slice,
values = slice.call(arguments, 0);
return {
contains: function (value) {
return values.indexOf(value) >= 0;
}
};
}

// => true
// => false
// => false
delete colors.RED;
// => true
function enumer() {
return {
}
};
}

// => true
// => false
// => false
delete colors.RED;
// => true
colors.contains('contains');
// => false
function enumer() {
return {
}
};
}

Questions?
https://joind.in/15748

Modifying Context

Modifying Context
`call`
`apply`
`bind`

Modifying Context
`call`
`apply`
`bind`
use to set the value of `this` when you know the number

Modifying Context
`call`
`apply`
`bind`
use to set the value of `this` when you don’t know the
number of arguments

Modifying Context
`call`
`apply`
`bind`
use to set the value of `this` when you don’t know the
number of arguments
use to set the value of `this` but without executing the
function

Encapsulation the JavaScript Way

$ node encapsulation.js
var v = new Vault('sekret');
v.isLocked();
true
v.unlock('sekret')
v.store('js_functions', 'Awesome')
v.retrieve(‘js_functions')
Awesome
v.lock()
v.isLocked()
true
v.retrieve('js_functions')
/Users/colin/Documents/talks/js_functions/encapsulation.js:40
^
Error: The vault is locked
at Vault.retrieve (/Users/colin/Documents/talks/js_functions/encapsulation.js:40:19)
at Object.<anonymous> (/Users/colin/Documents/talks/js_functions/encapsulation.js:68:3)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Function.Module.runMain (module.js:497:10)
at startup (node.js:119:16)
at node.js:906:3

JavaScript Functions

More Related Content

What's hot

Viewers also liked

Similar to JavaScript Functions

Recently uploaded

JavaScript Functions