1. Martin Kruliš 2. 4. 2015 by Martin Kruliš (v1.0)1

2.  Values ◦ Any expression or literal produces a value ◦ There are following value types: number, string, boolean, object, function, and undefined  Operator typeof returns the type of an expression ◦ Values are automatically garbage-collected when no longer needed ◦ Some type conversions are performed automatically  "5" + 4 // is "54"  "5" * 4 // is 20  console.log(myObject) // converted to string 2. 4. 2015 by Martin Kruliš (v1.0)2

3.  Variables ◦ Mnemonic holders for values  Rather “attachments” to values than “memory boxes” ◦ Declared by var keyword var x; var y = 1; var a, b, c; ◦ The declaration is made in the current scope  In global scope, the variables are assigned to the script environment (e.g., object window in the browser) var x = 1; and window.x = 1; are equivalent  In a function, the variable belongs to the local scope (more details later) 2. 4. 2015 by Martin Kruliš (v1.0)3

4.  Objects ◦ Objects are unordered name-value collections ◦ All members are public var myObject = { foo: 10, bar: function() {... } }; myObject.bar(); myObject.anotherFoo = 100; 2. 4. 2015 by Martin Kruliš (v1.0)4 Creates simple object with two members (foo and bar), where foo is a Number and bar is Function (i.e., in some sense a method). Members may be added dynamically.

5.  Prototypes ◦ Every object may have a prototype object ◦ Prototypes substitute classes in a specific way 2. 4. 2015 by Martin Kruliš (v1.0)5 myObject.printName(); [[Prototype]] foo bar [[Prototype]] foo bar [[Prototype]] name printName() [[Prototype]] name printName() Object.prototype AnotherObjectmyObject Searches up the prototype chain, looks for the first printName property myObject.name = …; Creates new member of myObject

6.  Constructors var Circle = function(r) { this.radius = r; }; Circle.prototype.foo = function() { … } var myCircle = new Circle(42); 2. 4. 2015 by Martin Kruliš (v1.0)6 Constructor looks like an ordinary function this refers to the newly created object (so it can be initialized) The prototype attribute is set to an empty object … so it can be easily augmented Creates new object and copies Circle.prototype to internal [[Prototype]] of the new object

7.  Constructors Example 2. 4. 2015 by Martin Kruliš (v1.0)7 myObj MySubclass MyClass.prototype MyClass.prototype MySubclass.prototype MySubclass.prototype myObj [[Prototype]] myObj [[Prototype]] empty object [[Prototype]] empty object [[Prototype]] MyClass obj [[Prototype]] MyClass obj [[Prototype]] new Object.prototype Class-based Language JavaScript Indirect prototyping Inheritance Instatiation

8.  Functions ◦ Special “callable” objects (first-class functions) ◦ Various ways to create them function foo(args) { body } var foo = function(args) { body } var foo = new Function(args, "body"); ◦ Function declaration = object creation ◦ Variadic – implicitly variable arity ◦ No difference between functions and methods 2. 4. 2015 by Martin Kruliš (v1.0)8 Slight difference: declarations (1) are processed at parsing time, expressions (2) are processed at runtime.

9.  Function Scope of Variables var a1; // global scope (obj. window in Browser) function foo() { var a2; // local scope of foo() function innerFoo() { var a3; // local scope of innerFoo() function innerInnerFoo() { // I can see a1, a2, and a3 from here … a2 = 1; } 2. 4. 2015 by Martin Kruliš (v1.0)9 We follow the scope chain upwards and find the first variable of the name ' a2 '.

10.  Execution Context ◦ All JS code is executed in execution context  Abstraction ~ object that holds variables  Global context is represented by the global object  E.g., window object in the browser ◦ New context is created when function is called  Function calls shape the scope chain of exec. context 1.An activation object is created 2.Calling arguments are set in the activation object 3.Scope chain is selected from the [[Scope]] property of the function object (and becomes execution context) 4.Activation object is pushed at the front of scope chain 2. 4. 2015 by Martin Kruliš (v1.0)10

11.  Scope Chain ◦ Similar to prototype chain, but…  Both reads and writes follow the chain  New (local) variables are created by var keyword var a = 1; function foo(x) { a = 2; var b = 3; c = 3; } foo(3); 2. 4. 2015 by Martin Kruliš (v1.0)11 a foo() c a foo() c foo [[Scope]] (global context) xbxb xbxb activation object

12.  Closure ◦ Created functions capture current execution context  Into internal [[Scope]] property ◦ Some parts of the scope chain may become inaccessible from the current execution context  By defining nested functions and returning them out of their creation scope  The hidden part of the scope chain is still accessible from the created (nested) function ◦ The isolated scope chain is usually called closure 2. 4. 2015 by Martin Kruliš (v1.0)12

13.  Closure function make() { var x = 1; return function() { alert(x++); } } var f1 = make(); var f2 = make(); f1(); f2(); 2. 4. 2015 by Martin Kruliš (v1.0)13 make() f1() f2() make() f1() f2() global context [[Scope]] f1 function [[Scope]] f2 function x = 1 make() act. obj x = 1 make() act. obj

14.  Closure Application function createAdder(x) { return function(y) { return x + y; } var add3 = createAdder(3); var add7 = createAdder(7); add3(10); // is 13 add7(10); // is 17 2. 4. 2015 by Martin Kruliš (v1.0)14 When the inner function is created, the closure captures value of x == 3 New function have a new closure where x == 7 The Inner function can see variable x due to scoping rules

15.  Closure Pitfalls function createLinks() { for (var i = 1; i <= 5; ++i) { var link = document.createElement('a'); link.onclick = function(){ alert(i); }; link.textContent = "Link " + i; document.body.appendChild(link); } document.onload = createLinks; 2. 4. 2015 by Martin Kruliš (v1.0)15 All the links are created in one scope, thus sharing one closure. The value of i is 5, when the scope is closed. Always prints “5”.

16.  Pushing Object in Scope Chain ◦ with (obj) statement ◦ Given object is pushed at the top of the chain var o = { x: 1 }; var foo; with (o) { foo = function() { alert(x++); } 2. 4. 2015 by Martin Kruliš (v1.0)16 Members of object o become part of the variable scope. x is accessible here

17. 2. 4. 2015 by Martin Kruliš (v1.0)17