Js interpreter interpreted

The JavaScript Interpreter, Interpreted

@marthakelly

Software’s Primary Technical Imperative is_________________

Software’s Primary Technical Imperative ismanaging complexity

JavaScript is (usually) interpreted

Source Code >> Parser >> AST >> Bytecode >>

Machine Code

JavaScript is...really weird.

JavaScript is...really wonderful

● (nearly) everything is an object

● functions are first class objects

○ variables

○ object methods

○ arrays

○ passed as arguments

○ returned as values

To understand JavaScript you must understand

how the JavaScript creates function objects.

Function Objects have two stages

1. Creation

a. << magic happens!>>

b. determines scope and context

2. Execution

a. function is run

It’s all about (Execution) Context

All JavaScript code is executed through an

execution context

● Global

● Function

● Eval

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 ]]

Execution Context is an “object”

var executionContext = {

variableObject: {},

scopeChain: {},

this: {}

}

var executionContext = {

variableObject: {

arguments: {

parameterName: argumentValue;

},

functionName: pointer;*

variableName: undefined;*

}

...

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

The properties created on the Variable object

for local variable declarations initially

assigned as undefined.

Despite JavaScript’s C-like syntax, JavaScript

does not have block level scoping.

JavaScript has function scope (lexical scoping)

Scope

Scope chainfunctions 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 | +-----------------------------+

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.

“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.

GO AND FIND BEE AND PUPPYCAT ON YOUTUBE NOW

var bee = {name: 'Bee'};

var puppycat = {name: 'PuppyCat'};

bee.sayHello = function(){

return "Hi, I'm " + this.name;

}

puppycat.sayHello = bee.sayHello;

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

“this”

● top level function○ global object**

● method○ the object it’s applied to

● constructor○ the created object

Omg, Closures

A closure is created when a function

remembers the variables in its scope when it

was created.

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”); // NOPEgame.guess(“under the bed”); // YUP

Hopefully now you know more about

how JS works

Thanks, everyone!

@marthakelly