JavaScript: The Language Andrew Miadowicz Program Manager DEV307

JavaScript

ECMAScript is just a funny name for JavaScript

C-style syntax but not a whole lot of it function everything() { var x = {a:10}, y = [1,2], z = function() { }; for(var p in x) { lbl: for(var i = 0; i < 10; i++) { switch(x[p]) { case 0: continue; default: break lbl; } if(x instanceof String || 'a' in x) delete x.a; } while(typeof true) { if(void false) { this.x = 3 / (-this.f()) ? /foo/g : new String("hello") } else { do { try { throw 3; } catch(e) { debugger; return; } finally {}} while(false); }

Objects are bags of properties var o1 = {}; o1.x = 3; o1.x = 4; var o2 = { x : 3 }; var o3 = { first: o2, second: function() { return 5; } } o2.x === 3; o2["x"] === 3; o2["the answer!"] = 42;

Objects have prototypes var o1 = { }; o1.valueOf() === "[object Object]" var o2 = {valueOf: function() { return 10; }}; o2.valueOf() === 10

Objects inherit from other objects var point2d = { x:10, y:20 }; var point3d = Object.create(point2d); point3d.z = 30; var location = Object.create(point2d); location.name = "Mandalay Bay"

// Data Property var bankAccount = { balance: 1257 } // Accessor Property var bankAccount2 = { get balance() { return 1257; } set balance(v) { }; }

Objects have a descriptor associated with each property Data Descriptor: { value : 47, writable : false, enumerable : true, configurable : true } Accessor Descriptor: { get : function location() { }, set : function location() { }, enumerable : true, configurable : true }

Objects new ES5 object reflection APIs var desc = Object.getOwnPropertyDescriptor(obj, name) Object.defineProperty(obj, name, desc) var names = Object.getOwnPropertyNames(obj) var protoObj = Object.getPrototypeOf(obj)

demo Accessor Properties Object.getOwnPropertyDescriptor Object.defineProperty Objects, Properties and the DOM

Objects key ideas

Functions are first-class values function sum(x, y) { return x + y; } var sum2 = function(x, y) { return x + y; } var sum3 = sum; function wrap(f) { return f(); } wrap(function() { return 5; })

Functions are objects function sum(x, y) { return x + y; } sum.length === 2; Object.getPrototypeOf(sum) === Function.prototype;

Functions have special rules for ‘this’ var obj = { sum: function(x,y) { return x + y; } } obj.sum(3,4); var obj2 = { offset: 7; sum: function(x,y) { return x + y + this.offset; } } obj2.sum(3,4) === 14; var f = obj2.sum; f(3,4) === NaN; f.call(obj2, 3, 4); f.apply(obj2, [3, 4]);

Functions have special behaviour when invoked with ‘new’ function Person(firstName,lastName) { this.firstName = firstName; this.lastName = lastName; } var bob = new Person("Bob", "Crites"); var anil = new Person("Anil", "Madhavan"); bob.firstName === "Bob"; Person.prototype.getFullName = function() { return this.firstName + " " + this.lastName; } bob.getFullName() === "Bob Crites"

Functions objects and prototypes and constructors, oh my! bob.firstName === "Bob"; bob.getFullName() === "Bob Crites"; anil.getFullName === bob.getFullName;

Functions objects and prototypes and constructors, oh my! bob instanceof Person Person.prototype.getFullName = function() {... }; new (bob.constructor)("Cynthia", "Washington")

Functions objects and prototypes and constructors, oh my! bob.valueOf() Person.valueOf()

Functions objects and prototypes and constructors, oh my!

demo Constructors and ‘new’ HTML element inheritance Constructors and the DOM

Functions have their own variable scopes // Scope (function() { var x = 5; x === 5; })(); x === undefined // Outer variable access var outer = "hello"; (function() { outer = "goodbye"; })(); outer === "goodbye"; // Isolating from changes in outer variables var outer = "hello"; (function(outer) { setInterval(function() {alert(outer);}, 100); })(outer); outer = "goodbye";

Functions important points

Strict Mode lets you opt-in to a more constrained subset of JavaScript (function () { "use strict"; // this function is strict... x = 5; // Error! arguments.caller; // Error! arguments.callee; // Error! var o = { x: 5}; Object.freeze(o); o.x = 7; // Throws }());

demo Undeclared variables Writing to non-writable properties Eval introducing variables to outer scope Strict Mode

Questions?

Connect. Share. Discuss. Learning Microsoft Certification & Training Resources TechNet Resources for IT Professionals Resources for Developers

Evaluations Submit your evals online

Questions?