javascript

JavaScript

I recently discovered "Eloquent JavaScript" by M. Haverbeke which seems to be a common introduction to both programming and JavaScript, e.g. for bootcamp students. So far, I followed a conservative philosophy of "the least amount of JS you can get away with" and thus my JS skills are limited:

• Static page tools: Lifetime Clock, Kitchen Cleaning Plan (somewhat modular, with tests run in browser)
• Minor accessibility features in vanilla JS used in ggpy: https://github.com/ooz/templates/blob/master/html/oz-accessibility.js
• Unoptimized, non-modular Electron app using React.js: https://github.com/ooz/flow-charter
• Unoptimized, non-modular game jam games using Phaser: Ogre Forge, home is, Handshake

Study goals:

• Level-up JS skills, understand prototypic features
• Learn and write modern JS instead of a mix of various language features/standards
• Understand JS module system, dependency management, bundling and webpack
• Get started with Node.js, learn basic API

My Learnings

(As a person with extensive programming and CS background, ymmv.)

1. Values, Types, and Operators

Calculations with whole numbers [...] smaller than the aforementioned 9 quadrillion are guaranteed to always be precise.

There is only one value in JavaScript that is not equal to itself, and that is NaN (“not a number”). NaN is supposed to denote the result of a nonsensical computation, and as such, it isn’t equal to the result of any other nonsensical computations.

2. Program Structure

• For beginners, the author recommends to always terminate statements with semicolons, because omission rules are non-trivial.
• let defines a binding (aka variable)
• There's no reason to use var over let in modern JS
• Write JS in camelCase

3. Functions

• Three ways to define functions:

  const hello1 = function(name) { return "Hello " + name; };
  const hello2 = (name) => { return "Hello " + name; };
  function hello3(name) { return "Hello " + name; }

  • hello1 and hello2 use binding notation (binding a function value to the respective names)
  • hello2 uses arrow syntax, which is the same as hello1 for the most part (difference revealed in chapter 6: arrow functions do not bind this, but see this of the surrounding scope)
  • hello3-style function declarations are read before the JS program is executed, so the function can be used before it is defined. hello1 and hello2 need to be defined before their usage
  • Also mind the semicolon terminating hello1 and hello2 definitions

• JS ignores excessive arguments passed to functions

• If too few arguments are passed, the affected parameters become undefined

• Avoid recursion, JS has no tail nor optimized recursion

4. Data Structures: Objects and Arrays

• Two ways to access a property:

  name.prop;
  name[prop]; // Expression "prop" is evaluated and the property with the resulting index/name accessed

  • The second way may be used to work around invalid property names e.g. starting with numbers

• array.length and array["length"] are the same

• Use binary in operator to check whether an object has a property, use unary delete operator to delete a property from an object

• Use Object.keys(myObj) to get all property names of object myObj

• Use Object.assign(left, right) to copy all properties from right to left

• typeof [] is "object"

• == checks for identity (reference to same object), not (deep) equality of contents

• {some, other} is a shorthand for {some: some, other: other}

(nice phi coefficient example to measure correlation between two variables)

• array.includes(elem) checks whether elem is in array
• Further array methods: shift (pop first element), unshift (insert at beginning of array), indexOf (find first), lastIndexOf (find last), slice, concat
• For strings, indexOf can also search for substrings with length greater than 1
• String padding with padStart
• Further string methods: trim, split, join, repeat
• Rest parameters and spread operator ...
• Re-using a name for a binding defined with let or const will trigger a warning, but not for var or function!
• Destructuring arrays and objects
• JSON.stringify and JSON.parse

5. Higher-Order Functions

• forEach, filter, map and reduce are built-in. reduce is clever with the start element
• some tests whether at least one element satisfies the given predicate
• every tests whether all elements in an array satisfy the given predicate
• findIndex returns the index of the first element satisfying the given predicate
• JS strings use UTF-16 encoding
• Some problems when using string length and index access. charCodeAt and codePointAt are tricky, too

6. The Secret Life of Objects

this:

• this points to the object a method was called on
• This works even for functions assigned to objects later. Using the call method on a function, the this context can be set explicitly
• Arrow functions do not bind this, but see the this of the surrounding scope

Prototypes:

• Unknown properties are requested from an object's prototype and from the prototype's prototype etc.

• The root prototype is Object.prototype

• Object.getPrototypeOf gets the prototype of the passed object. The prototype of the root prototype is null

• Functions derive from Function.prototype and arrays from Array.prototype

• Object.create is used to create an object of a given prototype

• Shorthand for defining a method in an object (notice speak):

  let protoRabbit = {
    speak(line) {
      console.log(`The ${this.type} rabbit says '${line}'`);
    }
  };

• new is used to invoke a constructor function

