Who in their right mind would prototype a programming language in JavaScript?!? It’s really not as crazy as it sounds. For starters, JavaScript is a powerful and flexible dynamic language with decent support for OO and functional programming. Granted, there are better programming languages out there that you could use. But what makes JavaScript an interesting option is the fact that it is the language of the web browser… and everyone has a web browser.

When you prototype a programming language in the web browser:

• You make it easy for people to try it out. Let’s face it: only a small fraction of the people who are interested in a new programming language will be interested enough to go through the hassle of downloading and installing a compiler, VM, etc. so that they can play with it. Navigating to a web-based interactive demo of the language is a much smaller investment, one that people are generally more willing to make.
• You make it easy for people to share it. Someone who plays with your demo and finds it interesting can send the URL to other potentially interested people, post it in a blog, etc.
• As a bonus, you get access to a rich multimedia environment — the DOM, canvas, web workers, etc. — with plenty of opportunities for you to create useful domain-specific languages (DSLs).

In this class, you will learn how to write your own source-to-source translators, like the compilers of these languages. As you probably already know, there are newer and trendier alternatives to JavaScript out there. For example, CoffeeScript and TypeScript are languages that compile to JavaScript and give the programmer access to all of the good stuff that’s in the web browser. While we have nothing against these languages, we encourage you to do our assignments in plain old JavaScript. It is, after all, the “assembly language” of the web, so a programming language hacker should know it well. The people who implemented CoffeeScript and TypeScript certainly do.

Alright, that’s enough motivation. Let’s dive in.

JavaScript’s objects are dictionaries that map property names to values. You can create an object by calling a constructor, e.g., new Object() or by writing an object literal, e.g., var daddysShirt = { type: 'polo', color: 'white', numButtons: 3 };

To access and assign values to the properties of an object, you use the . operator, e.g., Evaluates to 'white'.daddysShirt.color and daddysShirt.type = 'guayabera'; daddysShirt.numButtons = 7; daddysShirt.brand = 'Banana Republic'; When you assign a value to a property of an object, that property will be added automatically if the object doesn’t already have it. And if you don’t know the name of a property at compile time, there’s also a square bracket syntax that lets you compute the name dynamically, e.g., var propName = 'num' + 'Buttons'; Evaluates to 7.daddysShirt[propName]; Property names are always strings. If you try to access or assign to a non-string property of an object, e.g., var someObject = { foo: 42, bar: 'hello world' }; daddysShirt[someObject]; the non-string value will be implicitly converted to a string via its toString() method. In the admittedly nonsensical example above, someObject’s toString() returns '[object Object]'. Yup, the default toString() is pretty useless. Since daddysShirt does not have a property with that name, daddysShirt[someObject] will evaluate to the special value undefined.

Last but not least, you can remove a property using the delete statement. For example, afterdelete daddysShirt.color; the expression daddysShirt.color will evaluate to undefined.

JavaScript is a prototype-based language: every object has a prototype from which it may inherit properties. For example, the prototype of all strings is String.prototype, which is where methods like indexOf and substr are defined. (More on these methods, and how methods work, later.)

When people say that an object delegates to its prototype, they’re talking about the property look-up operation. Here’s how the prototype chain is used for property look-up: if you look up the value of a property p in obj and obj doesn’t have it, the JavaScript interpreter will automatically look it up in obj’s prototype. If obj’s prototype doesn’t have a value for p either, the search will continue in obj’s prototype’s prototype, and so on. If we eventually reach null, which is not an object and therefore does not have any properties, then obj.p will evaluate to the special value undefined.

You can use a function called Object.create to create an object that delegates to another object. For example: // My shirt is like daddy’s shirt… var myShirt = Object.create(daddysShirt); The relationship between the two objects is illustrated on the right. Note that myShirt does not have any properties of its own initially; it inherits all of its properties from daddysShirt. This means that if we change the value of any of daddysShirt’s properties, e.g., with daddysShirt.numButtons = 8; then myShirt’s value for that property will change, too.

Now let’s see what happens when we assign to one of the properties of myShirt: // … except it’s blue. myShirt.color = 'blue'; After the assignment above, myShirt gets its own color property whose value is 'blue'. This property shadows the property that myShirt previously inherited from daddysShirt, so future changes to daddysShirt.color will no longer effect the value of myShirt.color.

To declare a function, you use the function keyword: function add(x, y) { return x + y; } More on scoping later. The example above declares a function called add in the current lexical scope.

Functions are first-class values. This means you can store a function in a variable, property, or an array. You can also return a function from another function or a method. Note that you don’t have to declare a function in order to get your hands on a function value. In JavaScript, there are two ways to write function expressions. One looks similar to a function declaration: Evaluates to 6.(function(x) { return x + 1; })(5) The other, known as a fat arrow function, is more concise: Evaluates to [2, 3, 4].[1, 2, 3].map(x => x + 1) (There is another important difference between “normal” functions and fat arrow functions, which we discuss in the section on methods.)

