Slide deck from Strangeloop 2013

1. The JavaScript
Interpreter, Interpreted
@marthakelly

2. Software’s Primary Technical Imperative is
_________________

3. Software’s Primary Technical Imperative is
managing complexity

4. JavaScript is (usually) interpreted
Source Code >> Parser >> AST >> Bytecode >>
Machine Code

5. JavaScript is...really wonderful
● (nearly) everything is an object
● functions are first class objects
○ variables
○ object methods
○ arrays
○ passed as arguments
○ returned as values

6. To understand JavaScript you must understand
how the JavaScript creates function objects.

7. Function Objects have two stages
1. Creation
a. << magic happens!>>
b. determines scope and context
2. Execution
a. function is run

8. It’s all about (Execution) Context
All JavaScript code is executed through an
execution context
● Global
● Function
● Eval

9. Execution Context Stacks
var kitty = function() {
console.log(“kitty”);
}
var hello = function() {
console.log(“hello”);
kitty();
}
hello();
Stacks:
[[ Function Kitty Context ]]
[[ Function Hello Context ]]
[[ Global Execution Context ]]

10. Execution Context is an “object”
var executionContext = {
variableObject: {},
scopeChain: {},
this: {}
}

11. var executionContext = {
variableObject: {
arguments: {
parameterName: argumentValue;
},
functionName: pointer;*
variableName: undefined;*
}
...

12. var kitten = function() {
console.log(mew);
var mew = 'Mew!';
}
// is interpreted as
var kitten = function() {
var mew = undefined;
console.log(mew);
mew = 'Mew!';
}
kitten() // undefined

13. The properties created on the Variable object
for local variable declarations initially
assigned as undefined.

14. Despite JavaScript’s C-like syntax, JavaScript
does not have block level scoping.
JavaScript has function scope (lexical scoping)
Scope

15. Scope chain
functions have the scope chain of the execution context in
which they are created assigned to their internal [[scope]]
property.
+------------------------------+
| global variable obj |
+------------------------------+
^
|
+-----------------------------+
| variable obj for outer call |
+-----------------------------+
^
|
+-----------------------------+
| variable obj for inner call |
+-----------------------------+

16. Resolving Identifiers
JavaScript traverses up the scope chain, moving
locally to globally.
Note:
Identifiers are resolved against the scope chain. ECMA
262 categorizes this as a keyword rather than an
identifier.

17. “this”
this holds a reference to the object that the
function is being applied to.
This doesn't necessarily means that this will equal
the object where the function is stored.

18. GO AND FIND BEE AND PUPPYCAT ON YOUTUBE NOW

19. var bee = {name: 'Bee'};
var puppycat = {name: 'PuppyCat'};
bee.sayHello = function(){
return "Hi, I'm " + this.name;
}
puppycat.sayHello = bee.sayHello;

20. var bee = {name: 'Bee'};
var puppycat = {name: 'PuppyCat'};
bee.sayHello = function(){
return "Hi, I'm " + this.name;
}
puppycat.sayHello = bee.sayHello;
// Hi, I’m PuppyCat

21. “this”
● top level function
○ global object**
● method
○ the object it’s applied to
● constructor
○ the created object

22. Omg, Closures
A closure is created when a function
remembers the variables in its scope when it
was created.

23. var findTheKitten = function() {
var secret = “under the bed”;
return {
guess: function(guess) {
if (guess === secret) {
console.log(“YUP”);
} else {
console.log(“NOPE”);
}
}
}
}
var game = findTheKitten();
game.guess(“in the closet”); // NOPE
game.guess(“under the bed”); // YUP

24. Hopefully now you know more about
how JS works
Thanks, everyone!
@marthakelly