Martin Kruliš by Martin Kruliš (v1.0)1

 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 by Martin Kruliš (v1.0)2

 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) by Martin Kruliš (v1.0)3

 Objects ◦ Objects are unordered name-value collections ◦ All members are public var myObject = { foo: 10, bar: function() {... } }; myObject.bar(); myObject.anotherFoo = 100; 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.

 Prototypes ◦ Every object may have a prototype object ◦ Prototypes substitute classes in a specific way 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

 Constructors var Circle = function(r) { this.radius = r; }; Circle.prototype.foo = function() { … } var myCircle = new Circle(42); 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

 Constructors Example 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

 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 by Martin Kruliš (v1.0)8 Slight difference: declarations (1) are processed at parsing time, expressions (2) are processed at runtime.

 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; } by Martin Kruliš (v1.0)9 We follow the scope chain upwards and find the first variable of the name ' a2 '.

 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 by Martin Kruliš (v1.0)10

 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); by Martin Kruliš (v1.0)11 a foo() c a foo() c foo [[Scope]] (global context) xbxb xbxb activation object

 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 by Martin Kruliš (v1.0)12

 Closure function make() { var x = 1; return function() { alert(x++); } } var f1 = make(); var f2 = make(); f1(); f2(); 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

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

 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; 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”.

 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++); } by Martin Kruliš (v1.0)16 Members of object o become part of the variable scope. x is accessible here

by Martin Kruliš (v1.0)17