Here’s a more elaborate example that shows that a function can reference variables from its enclosing environment: function makeCounter() { var count = 0; return function() { return count++; }; } var counter = makeCounter(); Evaluates to 0.counter(); Evaluates to 1.counter(); Evaluates to 2.counter();

In JavaScript, you can call a function with any number of arguments, no matter how many formal parameters that function has in its declaration. A function can access the arguments that were passed to it via its formal parameters or the arguments object, which is, erm, not entirely unlike an array. The arguments can be used to write variadic functions, i.e., functions that take a variable number of arguments. For example: function sum(/* a, b, c, … */) { var ans = 0; for (var idx = 0; idx < arguments.length; idx++) { ans += arguments[idx]; } return ans; } sum(5, 10, -2);Evaluates to 13.

Warning! The arguments object is array-like, but it’s not really an array. This is unfortunate for a number of reasons, not least of all because it means that arguments doesn’t support useful Array methods like map and reduce. If you really want to use those methods, here’s a way to create an array that contains the arguments that were passed to your function: var args = Array.prototype.slice.call(arguments); It’s kludgy, but it does the trick. More on the slice and call methods later.

JavaScript has lexical scoping, but it doesn’t work the way you’d expect. You see, in most languages that are lexically-scoped, a block statement ({ … }) is a lexical scope. In JavaScript, the only thing that is a lexical scope is a function.^{* *} That’s not completely true, I used a little didactic license there: catch blocks also get their own lexical scope.

A method is just a function that’s stored in a property. For example, if we have: var aPoint = { x: -2, y: 5, toString: function() { return '(' + this.x + ',' + this.y + ')'; } }; then aPoint.toString() will evaluate to '(-2,5)'.

To evaluate a method call e_recv.m(e₁, e₂, …, e_n), a JavaScript interpreter will:

• evaluate e_recv to get the object that is the receiver of the message,
• evaluate the arguments,
• look up the function that is stored in the receiver’s m property, and
• call that function with the values of the arguments, and with the pseudo-variable this bound to the receiver.

