Material based on the lecture by Carlos Scheidegger
Computer programming brings interactivity and generalizability (re-use) to the table. We can tell the computer how to do something for certain classes of legal input, and the computer will do that for all possible cases of legal input.
Versioning and Transpiling
Instead of relying on a particular version, you should check for the availability of features across browsers.
Older browsers, even those that are currently still in use (I’m NOT talking about Internet Explorer 6 here), will unlikely support current and future features. Fortunately, there are various remedies for this, so that you can start using these features now. Note that, for all classwork, we will be using the latest Google Chrome, which will avoid the need to use such remedies.
Here is an example of how a ES6 code feature is transpiled into ES5 code:See output in new page.
We can write to the console (helpful for debugging by calling the log method of the console object). Hint: open up your browser’s developer tools to see the output generated by the examples here. Type in a
clear() and re-execute this as we go so that it’s easier to follow along)
It has variables which hold values:See output in new page.
To create a local variable, use the keyword
const, with an outdated option:
var. Local here refers to the current execution context. When used within a function or block these variables are private to that function/block, however, when they are declared outside a function, as in the above example, they are still global.
So what is the difference between these?
varcreates variables of function scope. That means that the only way to isolate a variable is to wrap it in a function. This is different from most programming languages and rarely has advantages.
letcreates a variable of block scope, which is similar to most other programming languages. The means that, for example, a variable defined with
ifclause cannot be accessed outside of that
constcreates a variable of block scope (again, if defined within a block, otherwise global) where the variable can’t be reassigned. That doesn’t mean that the variable is immutable, though. It just means that it can’t be reassigned.
As a general rule: minimize your use of global variables and never define global variables in a function.
You can execute operations on these variables. Below are a couple of important examples, refer to the MDN documentation for the full list:See output in new page.
You can do much more with arrays than shown here, again, check out the MDN documentation. Arrays are very important for data visualization, so take the time to go through this!
Loops are C-like: for, do-while, and while loops are available. To loop over arrays, use either a regular for loop, the forEach function of arrays, or the new for-of statement.See output in new page.
There is an alternative way of defining functions:See output in new page.
Pay attention to what’s happening here: this is assigning a value to a variable in the same way that
In particular, we will use a lot of anonymous functions, or “lambda abstractions” when working with D3. We’ve already used one example for sorting an array above. Here is another example:See output in new page.
Since the use of these anonymous functions is ubiquitous, ES6 introduces a shorthand for them: arrow functions. Arrow functions are always anonymous function expressions. There is no arrow function declaration. Here is the example from above, and also some others:See output in new page.
Arrow functions are recommended for short expressions, you probably should use proper function definitions for multi-line functions with explicit return values. Also, note that
this behaves differently for arrow functions.
ES6 introduces a
Let’s first look at the pre-ES6 way. If we create an object with slots that hold functions, this starts to look like methods from Java and Python. If we create a function that returns these objects, this starts to look like class constructors:See output in new page.
Inheritance (or better Prototype Delegation)
Here is an example:See output in new page.
The special variable
this. When a function is called with a notation that resembles methods in typical object-oriented languages, say
this is bound to the object holding the method (in this case obj). That way you can make changes to the local object:
So far, so good: we’ve used
this to change the value bound to the x field in the object. That’s pretty convenient.
this with a given object is simple to explain: it assumes the context of the calling object.
Here’s what can go wrong:See output in new page.
What happens in this latter example is that when
t() is called,
this is bound to the calling object, which is the global
window object in the latter case.
Default ValuesSee output in new page.
Lazy ExpressionsSee output in new page.
uniqueID() is only called when foo() is called (without arguments), not before.
Gather and Spread Operators
... is used in front of an array (actually, any iterable), it acts to “spread” it out into its individual values.
The inverse works with gather. The …z in this snippet is saying: gather the rest of the arguments (if any) into an array called z.See output in new page.
Array DestructuringSee output in new page.
In ES5See output in new page.
In ES6See output in new page.