• By convention, private property names start with _

• A constructor function can be seen as a type/class from other languages. Its prototype defines the set of methods

• Capitalize constructor function names (again, matching other languages' class feature)

• Same can be achieved with the class notation and defining the special constructor method inside a class

• Class name is optional for class expressions. Q: what's the use-case for class expressions?

• Overriding of properties can be done on prototype- and object-level (instance-level)

Maps:

• Using normal objects as maps is dangerous, e.g. because they contain additional "keys" due to inheriting properties from Object.prototype

• One solution is to create objects with null prototype and use them as maps:

  let map = Object.create(null);

• Object property names must be strings. So when using an object as a map, only string keys are allowed

• JS has a Map class with set, get and has operations

• Object.keys returns only an object's own properties, not the ones from its prototype

• The in operator checks for the property both in the object and its prototype

• The hasOwnProperty method checks only for the object's properties, not those from the prototype

Polymorphism and Symbols:

• JS supports polymorphism. Objects fulfill an interface, if they have properties with matching names (or matching symbols)
• Each Symbol is unique, even when created with the same name

Iterators:

• Objects fulfill the iterator interface when they have a method labeled with the Symbol.iterator symbol
• String iterator example, custom matrix iterator example

Getters, setters, static:

• get, set keywords define opaque getter/setter functions that look like regular field properties
• static functions are bound to the constructor (class name), not to the prototype

Inheritance:

• extend keyword extends a class from another prototype than the default Object.prototype
• Use super to call superclass constructor and super.propertyName to use superclass property propertyName
• Use instanceof operator to check whether an object has some class (constructor) somewhere in its inheritance hierarchy

7. Project: A Robot

• Object.freeze makes an object immutable, all write operations are ignored

8. Bugs and Errors

• Enable strict mode by writing the following line at the beginning of a file or function body:

  "use strict";

• Strict mode reports:

  • Usage of undefined bindings (normally, they'd be created implicitly in global scope)
  • this will be undefined in function scope when the function is not used as a method (normally, this would then refer to global scope)
  • Defining function parameters with the same name
  • Removes with statement and other problematic language features

• Calling constructors defined with class keyword without new will always result in an error

• Use TypeScript

Debugging:

• Inserting debugger statement will pause program execution when browser developer tools are open

Exceptions:

• Raising an exception:

  throw new Error("message");

• Handling an exception:

  try {
      throwsException();
  } catch (error) {
  } finally { // Is always run
  }

• Error objects have message and stack properties

• JS doesn't differentiate exception types (it's all just Error)

• However, defining own error types by extending Error and checking with instanceof is recommended

9. Regular Expressions (Summary)

• Two ways to define RegEx patterns:

  let regExConstructor = new RegExp("abc");
  let regExLiteral = /abc/;
  
  let caseInsensitiveFlag = /abc/i;
  let constructorFlags = new RegExp("abc", "giuy");

• Escaping rules vary by which definition style is used, e.g. in RegEx literals / needs to be escaped, backslashes don't must not be escaped. In RegEx strings passed to RegExp constructor, backslashes need to be escaped.

• test method checks whether a passed string matches the RegEx

• exec method returns a match with index property or null if no match is found. A match object looks like the matched string

• String objects have a match method accepting a RegEx parameter that behaves like RegEx match

• Common built-in character groups

• Group matching rules

• ^ matches start of string, $ matches end of string, \b matches word boundary

• . matches any non-newline character, if any character incl. newline needs to be matched, [^] can be used

• Repetition operators are greedy (match as much as possible) by default, non-greedy (match as little as possible) ones are followed by a ?

• Sanitize input before constructing RegExp objects from user input

• Looping over matches is possible

• Use u (unicode) flag to properly match non-ASCII characters

Date:

• Month numbers start at 0, day numbers at 1

String replace:

• Accepts RegEx as first argument and even matched groups in the second argument. By default, just replaces the first occurence
• To replace all occurences, end RegEx with g flag (similar to i flag above and other RegEx implementations)
• The second argument may also be a function applied for every replacement

String search:

• Like indexOf, but searching for first position matching pattern
• Searching for lastIndex is tricky, y is "sticky" flag (= RegEx must be found starting at lastIndex, by default: from beginning of string)

Example: parse INI file

10. Modules

• Use Function as a safe alternative to eval if data needs to be executed as code
• require and exports come from CommonJS and is used by Node.js
• Modern JS has import and export built-in
• export default specifies the module's main export which may not even have a name

ini and dijkstrajs packages from NPM are mentioned.

11. Asynchronous Programming

• setTimeout(callback, delayInMs)

Promises:

• Promise: object which is executed may produce a value at some time in the future
• Promise.resolve wraps a value in a Promise
• then method gets the value produced by the Promise, applies the passed callback function and produces another Promise. This way, then and callbacks can be chained (without confusing callback nesting)
• Promise constructor accepts a function which is immediately called with a resolve function as an argument
• Promise.reject creates a Promise failure
• catch gets the reason why the Promise failed and returns a Promise, similar to then for the non-erroneous case
• The catch handler may also be registered as the second optional argument to then, for convenience
• Promise.all

paused at https://eloquentjavascript.net/11_async.html#h_o8Vlf60I8f

12. Project: A Programming Language

13. JavaScript and the Browser

• Basics on TCP, client-server, URL structure, HTTP, HTML, how to include JS in HTML

14. The Document Object Model

• DOM, Trees
• document is the DOM root, document.documentElement the enclosing <html> tag
• Each DOM node has a nodeType property
• childNodes property is of NodeList type stemming from DOM standardization
• childNodes, firstChild, lastChild, previousSibling, nextSibling, parentNode visualized
• children property contains only element child nodes
• nodeValue of a text node contains its text

Finding elements:

• All element nodes have getElementsByTagName, e.g. document.body
• document.getElementById
• getElementsByClassName

Changing the document:

• remove, appendChild, insertBefore
• Inserting/appending an existing node will first remove it and then insert it at the new position
• replaceChild
• document.createTextNode
• Array.from
• document.createElement
• Use getAttribute and setAttribute in combination with custom attributes (e.g. data-something), standard attributes may directly be accessed as properties
• The class attribute is accessed with className property or getAttribute("class")
• offsetWidth, offsetHeight, clientWidth, clientHeight and getBoundingClientRect, pageXOffset, pageYOffset for position/size of HTML elements

Styling/CSS:

• Accessing an element's style property
• Rule precedence and specificity
• Query selectors and document.querySelectorAll (returning a NodeList) and document.querySelector (returning just the first match)
• static, relative and absolute position explained
• Animation using requestAnimationFrame

15. Handling Events

• addEventListener("click", handler) or use the onclick attribute
• removeEventListener(handler)
• Event handlers get passed an event object which differs by event type

Propagation

• By default, events on children will also trigger events on the parent nodes
• The more specific handler is triggered first and events propagate "outward"
• Call stopPropagation() on the event object to stop propagation
• Use target property of a event object refers to the node where the event originated
• focus and blur events do not propagate, load event don't propagate either

Default actions, e.g. right click is context menu, down arrow is scrolling down

• JS event handlers are triggered before the default actions
• Call preventDefault() on the event object

Key events

• keydown, keyup events. keydown also fires again every time the key repeats
• shiftKey, ctrlKey, altKey and metaKey properties
• Use tabindex attribute to enable focus for a DOM node

Event types

• click, mousedown, mouseup, dblclick, mousemove
• keydown, keyup
• touchstart, touchmove, touchend, touches property
• scroll
• focus, blur
• load event on window and document.body objects
• beforeunload

Web workers

• Use to offload long-running computations to separate threads
• Communication happens via messages
• Worker class and postMessage method
• Messages are JSON copies

Timers

• clearTimeout(timer) to delete a timer created with setTimeout
• cancelAnimationFrame similarly canceles the object returned by requestAnimationFrame
• setInterval and clearInterval
• Use setTimeout to "debounce" rapidly firing events like mousemove or scroll

17. Drawing on Canvas

18. HTTP and Forms

• encodeURIComponent and decodeURIComponent
• Use fetch to make HTTP requests
• Various input types with examples: text, password, checkbox, radio, and file. Textarea and select+option tags
• Form fields fire a change event when their value changes. For text fields, this is after the field loses focus. input event is fired for any character change
• Use methods focus to focus keyboard input on an element, blur to remove focus
• document.activeElement points to the currently focused element
• Use autofocus and tabindex attributes. A tabindex=-1 skips over a normally focusable element
• Form submit event
• Use FileReader to read content of file(s)
• Use localStorage as client-side key-value store
• {[name]: ""} creates an object with the dynamic property named name
• sessionStorage is like localStorage except it is cleared end of session (browser is closed)

20. Node.js

Read the entire docs at https://nodejs.org/en/docs/

• process.exit(0), process.argv
• "All the standard JavaScript global bindings, such as Array, Math, and JSON, are also present in Node’s environment. Browser-related functionality, such as document or prompt, is not."
• readFile, writeFile

HTTP module

• Basic http server, basic http client, but use wrapper packages from npm instead

Streams

paused at https://eloquentjavascript.net/20_node.html#h_dJhdomfGgD

Further Reads

• The TypeScript Handbook
• WTF JS: List of tricky JavaScript examples
• Installing nvm and node.js
• Web App Manifest
• JavaScript Standard Style