Warning! When you call a function the usual way, e.g., As opposed to a method call, e.g., o.m(1, 2). f(1, 2), this gets bound to undefined. So if you declare a helper function inside of a method — which seems like a reasonable thing to do! — it won’t work as you would expect: ({ m1: function() { // here, `this` is the receiver this.m2(); // works function helper() { // but here, `this` is `undefined` this.m2(); // ERROR! } helper(); }, m2: function() { … } }).m1(); This is a subtle bug, and JavaScript programmers get bit by it all the time. The usual work-around, once you realize that this is the problem, is to declare a local variable called self through which the helper function can access the receiver: ({ m1: function() { var self = this; function helper() { // here, `this` is still `undefined` // but we have access to the receiver through `self` self.m2(); // works! } helper(); }, m2: function() { … } }).m1(); Another solution is to make helper a fat arrow function. Here’s what that looks like: ({ m1: function() { var helper = () => this.m2(); // works! helper(); }, m2: function() { … } }).m1(); This works because a fat arrow function captures not only the local variables, but also this from its enclosing lexical scope.

So far we’ve seen two ways to call a function,

• the “function” way, e.g., f(1, 2), and
• the “method” way, e.g., obj.m(1, 2)

There are two more ways to call a function in JavaScript that are worth mentioning. One is through the function’s call method, which is useful because it lets you specify the object that should be bound to this when the function’s body is evaluated, e.g., f.call(objThatWillBeThis, 1, 2).

The other way is through the function’s apply method, which is like call except that you pass the arguments as an array, e.g., f.apply(objThatWillBeThis, [1, 2]). This is useful if, at compile time, you don’t know how many arguments your code will pass to a method or function. As an example, here’s a function that takes a function as an argument, and returns another function that behaves just like the original, but it also logs every call to the console: function logged(f) { return function() { console.log(f.name + ' was called'); return f.apply(this, arguments); }; } Note that logged works with any function, no matter the arity (number of formal parameters): function inc(x) { return x + 1; } var loggedInc = logged(inc); loggedInc(5);Outputs 'inc was called' to the console and returns 6. function add(x, y) { return x + y; } var loggedAdd = logged(add); loggedAdd(1, 2);Outputs 'add was called' to the console and returns 3.

JavaScript does not have support for classes, but it does have a syntactic sugar for declaring them. Under the hood, it’s still all just objects, delegation, etc. but the sugar really makes it feel like you’re programming in a “classy” language. Here’s an example of a class declaration: class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ',' + this.y + ')'; } } And here’s its desugaring, i.e., what it really means: function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function() { return '(' + this.x + ',' + this.y + ')'; }; To understand how this works, you first have to know what happens when you call a function like a constructor, e.g., new Point(1, 2):

• The JavaScript interpreter creates an object that delegates to the function’s prototype property, e.g., Object.create(Point.prototype). Note that when you write a function, its prototype property automatically gets initialized to a fresh Didactic license strikes again! It’s not really a fresh object, but rather a new object with a single property, constructor, whose value is the function itself. object, i.e., the result of evaluating new Object().
• The interpreter then calls the function with this bound to the new object.
• The value of the new expression will be that new object, unless the function returns an object. (In which case, that object will be the value of the new expression.)

The relationships among the Point “class”, the Point prototype, and Point instances are illustrated on the right. Note that all Points delegate to Point.prototype, which makes it the ideal place to store whatever properties they share, e.g., methods like toString. You can see how this is done in the desugaring above.

Inheritance, super-sends, etc.

Here’s what it looks like when you declare a subclass: class Point3D extends Point { constructor(x, y, z) { super(x, y); this.z = z; } // Override toString() { return '(' + this.x + ',' + this.y + ',' + this.z + ')'; } } And here’s (roughly) its desugaring: function Point3D(x, y, z) { // Call Point's constructor with `this` bound to the new Point3D. Point.call(this, x, y); // Finish initializing the new instance. this.z = z; } // Make Point3D's prototype delegate to Point's prototype, that // way it will inherits all of the methods of the superclass. Point3D.prototype = Object.create(Point.prototype); Point3D.prototype.toString = function() { return '(' + this.x + ',' + this.y + ',' + this.z + ')'; }; The relationships among the Point and Point3D “classes”, their prototypes, and their instances are illustrated below.

• var vs. const
• control structures: if, while, for, try/catch, switch, …

Functional Programming

• [1,2,3].map(x => x + 1) evaluates to [2,3,4].
• [1,2,3].reduce((x, y) => x + y, 0) evaluates to 6.
• [1,2,3].filter(x => x > 1) evaluates to [2,3].

Meta Stuff

• You can dynamically compile and evaluate a program using the eval function. Calling eval is generally frowned upon (it’s a huge security hole!) but it can be very useful when you’re prototyping a language via source-to-source translation.
• To test if obj has a property p that’s not inherited from its prototype: obj.hasOwnProperty('p').
• To get an array containing all of obj’s “own property” names: Object.keys(obj).
• To declare a method that can be accessed like a property: Object.defineProperty(obj, 'p', { get: function() { … }, set: function(value) { … } });
• Same thing, but inside a class declaration: class C { … get p() { … } set p(value) { … } … }

Numbers

• All numbers in JavaScript are double-precision floating point numbers.
• To test if n is a number: typeof n === 'number'.

  Note that I’m using the strict equality operator (===), not the completely f***ed-up equality operator (==). No one should ever use the latter, because it doesn’t make any sense whatsoever. (See this page to see just how crazy == is.)

• Note that the test above will evaluate to true even for values like Number.POSITIVE_INFINITY and Number.NaN.
  • To test if a number n is finite: isFinite(n).
  • To test if a “number” n is not a number: isNaN(n).
• To convert a string to a number, you can use JavaScript’s parseInt and parseFloat functions.
  • Each of these functions takes a string as an argument, and returns corresponding number, or NaN if the argument can’t be parsed.
  • They don’t mind if there are trailing characters, e.g., parseInt('23abc') === 23.

Arrays

• To test if arr is an Array: Array.isArray(arr).
• Number of elements in arr: arr.length.
• You can truncate or grow the array by assigning into its length property.
• Access the ith element: arr[i].
  • undefined if i is out of bounds.
  • Indices are 0-based.
• Set the ith element: arr[i] = value.
  • If i ≥ arr.length, arr.length is updated automatically.
• Add a newElement to the end: arr.push(newElement).
• Remove the last element: arr.pop()
• Add newElement to the beginning: arr.unshift(newElement)
• Remove the first element: arr.shift().
• Insert newElement at idx: arr.splice(idx, 0, newElement).
• Iterate over the array: arr.forEach(x => …).

Strings

• To test if an object is a string: typeof obj === 'string'.
• JavaScript strings are immutable.
• You can write string literals with single or double quotes, e.g., 'hello world' and "foo" are both valid string literals.
• The length property of a string tells you how many characters are in it.
• String indices are 0-based.
• To access a character, you can use square brackets (s[5]) or the charAt method (s.charAt(5)).
  • The value of these expressions isn’t a character — there’s no such thing in JavaScript! — but rather a String of length 1.
• Other useful methods:
  • s.indexOf(otherString) returns the index of the first occurrence of otherString in s, or -1 if it’s not found.
  • s.substr(startIdx, length) returns a substring of s.
  • …

Thanks to Marko Röder for detailed feedback on this document. This JavaScript tutorial was originally developed by Alex Warth and Todd Millstein for the Prototyping Programming Languages course at UCLA; used here by permission.