VERSIONS
ECMAScript 2015 == ES2015 == ES6.
ES5 is 2009
ServiceNow uses ECMA 262 == ES5.1  (from June 2011)

Versions are named ES1-ES6 and then ECMA2016-
    Pseudo ES names:  ES7 ~ ECMA2016; ES8 ~ ECMA2017.  I guess x in ESx ~ year+1

ES6 adds:
    ES6 Class
    ES6 Modules = import, export
    => Arrow Functions
    const, let
    Array iterator functions
    Destructuring [x,y]= or {x,y}=
    Ternary a?b:c
    ... var args REST Operator.  Gets an actual Array.
ECMA2018/ES9 adds:
    Spread/rest Operator ...   === elements-of

??? When were private # class members added???  Still doesn't work in IE.

??? Similar availability, ?. is conditional/optional chaining operator.
  x?.y?.z gives undefined if x anything other than an object with an 'x' member
          OR x.y is anything other than an object with a z member.
  Also works for Array element references where the Array may not exist.  The syntaxt is just
    a little non-intuitive:  x.optArray?.[3]
  x must be defined
Destructuring is both [a,b] = [blah, blah] and const {v1, v2} = anObj;
?? is simlar "Nullish coalescing operator.
    If x is null or undefined then specified string; otherwise x.
??= "nullish coaslescing assignment" or "logical nullish assignment"

Spread/rest operator examples
    GOTCHA:  Sometimes must have () surrounding the {}s!
    In param lists this is called "Rest parameters".
    const concatAr = [...a1, ...a2];   # effectively same as:  newArr = arr1.concat(arr2);
    const [a, b, ...remainders] = [some,ar,ray];
    const concatMap = {...m1, ...m2};

Functions can be used like static classes.
Just define a function in style FName = Function() {...};
and after that add attributes to it like: FName.x =...;
Can use the fName.x attributes inside the function body.

To skip function param placeholder params, don't use dummy variable name 'undefined' because
that would override system's undefined value.
Instead use a dummy variable name, and add eslint directive to cover it, like
    "no-unused-vars": ["error", {"args": "all", "argsIgnorePattern": "^_?dummy" }],

Versions:  https://en.wikipedia.org/wiki/ECMAScript#Versions

Comparing to zero.
x === 0 and x === 0.0 both work and are equivalent.
Just make sure that your values are both numbers!

Consider Lodash library for basic JS utilities.
BUT ES6 may eliminate need.  See
https://www.sitepoint.com/lodash-features-replace-es6/
_toParis(dict) looks good for displaying
OR https://www.npmjs.com/package/prettyprint

Single and double scripts are interchangeable.
But JSON has requirements for double-quotes.

JSON
Keys must be double-quoted strings.  Nothing else allowed for a key!
   NOT WITH ES6!!  May be Objects!
Newlines and Carriage returns are encoded as \n and \r, even for Groovy pretty-printed JSON.
No comments of any type allowed from JavaScript, even Node.js.
  (Node.js's ESLint enhances to support comments).
Values therefore never span lines.
var reconstitutedObj = JSON.parse(JSON.stringify(oldObject));
Inline reconstitution of an encoded JSON string:
    server side Java:
                import org.apache.commons.lang.StringEscapeUtils;
                StringEscapeUtils.escapeJavaScript(gson.toJson(o));
    server side Groovy:
                import groovy.json.JsonOutput
                import groovy.json.StringEscapeUtils
                println StringEscapeUtils.escapeJavaScript(JsonOutput.toJson(o))
    web side:   $.parseJSON("LITERAL_JSON_STRING");  // requires jQuery

Positioning by Javascript generally makes CSS settings, so see the css.txt file.

html.txt has much relevant information too.

Setting styles with vanilla JS:  document.getElementById(id).style.sName = sVal;

IE
    IE GOTCHA!!!!   FF ignores trailing commas at the end of lists.
    IE inserts a final undefined value after the comma.  In many cases, that
    undefined causes the interpreter to throw with a very non-intuitive message.
    LESSON:  Make sure not to leave any dangling commas at end of lists.

    IE7 ALWAYS adds a tbody to tables, even to <table/> and it will even
     wrap th cells except that the tbody will not enclose a thead that you
     have added.  I.e., there is no distinction between th and td, but it
     will honor specified thead's.

    FREAKING CRAZY!  IE7 automatically assigns Elements to global variables
    (with var names of the ID names) as soon as Elements with ids are added to
    the page, or as soon as an id is assigned (or re-assigned) to an Element
    already on the page UNLESS SUCH A GLOBAL VARIABLE HAS ALREADY BEEN DECLARED
    implicitly or explicitly.  If you attempt to reassign, you get this Error:
    "Object doesn't support this property or method."
    Makes no difference if the item is instantiated with HTML or with 
    PrototypeJS Element or W3C HTMLElement; nor whether added to page with
    W3C body.appendChild() or PrototypeJS insert().

    To work around that Craziness, defeat this bad behavior by coding, at a
    code location before any element may be instantiated.  I.e. in the page
    <head> before any scriplets.  Either
    I.  Explicit declarations anywhere in the first scriplet:
        var tagId1, tagId2,...;
    OR
    II. Implicit declarations by assignment at top of first scriplet:
        tagId1 = tagId2... = undefined;

http://www.javascripttoolbox.com
(incl. pop-up calendars and Data formatters and validators).  NO MILLIS!!!!

sprintf: http://www.webtoolkit.info/javascript-sprintf.html
(webtoolkit.sprintf.js)

typeof(n) === "number"  evaluates true for NaN,
  so usually whenever checking 'typeof(x) ?== "number"〕, should also check:
    isNaN(n).
NaN===Nan  evaluates to false, so must use isNaN(x)
Type conversion:  
    In some cases you have to counter-intuitively use parseX(...).  E.g.
    myInt = parseInt(4.533);
To test parseInt output, use isNaN(x).
To convert anything at all to string use String(thing).  Safe to convert from
strings and null too.  N.b. "String(x)", NOT "new String(x);".
int->char:  String.fromCharCode(65);  // is a String
Test for int:  Number.isInteger()  AND   parseInt(x) === x
Convert into number:  Number(x)
To round to an integer:  Math.round(2.1)  or Math.round(Number("2.1"))
Rounding (not truncation!) to non-integer number:  Number(2.12.toFixed(1))
decimal precision:
printf-like numerical formatting:  (12.345).toFixed(2) or v.toFixed(2)
  and others as described by answer "Number Formatting in JavaScript" at
GOTCHA!!  toFixed often does convert to text.  Why!?  So: Number(x.toFixed(3));
Docs say that toFixed converts to a string, but quirk is that literal numeric
  constants (with no parens) -> numbers;  1.23.toFixed(3) -> number  SOMETIMES!
https://stackoverflow.com/questions/610406/javascript-equivalent-to-printf-string-format#4673436
Convert to a boolean by an expression:  Boolean(10 > 9)
  Similar to: var b = 10 > 0
Int (number) to hex string: n.toString(16)
Funny thing about strings is, you can use str[i] instead of str.charAt(i), but
 "str[i] = 'x';" has no effect (must use splice or deconstruct to modify chars).Safer and recommended to not use str[i].  Always use str.charAt(i).

Impossible to check if a variable has been declared or assigned to but has
been assigned 'undefined'.
Checking for non-undefined assignedness of variable 'v' (not for v.x if v not obj):
    (typeof v !== "undefined')

Testing for types:
    "typeof var" returns just "object" for all Objects AND NULL!
      (values "undefined", "object" (for null or any Object instance), 
      "boolean", "number", "string", "function", "xml")
      THIS IS THE ONE CASE WHERE YOU CAN REFERENCE A VARIABLE BEFORE IT IS
      DECLARED (implicitly or explicitly), but you can't do "typeof nonobj.attr".
    CRAZINESS:  typeof null === "object", but if try to do nullVar.x then
     will throw with message: Cannot convert null to an object
    "var instanceof ClassName" works great.
        Be aware of very low precedence, so e.g.: if (!(var instanceof CName))
    But there are some more convenience functions for OOTB classes, like
        Array.isArray()
    Test for real number integer:  Number.isInteger
    It is safe to run "var instanceof ClassName" even if var isn't an Object
     or is null or even undefined.  (As always it must be declared at least
     implicitly before being referenced in any way).

     Test for Array:  x instanceof Array
     (Only "{} instanceof" produces syntax error and only in browser JS debuggerr).

     Test for plain dictionary:
       typeof obj === "object" && obj !== null && obj.constructor === Object
       OR with jQuery:  $.isPlainObject(obj)
     I think best to call these "plain objects".
     Great article about this:
       https://masteringjs.io/tutorials/fundamentals/pojo
     I prefer:  typeof(o) === "object" && o !== null &&
       Object.getPrototypeOf(o) === Object.getPrototypeOf({});

<script type="text/javascript">...

WRITING TO PAGE:
document.write("string");

Testing for non-values:
    Constants:  null, undefined.  Can directly test like:
    x == null || x == undefined.
    "x === null || x === undefined" probably better.
    Remember === and !==.
However, as noted elsewhere, if x has not been even implicitly declared,
    (x === undefined)
will still throw!
HOWEVER, if "x" is "set" to any non-null+non-undefined value, then
x.a, x["a"], x[3] will all just be "undefined" and will not throw.
This works even if x is a scalar number or boolean.

I think it's generally better to find HTML elements by ID than by name.  I.e. prefer
    document.getElementById('theid');
The Navigator object arrays like elements (form elements), images, etc., may be indexed 
by either integer or "name".

Arrays
Arrays are a very specific type of Map.
IMPORTANT!  Do not use arrays as Maps.  Use only the provided [] operator and
 the Array-specific methods.
Equivalent:
    a = [];
    a = new Array();
Equivalent:
    a = ["one", "two"];
    a = new Array("one", "two");
Both are Objects.  (a instanceof Array) returns true for both.
With both, can use array element references and methods like .slice().
a.push("new element");
Iteration:  for (var i = 0; i < a.length; i++) { ... a[i]... }
Or, to also empty:  while (a.length > 0) console.log("next el", a.shift());
strArray.join("delims")

Associative Objects = Arrays / Hashes / Maps.
I'm calling them maps below because I didn't know better at the time.
Object instances (instantiated Object's) are maps.  The *.prototype maps are
 themselves not parts of Object instances, but instead must be referenced with
 the ClassName itself (i.t. it is very non-instance).
Therefore all Object instances, incl. Array instances, are Maps.
You can not make map element assignments until the var is assigned to a real
 Map object.
Key values are automatically converted into strings (just like JSON maps).
    indexes in map[x] automatically get converted into strings too,
    you can both set and read entries using numbers.
    Even the conditional (3 in map) works with numbers.
I will call "map element assignment", an assignment of either (equivalent) type:
     ar["x"] = y; ar[w] = z;  // w is not a keyword like in ar.w, but a var
                              // holding a String key value.
     ar.x = y;  // "x" here must be a valid JavaScript "name", and it is NOT
                // DE-REFERENCED HERE!
                // Therefore, must use the ar["x"] construct for numerical keys.
      CAN NOT DO  ar."x" = y;
GOTCHA BUG!!  Array instances (those instantiated with "new Array(...);") have
 a dual life, with separate values for array vs. map contexts.  DON'T DO IT!!!
THEREFORE:
    Never make map element assignments to Arrays (even though the interpreter
     will let you).
    Never make array element assignments to {} maps (you will actually make
     a map element assignment!).
    If you are going to make map assignments, instantiate the map with {...};
     otherwise, do not.
Initializer:  Cannot do { key, val... } like in Perl.  Do { key : val,...}
    Must use : to separate keys and vals.
    Keys are interpreted magically.  They look like var names, but are not.
      They are always string constants that are never dereferenced.
      (Integers will still be interpreted as strings).
    Another bit of magic is that quotes around the keys are implicit.
    Therefore, it's useless and misleading to add them unless needed for
      special characters.


Forms and form fields (and some other named items within forms) may be referred to by HTML "name"s.
    document.myform.myimg.src = 'path.jpg';

To enable or disable a button, there is no "enable" property, but there is a (poorly documented)
disabled property.

GOTCHA:  Make sure not to overload the same name to both a field and a method,
even for automatically implied fields.  If you "name" an element "submit", you
will get cryptic errors when you try to use form.submit.
For PrototypeJS to recognize (at least some) tags, you must have open and close
tags.  <span id="x"></span> works, but <span id="x"/> does not.
REALLY MUST HAVE SEPARATE CLOSE TAGS FOR SPAN!!

Template literals:  Don't work in non-edge IE.  Backticks do multi-line +
 ${...} interpolation with expression output toStringed for a SINGLE EXPRESSION
 (no compound!).
    <BUTTON onclick='    ??? Why is example here not using backticks???  Mistake?
        line 1 with ${JS Expr};  <-- Just like Groovy!
        line 2...
Can leverage for context debugging by doing `${console.log(x)}`,
understanding that this will resolve to the string "undefined".
It does no trimming.
GOTCHA:  There is no $x shortcut.  References must always use curlies like ${x}.
Does something like String(x) or x.toString() so that `${null}${undefined}`
expands to "nullundefined".

But can't do simple Bourne-style or Python multi-line Strings.
Unless mile-long lines you will have to use concatenation operator.

In-place Array concatenation
Array.prototype.push.apply(a, b)
Non-in-place:  newArr = arr1.concat(arr2);  or use spread operator

slice vs. splice
slice returns a copy; splice modifies in-place

Array truncation
To zero an array:  ar.length = 0;
Truncation much more efficient than ar.splice:  ar.length = newLen;

RegExp constructor:   new RegExp(reString, modeChars);
e.g.:  new RegExp("t", "gi");

See good script findpos.js which I obtained from
http://www.quirksmode.org/js/findpos.html

    String.match(/Re/) returns a string.
    /Reg/.test(String) returns bool.
    If Pattern contains /, then use new Regexp(String) instead.
    .test looks for regex IN string, it does not attempt to match entire
     String like Java's .match().
    Has no dotall/s option UNTIL ECMAScript 2018.
      Use [\S\s] in place of . with /s option.  . does not match line breaks.
    Does not support Java's \Q...\E.

string.includes and array.includes are conveniences available with most JRE
engines over .indexOf and substr*.
All of these operate with === comparisons.

Use String.match(re) to capture multiple matches for a RE.
There is no RegExp indexOf capability.
The closest to this is:
    String.replace(/re/g, fn(match));
You can use this generally by leveraging the fn executions and ignoring the replace return value.
See section "REPLACE" below.

RegExp.exec output.
Element 0 is the entire text that matches the RE.  If your re starts with ^ and
ends with $, this will be the entire input string.
Seems to be no way to get more than one capture with a single ().  I.e.,
(anything)* will return only one matches element.  I.e. 1:1 with specified ()s.

    Variables are global unless declared with "var" in a scope other than
    top-level/window scope.  Therefore, the "var" is very important in
        for (var a = ...)

IMPORTANT re. group captures.
Unlike Java regex, if a () present in pattern then an exec member will be
group populated (though it may have value undefined).
    EXAMPLE:  /x(?:stuff(.))?y/.exec(...)   will always capture 1 group (Undefd if ()? not matched)
Intuitive!:
(x?) with no x captures group of "".
(x)? with no x captures group of null  [previously I had this noted as ˝undefined"???]
  I verified that it's null for ServiceNow, node, and Chrome.

find / To get multiple matches (without grouping) you must re-use a RegExp
instance (with /g option) and repeat .exec's on it.
Therefore, to re-use a RegExp instance with /g option (even against a different
candidate string) you must reset:  re.lastIndex = 0;
Useless to supply the input text for the execs after the first but useful for links, like
  UPDATE:  Today on 2024-11-29 I am having to re-specify the same input string for each .exec call.
      var ex;
      const reInst = /re/g;
      while (ex = reInst.exec(str)) { ...}
Otherwise, with or without g option you will get lastmatch:
    /^(.)*$/ matches entire expression and sets [1] to the last character.

REPLACE
Just add option g to regexp in a replacement for replaceAll functionality:
x.replace(/y/g, "replacement");
String.replace() WILL ONLY DO ONE REPLACEMENT if the first param is a string.
To do multiple replacements, first param must be a RegExp with global option.
As documented at 
  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace
GOTCHA: When 1st param a /RegExp and 2nd param. is string must take special care with $ characters.
    Escape $ with $$
    $0  NOT special.  Code with $$0 to be intuitive.
    $@  ???  Can't find documented now
    $& matched string
    $n  for positive n, () group.  For /.../g $1 will expand each match of $1
      to the match for that time.
    $` what precedes match.  From entire input string not just matched portion.
    $' what follows match.  From entire input string not just matched portion.
2nd parameter as function can use several passed parameters, starting with
  (matchedSubstr, group1, group2,... + others)
TO REPLACE ${ref} references with supplied map:
    const userText = actionCfg.userText.
      replace(/[$]{([^}]+)}/g, function(m, p1) {
        if (!(p1 in extraData))
            throw new Error(logPrefix
              + "User text has orphaned extradata reference '" + m + "'");
        return extraData[p1];
    });

RegExp test (boolean match) and exec (returning match) are like String.match
in that they do not imply ^ and $.  Contrary to API, exec always returns null
or an Array not a single string.  res[0] is entire region, res[1+] are matched 
() group strings or undefined.

Seems that you can't just use
    frameName
(where "frameName" is the name given by target attr or <frame> name attr).
Framenames must be relative to the current frame/window.  You can, however,
start from top, like
    top.nextFrame.nextFrame

Using $(id) with "other" windows:
windowObject.$("idString")

Can execute JS functions defined in other HTML files, like
    top.otherFrame.jsfunction(args);

For some reason, when prototypejs is in use, "for...in" loops often have
an extra iteration.  Therefore use
   for (i = 0; i < itemRows.length; i++) 
instead of
   for (i in itemRows)

THERE IS NO PORTABLE AND SIMPLE WAY TO GET A FILE SYNCHRONOUSLY.
Have to do it asynchronously, and prototypejs is best for that.

When overriding HTML DOM callbacks like "onclick", use all lowercase method
names.  I.e., "onclick", not "onClick" or anything else.
this inside the callback method is the form Element.
For INLINE CALLBACK BODIES ONLY can omit 'this' and just use element properties
and functions directly.  E.g.:  onclick="alert(getValue());"

Send browser to new page with
    location = "http://...";
BETTER to use methods for this purpose
    location.assign(new/doc); //  location.replace(new/doc) same but replaces prev. in hist
    location.reload();  reload current

Getting and changing HTML text content:
    el.innerHTML;   BEWARE OF THE CAP LETTERS!!!!! GOTCHA!
    el.textContent  [all good browsers, plus at least IE7]  NO!
                                     Not present for Option else in IE8.
    [el.text and el.innerText are IE-specific]
    $("id").update(...);
    el.insert("plain text"); appends plain text (to BOTTOM by dflt) as content.
    el.toHTML() is useful.

ProtypeJS Element modification:
x.setStyle("background-color:red");
  I don't know if it's possible to "add" a single style.
x.addClassName("x");
Does not hurt to addClassName() for classes already present.  Silently ignored.
Setting HTML attributes:  new Element("x", {attrName: "attrVal",...});
Changing HTML attributes:  x.attrName = "attrValue";

TO READ LOCAL TEXT FILE
Use the asynchronous Ajax methods to "get" the file.
You will need to disable the security check with:
    netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
(I forget how with IE).

!! The prototypejs default Ajax handlers generally do not work, but onException
does work if you register it PHYSICALLY BEFORE the Ajax.Request is made.
I GOT PATCH TO MAKE THIS WORK!
Unfortunately, they are redesigning prototoypejs Ajax now!
Global registered handlers run AFTER and in addition to specific handlers.

prototypejs has Hash class!!!!!!   Includes an "each" iteraror.  Works GREAT!
Except seems to not work with Objects directly as key.
IMPORTANT!  Don't use these Hashes like JavaScript hashes.  Like h[x] = y.
The structures such as .key() do not get updated that way.

Poorly documented, but javascript substring() indexes work just like Java's.

PROTOTYPEJS PORTABILITY.
In order to be portable (have access to prototypejs enhancements for elements
on any browser), you must "extend" elements.  Either:
    $($(elname))
    Element.extend(origEl);
    new Element(...)  (instead of document.createElement()).

When setting element properties with "new Element(name, {property settings});",
you may only set properties defined for that element.  Adding new property
names (with or without quotes) will just silently fail.

prototoype Element "methods" ALL return "this" element, allowing you to chain
methods.  Nice.
Note that .insert() returns "this", which is the parent, so chaining inserts
will add a bunch of stuff to a single parent (not stuff to the children).
You can, of course, "nest" inserts to insert into children, and run methods
on them.
insert() inserts to BOTTOM by default.

VISIBILITY with prototypejs.  Element methods:
    hide/show
    toggle
    toggleClassName
    visible

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
The anchoring elements in static HTML must have SEPARATE OPENING AND CLOSING
TAGS!  I.e., if you will staticEl.insert(...), then staticEl needs to have
open and close tags even if there is no content,  I.e.,
    <TABLE> </TABLE> and <CENTER> </CENTER>, not <TABLE/> and <CENTER/>.
Similar for TH tags in IE:  Close them!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

FIREBUG aka. Fire Bug  (alternates to accommodate text searching on this doc).
    Konqueror has no Javascript console whatsoever.  Firebug Lite doesn't even
    work.
    Don't need to Clear the Firebug console between runs.  That's what the
    Persist settings are for, and they auto-clear by default (very different
    from FF's Error Console).
    FF Fire Bug plugin + Fire Bug Lite (may also apply to Opera or Chrome
     plugin).  You can independently control FB plugin + FB Lite.
        Tiny FB icon at bottom right IN WEB PAGE is FB Lite.
        Tiny FB icon at bottom right of browser FRAME is FB.
        Mouse over these to see version information!
    Can tell difference from FB panel by clicking main menu button (but icon).
         FB Lite has a link to the "Firebug Lite Website..." vs. FB Plugin
         reports its version in the last menu item.
    To NOT have FB Lite start up, have FB Plugin OPEN before reload page.
     (as long as default FB Lite load option "disableWhenFirebugActive" is true)
    To work around problem with FB panel disappearing when page loads, try
     setting startOpened to true (or possibly startInNewWindow).
    Setting options:
        1: Give as URL params in the script src URL, but using special syntax:
            #name,name=val,name,name=val    where val defaults to true
    FF Lite often keeps "files" open, preventing them from reloading, or from
     loading in another browser session.

    You can tell when FireBug has a page "paused" by the JavaScript execution
     tool bar being enable.
     In Script tab, the tool bar buttons are to right of main panel title bar.

    FireBug SOMETIMES does not capture or notice referencing the ubiquitous
    reference-of-undeclared-variable error.  When this happens, need to use FF
    Web Developer, or IE native error reporting for this.

    When a JavaScript error is encountered, FireBug pauses at the error.
        Jumps to the Script tab, indicating the code line, and
          bubble-texting the error message.
        Click the blue > button in the execution toolbar to continue.
        To see stack trace, use the Stack tab of right panel.
          Mouse over stack trace elements to see line numbers.
          Click on stack trace elements to go to the source code line in main
           panel.
F12 (or CTRL+F12) to display the Firebug console.
This is only way to display it in some circumstances with IE.

FF JS Quirk:  Sometimes FF stops reporting exceptions and error messages, both
to the console and to Fire Bug.  The work-around is to restart FF.

HTML <base href=  DOES NOT WORK for JS in IE 7!

"this" doesn't work inside of prototpyejs .each() iterators.

USING THIS DataFormatter:
http://blog.stevenlevithan.com/archives/date-time-format
(data.format.js).

CANNOT assign event handlers (perhaps any functions) via the Element
initializers.  I.e. this works:
    var e = new Element(...);
    e.onfocus = myfunc;
but this doesn't:
    var e = new Element(...{... onfocus: myfunc...});

I remember reading somewhere in the Prototypejs docs that properties in classes
are static/class vars.  My tests show otherwise.  The class-var issue probably
just occurs somewhere where subclassing is involved.

Contrary to the w3schools docs/examples, window.clearExample() gives no return
value.

Checkbox and Radio VALUES:
At least PrototypeJs getValue() always returns null when unchecked, and always
returns specified value when checked.  Specified value defaults to "on".
GOTCHA!!!  Setting checked value (at least with IE) has no effect until the
input element has been parented.  Does not need to be inserted into a document
at that point, but it does need to be parented.
GOTCHA!!!  IE onchange handler for checkboxes and radios does not trigger until
focus is lost.  You need to use onclick handlers.

ONCHANGE handlers
Do get invoked if keyboard select a button, EXCEPT does NOT get invoked for
radio X if X gets de-selected by selecting peer radio Y.

HANDLER RETURN VALUES
Onchange return value makes no diff.
Return val for onkeypress DEFINITELY DOES MATTER
Return value for onmousedown:  returning false means SKIP NORMAL HANDLING
I.e. return value answers the question:  "Continue (with other handlers)?"
The null value sets default handler (e.g. context menu for body).

formElement.type is coerced to lower-case.  Nice.


Looks like there is no general way to write to stdout or stderr.  Need an
extension library for that.

PrototypeJS element id's.
.identify() returns the id, generating one if necessary.


Tablekit replacement?
http://www.mooforum.net/scripts12/tablegear-t671.html

To make type-safe booleans outside of logical expressions, use !!x.

VARIABLE SEQUENCE
    Functions automatically implicit declare, and because the function
     definition is pure declaration (no "=" assignment), the function can
     be USED in any scriplet before or after the one it's defined in.
    Can not "var" a property setting.
    All value settings are sequential and the setting statement must be
     interpreted before the value can be accessed.  For classes, this means
     that static properties and properties must be "assigned" early (before
     they can be used).  Be aware that Class defs or main class def often
     overwrite ClassName.prototype, so beware of assigning to
     ClassName.prototype.X before a class's main definition.
    "var" declarations execute BEFORE the scriplet that they are in.  This
      DOES NOT EFFECT ANY ASSIGNMENT if the var statement includes an assignment.
    Throwable error to assign or reference a property before the containing
     Map is declared, and this applies to Objects.
    A particular case of the previous is, you can't assign properties to a
     ProtoypeJS class before the class is "created".  This is because, unlike
     traditional class definition, PrototypeJS class creation involves
     "assignment", so the class itself is not available until the assignment is
     interpreted.

VARIABLE SCOPE
    Variables can be used on LHS without declaration to instantiate them, but
     you can't first "use" them RHS with just "x;".  Therefore, to instantiate
     "without using", you must explicitly declare with "var x;".
    Implicit declarations occur ONLY to the global namespace.  Therefore
     ALWAYS DECLARE NON-GLOBAL VARS, so as to not pollute global namespace.
    For code not at global level, to instantiate a global var, you are forced
     to use implicit declaration by just assigning.  If you don't have a
     value, assign "undefined" to it.  (Unlike explicit declarations, this is
     location-specific!).
    Intuitively, lower level variables of same name override higher level
     variables of the same name.
    The quirky thing is the very different scope behavior between explicit
     and implicit variable instantiations.
        Implicit instantiations always generate a global-scope var,
         obliviously to the current level, and this declaration takes effect
         at this point in the code.
        Explicit "var" declarations instantiate a var scoped to that precise
         level bug the location of the statement within that scriplet is
         meaningless (they execute as if located at the very top).
    Therefore, you can cause declarations (exp. and imp.) of global vars in the
    following ways at the root level:
        var x; x = 3;
        x = 3;
        var x;
        x = undefined;
     The only difference being that the var statements have the same effect
     regardless of where they are in the scriplet.

EXECUTION SEQUENCE
Inline <script>s are executed in the order they appear in the file, regardless
of what other elements they may be inside.
body's onload handler occurs AFTER the entire page is loaded.  Nice!

function and var declarations are physically executed before the rest of the
code in the containing scriplet.
The values are not executed or evaluated.  The only consequences is that 
references to the property or function name will cause scriplet to barf.

FUNCTIONS
    By default, functions return undefined.  Unlike many languages default
      return value is not implictly last evaluation value.  You MUST 'return'.
    Forward references are fine ONLY IF FN DEFINED WITH "^function x("!  Can do
        function a() {... b();...}
        function b() {...
    Can not do
        function a() {... b();...}
        b = function() {...
    Overriding works intuitively, with last runtime-overriding function taking precedence.

#####################################################################

OO / ES6 Classes / Subclassing / Error Subclassing
See my examples in "code-templates/Cls.js" and "code-templates/nodejs/NodeClass.js",
  "code-templates/nodejs/NodeSubclass.js", "code-templates/nodejs/userOfNodeClass.js".
Same exact tactic works perfectly for subclassing Error or any Error subclass.
Even with ES6 Classes JavaScript still supports just one constructor function for a class.
    But you can manually code to interpret the parameters in different ways to accomplish
    constructor overloading.
POWERFUL:  At class root level can: static var=val; instVa=val; static { clinit code; }

############### OLD ######################
vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
OLD OO STYLE.  Don't do this any more!!
OBJECTS.  JavaScript is classless == prototype-oriented
[The constructor name can be considered the class name, and is capitalized for
that reason.  I guess the only significance is that addition of properties and
methods is free-form, not solidly defined].
A "class" is just
    ClassName.x   Static functions of attrs  (must be accessed this same way).
    ClassName.prototype[y]  Keys to Static props and Instance method refs
    inst.p  OR  this.p  (from outside and inside of instance methods)
JavaScript classes === JavaScript functions.
    Array class corresponds to the Array(...) function, and the Date
    class corresponds to the Date(...) function.
    TRUE:  13 == "13"      FALSE:  13 === "13"
"this" is ALWAYS SET to the instance of the currently executing function.
   "this" at the global level is a Window object containing all global
    properties (whether explicitly or implicitly declared).
    "this" == "execution context"
Every function/Class has a prototype property, and only the Object function's
 prototype is null!
    Both map.prototype, and for (... in map) will not show prototype, but
    ClassName.prototype is set, but the "prototype" key is hidden by
        for (... in ClassName) loops.
for(... in Class) show only immediate prototype properties.

Class Method.  Define like:
    MyClass.methName = function();
    OR
    MyClass.methName = fnRef; // fnRef defined elsewhere.
outside of the constructor.

Instance Method.  Define like:
    MyClass.prototype.methName = function();
    OR
    MyClass.prototype.methName = fnRef; // fnRef defined elsewhere.
outside of the constructor (just to prevent unnecessary re-assignments).
[It is also possible to assign instance-specific instance methods].

TODO TEST!
!! I THINK THIS RADICALLY WRONG!!
Should be just MyClass.propName = val; (outside of the constructor).
EXACTLY SAME AS CLASS METHOD.
Static/class property.  Define like:
    MyClass.prototype.propName = val;   // N.b., no "var" statement!
outside of the constructor.

Subclassing
    [write cons.]
    MyClass.prototype = new MyParent();
    MyClass.prototype.constructor = MyClass;  // CRAZY
    [prop/method prototypes]
UPDATE:  Should use "class" definitions nowadays.   See ~/code-templates/node/*Class*.js.

referencing instance vars falls back to static/prototype vars if there is
no instance one!  I.e. even "this.x" may actually resolve to a prototype value!

If you want to do any thing serious with classes, then use PrototypeJS's Class.
http://www.prototypejs.org/api/class/create
I use in my logger*.js.

PrototypeJS Class
Create class:  create([superclass, ][srcObject,...]) -> Class
Each Object is a hash of name:instMethod's which are COPIED to the new class.
This IS NOT class inheritance, it is "mixing in" methods.
Buy you can also insert new instance methods in the traditional way:
    ClassName.prototype.methName = function(...
Inst property .constructor returns the constructing class.
initialize is the constructor method name.  Even this may be defined in the
 traditional way.
The only time that you must define an (constructor-) inline instance method
 definition is when you need to invoke the method being overridden.
 (Only the overriding, not overridden, method must be inlined in this case).
 In this case, in the inline overriding function declaration, add a new magic
  first parameter name "$super".  Thereafter, you can invoke the overridden
 method with $super(...).
 N.b. "$super" does not mean the parent class or instance, but the specific
  overridden method.
As an alternative to adding static methods in the traditional way (
  ClassName.methName = function(...
 ), you can use the Prototype-specific method to show the nesting:
 Object.extend(ClassName, {
     methName: function(...
     otherMethName: function(...
 });
Class properties may be either Class.prop or
 Class.prototopye.prop, depending on whether you want obj.prop to default
 to the value, and whether you want it to inherit to subclasses.
Limitation to ClassName.classMethods:  Can't be inherited and do not serve
 as default values to obj.method.  If you need those, then write a normal
 instance method and just don't access instance.anything.

At least for ServiceNow classes:
Every instance is just a completely independent value map which starts as a clone copy of the prototype map.
There are no static/class members.  By convention can just use a non-prototype member of the class name for that.
For setting prototype elements, doesn't matter if do:
        anyProtoMethod: { this.newAttr = x; }
        newAttr: y;
    ClassName.prototype.newAttr = z;
x/y/z may be any type including a function.

Legacy Error subclassing, per http://stackoverflow.com/questions/1382107/ddg#5251506
function MyError(message) {
    this.name = 'MyError';
    this.message = message;
    this.stack = (new Error()).stack;
}
MyError.prototype = new Error;    // Elsewhere it says should be: new Error();
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
############### OLD ######################

Seems to be hidden by for(...Map) loops.
The trick/magic of "prototype"s is that when they are implicitly accessed by
 this.x references, they magically recurse until the null prototype of
 Object.prototype gets hit.
Failing references to this.x automatically check this.prototype.x, but CONTINUE
 to recurse into this.prototype.prototype.prototype, etc.

JavaScript gotcha:  Search regularly for:  for (.*; for tests without .length
(sometimes a non-.length is useful, but usually you'll be iterating an array
and want .length).

js property = Java instance field
Like Java, all objects are instances of the object "Object", inheriting from it.

Object (instance):  new ObjectName().
ObjectName is either "Object" or a constructor.
A constructor is a plain function that can be called with new.
GOTCHA!:  Must define this function with keyword 'function', either
  'function x()...'  OR  'const x  = function()...'
  NOT!  'const x = ()=>'
Might as well capitalize it and call this your "class".
The method body works with this.*, including assigning members as
properties or as methods to function pointers.
Either way, you can add properties and methods to an object outside of the
constructor.

A class is simply any function, because you can "new fName()" any function.
To make it clear by convention, capitalize your function class name.
To add instance members (attributes and functions), just assign to
 FName.prototype.attr =...; FName.prototype.instFn = function(...) {...};
    

N.b. ONLY USE "prototype" like MyClass.prototype, never like objName.prototype.

For unknown reason, can't name functions directly with dots.  Must assign a
reference instead.  I.e.
    NOT:  function X.y() {...
    BUT:  X.y = function() {...

Instance property.  Must assign to define.
    this.x = undefined;  // within constructor or any instance method
    OR
    inst.x = undefined;  // elsewhere

Functions (and probably vars in scope) can be referenced as long as they have
been runtime declared in time before the reference executes, with the nice
benefit that just like "var" statements, "function" statements act as if they
were the first statement in a scriplet (i.e. location within a scriptlet makes
no difference).


PrototypeJS Ajax
method defaults to post.  (See the "Ajax Options" page!)
If pulling from anything other than relative path with http, you must set
UniversalBrowserRead or IE equivalent right before making the Ajax.Request.
I have not determined the exact requirements, but if things fail, try moving
the UniversalBrowserRead to closer before the Ajax.Request.


Functions get magic array variable:  arguments.
VARIABLE ARGS:  Every function has access to object "arguments", which is
an object with .length and a[i] subscript operators.  (Not an Array though!).
To convert to real Array:  Array.prototype.slice.call(arguments);
    GOTCHA:  Unset (trailing) parameters will not get array members!
    Workaround is my function argsTuplify in zod-extra-schemas*.js
GOTCHA!  Not available to Arrow function => functions!
See ARROW FUNCTION section below for limited work-around.
NEW WAY!!  Use (...arr).  This gets a real array, and it works with arrow functions.


COMPARISONS WITH null:
null cf. null returns true for == and ===, false for others.  Intuitive.
null cf. true,numbers as if null were neutral and 0 value.
null cf. false,strings,0 returns false for all comparisons!
(false == 0) is true but (false === 0) is false.

$A()'s are, in fact Arrays.

Lazy (x == true) and (x == false) are extremely non-intuitive.
  These are NOT mutually exclusive.  E.g. ("x" == true) and "x" == false) F.
'null == false'  is false! even though (if (null) does not evaluate and !null is true.
if (x) and 'x ?...' not same as (x == true)  for some damned reason.
=== and !== operators:  Compares both value and type of operands.
    But:  13 === 13.00
Lazy == and != operators:  YET ALL OF THESE FAIL FOR (x == true) ???????
    (x) Falses:  "", 0
    (x) Trues:  "0", "false"
These lazy-equivalent:
    ("13" == 13)
    ("" == 0)
    (undefined == null)
Though following things all evaluate (x) to false [and !x true] [and '== true' false],
somehow those on LHS != those on RHS!
    undefined,null != "",0,false
I think net weirdness is for undefined, null.  These false for both: == true  AND  == false

isNaN(x) for the obvious reason.  WATCH THE CAPITALIZATION!


Dates.
d.toString() is always an extremely verbose local time.
    Format is consistent between Chrome and NodeJs but ServiceNow has different verbose format.
GOTCHA:  Direct display (i.e. no implicit toString) of a Date is platform-dependent!
    Chrome always displays same as d.toString()
        whether in page script, console 'd' or 'console.info(d)'.
    NodeJS always displays same as d.toISOString()
        whether in -p expression 'd' shell expression or scripted 'console.info(d)'.
API has no reliable method for a portable or code-friendly local time string.
    Only potential is d.toLocaleString() BUT NOT ON ServiceNow,
      which is succinct but not sortable and AM/PM.
Key methods:
    Now:  new Date()
    Absolute milliseconds:  date.valueOf()
    Good time but in UTC:  date.toISOString()
    Instantiate from abs. millis:  const d = new Date(); d.setTime(1234...);
    # NodeJS GOTCHA:  If you display with console.x() the date object directly you will see
      d.toISOString() NOT! date.toString!
All numbers other than day-of-month are 0-based
  (which is normal for year, hour, minute, second; so odd only for Mon, DOW).
Display capabilities suck.  Remainder about display capabilities.
None of supplied formatters will report sub-second.  Must use getMilliseconds().
The default time formats display the "GMT +-X" stuff and no millis.
Locale time format better but still ALWAYS has AM/PM (not 24 hr).
toLocaleDateString() is the only one that makes a numerical date.
  Format MM/DD/YYYY.  N.b. THIS IS NOT THE FORMAT USED IN toLocalString()!
Once load the date-format.js library, can use any of:
    date.format();  // To apply dateFormat.masks.default
    date.format("custom format mask");
    date.format("maskKey");  // to apply dateFormat.masks.maskKey
Date functions.  The get*() functions all return integer JavaScript numbers.
Even though dates (days-of-month) are 1-based, MONTHS ARE NOT.
Both the getter and the constructor month values are 0-based.

ProtypeJS
Element.select() is a great alternative to $$("selector").  It behaves the
same but narrows to descendants of this.

the ondblclick handler works great with both IE7 and FF3, at least for td cells.


To be careful, use the === and !== operators, and check APIs for return values
of undefined vs. null.
PrototypeJS usually returns undefined, but exceptions are
$("x") returns null for no match.
The array functions like $$("x") and e.select("x") return 0-length arrays.

Throw/catch/finally
Not as good as Java.
Beware of "return"ing inside a finally block.  This will drop the Exception
and proceed as if all is well.
Can throw anything at all, including an integer/number.
Finally block may be a single statement and does not require braces.
Try and catch blocks do require braces.
(This may well be true for Java also.)
BEWARE of return, continue, break inside of finally blocks.
GOTCHA Beware that if a finally block does "return", "continue", or "break",
then it swallows previous returns and throws!
Can't declare the parameter.  Even pre-ES5
  (but from warnings apparently <= IE8)
  it is automatically a scoped variable that doesn't effect 
var declarations do scope correctly ONLY within function blocks.
Generally can't have narrow catch blocks.  Must add conditional code inside
  the catch blocks.  "conditional catch" is non-stanadard and only in Mozilla.


JavaScript switch is better than Java switch.  String, undefined, and null all
work exactly as you would want them to.
Tests execute according to === operator, not lazy ==.  E.g.  these DO NOT MATCH:
    switch(3) { case "3":...
    switch("3") { case 3:...
All are distinguished, and order between null and undefined match doesn't matter.

Rather counter-intuitively, PrototypeJS's setStyle() does not replace current
styles, but ADDs.  IMO should be named "addStyles", not "setStyle".  I guess to
remove a style you must find out the default value for the setting and set that.

Detecting if is a HTMLElement:  Object.isElement(x).
N.b. DOES WORK FOR HTMLElement, not just PrototypeJS Elements.
CAN NEVER CALL LIKE e.isElement(), even if it is an Element.
However, Object.isElement(x) is extremely safe to call, working as expected for
all literal and variable types.

I have no idea why, but neither HTMLElement.removeChild() nor Element.remove()
set child.parentNode to null.  Instead they set it to some object that I can't
identify... the document or window or body???

"const" keyword is not available in IE.  It is JavaScript v. 2 only.

I have a note somewhere that aString.length was not working with IE.
I don't know how I came to that conclusion, but it is wrong.

strArray.join("") joins the strings with no delimiters.

document.URL is the real URL from the REQUEST.  This means that regardless of
server "forwarding", you will get the real user's request URL with get params.
Of course if the server sends a redirect, the final page will have the URL that
was redirected to.

Although the default post method of a HTML form is "get", the default of a
PrototypeJS request is "post".


There is no good toString() for map/Object.
Good alternative is my Hash.toString() in autotable.js.  With that can do:
alert($H(h));

alert()s do not render HTML, nor can the text be styled.
The intention is to simply display text.

Though I see it documented nowhere, it looks like, for observed key-related
events, PrototypeJS always makes event.keyCode available (not event.which!).

PrototypeJS Responders JUST SUCK!!!!!  Define your own methods and use them
in individual Request instantiations.

Closest thing to "sleep" in JS:
window.setTimeout() and window.setInterval() invoke asynchronous functions.
GOTCHA: I don't understand why, but instance functions do not work as setTimeout param #1.
 Must to:  window.setTimeout(()=>a.fn, 10)   rather than:  window.setTimeout(a.fn, 10)

domEl.tagName  Value all caps.

NOOP anchor href value:  "javascript:void(0); // Concomitant in status bar"

The global JavaScript object in a browser's JavaScript environment is the
browser's window object.

The HTMLElement class that PrototypeJS's Element Extends:
http://w3schools.com/jsref/dom_obj_all.asp

Seems that setStyle("string") SOMETIMES does not work.
Better off to always use setString({name: "val",...}), remembering to
 switch hyphenated CSS properties to camelback.

For prototypejs, $("a", "b") will always return 2 elements, but each
element may be null if there is no ID match.

Enumerable.each(itFn);   //  NOT Object-Oriented.
    itFn is a plain function that is here called an "iterator".
    The specified function will be invoked once for each element, with
    params (el, ind) if it takes >1 param, or (el) if < 2 params.
    EXAMPLE:  ["one", "two"].each(alert);
INLINE ITERATOR DEFINITION:
    Enumerable.each(function(el, ind) {... });
http://www.prototypejs.org/api/enumerable/each

Enumerable.invoke('methodName'[, params...]) -> New Enumerable    IS O.O.
Enumerable.pluck('propertyName'[, params...]) -> New Enumerable  IS O.O.
Since Prototype methods return element iself,
 can chain invokes with Protomethods.

To change browser page:
    window.location.href = newUrl;
To reload current page:
    window.location.reload();

GOTCHA for PrototpyeJS:
Do not use plain "class" for the HTML class attribute name, like in
    new Element("x", {class: "y"})
    OR
    x.class = "y";
because "class" is a special word.  Somehow this works in FF but not in IE.
Use x.addClassName("y") instead!

BEWARE!:  JavaScript invocation of form.submit() DOES NOT RUN THE
onsubmit handler!!

From end-user perspective, default keyboard handling is really good.
Unfortunately, whether ENTER invokes an onchange handler is extremely
 browser-specific, so need to capture ENTER manually if you want it to
 behave consistently.
Default keyboard input handling is really good.  ENTER key in any text
 field will submit (probably using first submit or button/submit).
 (Will not if the submit button is "disabled").
The submit button's onclick handler IS INVOKED even though no click is
 involved!  Return false from this callback to prevent submittal.
The form's onsubmit handler IS invoked after the submit button is invoked
 implcitly too.
In normal fashion, if the form's onsubmit handler returns false, processing
 of the form will stop.

Correct header for external or internal JS is
    <script type="test/javascript" language='JavaScript' src='prototype.js'></script>

JavaScript scriptlet = Value of a single callback attr. or content of a
single <script>.

Referencing undeclared variables.  (incl. Implicitly Declared)
    IE7:  'x' is undefined       [! Actually UNDECLARED !]
    FF:  x is not defined        [! Actually UNDECLARED !]
In both cases, the current scriptlet is aborted but JavaScript execution
continues after that.  Even with Firebug, can't continue in the same scriplet.
(typeof x) can be used to safely test any variable, defined or not, however
unsetvar.anything can not! and will throw in a (typeof unsetvar.anything).
N.b. though that typeof DOES NOT DISTINGUISH BETWEEN objects and nulls!!

IT IS NOT AN ERROR TO REFERENCE AN UNDEFINED BUT
(implicitly or exlicitly) DECLARED VARIABLE!
The value of such a variable will just be 

DECLARATIONS.  Verified to behave same in IE7 and FF.
    Redundant declarations have no effect.
    "var x = 3;" behaves like "var x; x = 3;", where the 2 parts are very
    different.
    "var x;" is level-location-dependent but line-within-scriplet-independent.
    It applies to the entire current and following scriplets, as if the line
    was at top of the scriplet.  Even if the scriptlet aborts before the
    location of the "var" statement-- it still applies.
    In particular "var x;" will have no effect on the value of x (as always,
    regardless of what line "var x;" is on).

.innerHTML honestly contains the actual HTML CONTENT of this element.  It does
not show attributes of this element.

Old-fashioned way to assign content is by assigning to el.innerHTML, but this
will clobber all nested elements.

Strings:  Usage of "string"s and String objects seems to be exactly the same.
Both varieties do differ (in the same way) between IE7 and FF though.
Use x.charAt(y), because x[y] only works with FF.


THROWING
Can Throw and catch anything at all.
System errors which abort the current scriplet throw Error subclasses, such as
 TypeError for typing errors, for both IE and FF.
instanceof Error does return true for these (and for your own Errors).  :-)
There must be an intervening Error class for TypeError, etc., because full
 FireBug pauses execution when these are thrown, but this does not happen if
 you instantiate and throw your own Errors.
You do not want to just display an Error object directly, because IE will only
 display "[object Error]".  (Try printing e.message and e.name!).
[IF you care about having instantiation location or proper stack trace reported,
 then do not subclass Error, since subclasses will report an internal location
 as the instantiation location.]
 I think this not true if use work-around in "MyError" sample at bottom
 of this file.
All browsers support e.name and e.message.  What about server-side engines?

The Error constructor syntax is very browser specific and incorrectly
documented!  Incl.  http://www.c-point.com/javascript_tutorial/jsobjError.htm
IE7:
    new Error(message);
    OR
    new Error(number, message);
    Properties:  name (cons. name), number, description = message
    [No way with provided cons. to assign distinct message and description]
    No capability to record source location.
FF3:
    new Error("message");   // No concept of error number!
    Properties message name (cons. name), stack, fileName, lineNumber
Only create Errors like this:
    new Error("message");
Other params would OVERWRITE the automatically set fileName and lineNumber
properties!
fileName and lineNumber attributes will be set automatically at the
instantiation point.
IE does not honor the given data type of param #1.  Therefore, do use a
 numeric string (or obviously anumber) as a message for the 1-param cons:
     new Error(message);

If your goal is solely to display a specified message, then you can:
    throw "message"
(All you can determine in the catch block is that text).
If you want a record of the INSTANTIATION location and stack (FF only), then:
    throw new Error("message")

Whereas PrototypeJS $A's are extended native JavaScript Arrays, ProtoypeJS's
$H() = Hashes are very different from the wrapped native associative arrays.
You must use USE PrototypeJS .toObject() TO ACCESS HASHES AS NORMAL JS MAPS!
In particular $H()[x] does not return element mappings, but Hash implementation
methods; and for (var x in $H()) iterates over Hash impl. methods instead of
elements.  Use $H().toObject() if you want to do these things.


I call a non-OO JavaScript Object that has not been customized to defeat the
vanilla for...in, x.y, x[y] operations a "Map", as they are intended to be used
as plain associative array = Perl Hash/Map = Java Map.  But do understand that
there are no protections in Java to prevent the user from accessing any non-Map
(according to my definition) Object this way, and getting crazy results.

It seems there is magic in Element.addMethods() particular to Element.
If I Hash.addMethods, the instance methods do not magically get a first param
of "this', and instead use "this" as normal for instance method implementation.
When adding methods to Element, the first param will always be the element
itself.

To get size of a Map (w/ PrototypeJS), use h.size()
(but $H(arr).keys().length works too).
Merging object/hashes/maps
    $H(startMap).merge(overridingMap);
WITHOUT PrototypeJS:
Size/length of dictionary/map/assoc-array:  Object.keys(dictionary).length
There is also Object.values(dictionary).

Unlike Java maps, JavaScript dictionary/object keys are always strings.
(Same for JSON).
JSON can not handle undefined mapping values when toStringing the object.
  The undefined-value mappings are just missing in the output string.

PrototypeJS API.
When looking up properties and functions, check the "Includes" header, because
that may include many more properties and functions that you can use.

Class does include Enumerate, and size() woks, but...  ?  But what?

HTML DOM "Offset" is an array of ints:  [x, y]

El.textContent  IS NOT GENERALLY SUPPORTED IN IE7!!!  Apparently depends on
the element type.  Does not work with th's.

COOKIES:
When read you just from document.cookie a single string of ;-delimited (or
maybe "; "-delimited) name/value pairs.  Bug magically, you set only a single
name/value at a time, suffixed with optional expiry, path, URL, which are
magically processed and not shown to you again.
The name+path+URL specify the key, so you can't change them, only set a new
one.  To change the value or the expiry, you must make another assignment with
the same name+path+URL.
Default for path is the path up to the directory of the current page.  I.e.:
    URL http://some/thing/good/page.html  ->   path=/thing/good
The RFC says that the path should not include the right-most /, but FF does
include it.
Definitely can store a path to the exact page.
Use web browser cookie management facilities to examine paths, etc.

GOTCHA!  isNaN does evaluate false for empty string!


HTMLElement attr and callback values.
Values corresponding to unset attrs (at least sometimes) correspond to ""
 (definitely for form's "method" attr).
Values corresponding to callbacks are undefined if not set and function if set.

HTMLElement callback return values.
Returning false doesn't prevent follow-up callbacks.  E.g. if you return false
from a onmousedown, that prevents neither onmouseup nor onmousepress from
executing, though it does prevent the character from adding to the element
value.
JavaScript really likes to return true.
    JavaScript seems to not be like shell scripts.  Value of the final
    expression executed in the function body makes no difference.
    Return value will be (at least treated as) true unless you explicitly:
        return false;
    Therefore, to be robust, definitely:
    try { callbackStuff; } catch (e) { log(e); return false; }

GOTCHA!!!  What you can't do with Strings in IE that you can do in FF is to
access characters via the [] construct.  USE .charAt()!

It is safe (in both IE and FF) to use substring ending-indexes past the end of
the string:  "shortString.substring(0, 100);" is fine.

IE GOTCHAs: white-space:nowrap does not work on th's (and I'm told on td's)
if using table-display:auto.  Workaround is to use white-space:pre instead.

FF and IE support all keys in Hash/Map/Objects, but IE does not support setting
key of 'null' with the {} construct.  Following works in FF but fails with IE:
    x = { null: 3 };

Can not use variables as keys in the Object/Hash/Map {} construct.

Default for Element.insert() is bottom.

HTML spec defines callback handlers for <link> elements, but as <link> may only
appear in the <head>, this is entirely useless.

onchange handlers do not have standard function behavior, even in FF:
There is no "event" involved, and the return value is entirely ignored.
Changes can not be cancelled/rolled back automatically.

Form ENTER KEY behavior

JavaScript instanceof
    "var instanceof ClassName" works great, incl. for PrototypeJS classes and
     for null and undefined.
    Therefore always sufficient and safe to simply test "x instanceof WhatIWant"

PrototypeJS's observe callbacks are invoked in reverse order by IE and FF.
[Qualification:  I have only tested this on Windows with click and blur events).
FF calls in same order you assign (or probably start) observers.
IE calls in reverse of that order.

Most HTML elements DO NOT HAVE onload CALLBACK.  body and image tags do.

PrototoypeJS:  I think I documented it already, but make sure I noted that I
have tested it for mousedown events.  Order callbacks get invoked is same order
as observe statements for FF and reverse for IE.

Excellent about closures and apply:
http://oranlooney.com/javascript-arguments/

Per HTTP spec, forms always submitted with UTF-8 encoding.

Generic key iterator:
var keys = [];
for (const key in dictionary) {  // can't use 'const' here with ServiceNow global!
  if (dictionary.hasOwnProperty(key)) {
    keys.push(key);
  }
}

d8 (Linux CLI executable for libv8-3)
V8 is Google's JavaScript engine for Chrome.

vararg = function() {
   //return "xyz".replace(arguments);
   //var outA = [];
   //for(var i =0; i <arguments.length;i++) outA.push(i +":"+arguments[i]);
   //return outA.toString();
   return String.prototype.replace.apply("xyz", arguments);
}
NEW:
vararg = function(...arr) {...}
Can also use in non-final position like: function(a, b, ...arr)

console.log(vararg("y", "WHEN"));

call vs. apply
call takes invocation params in flat format while apply takes them as a distinguished array.
Builtin function apply:
    returnType function.apply(thisObject, [argsArray])
If you invoke a function directly (without an instance), 'this' will be the
CALLER global scope.  Use .apply or call to set any other 'this'.
  (In practice I see that functions called by top node level get this of
  undefined; but browsers do get the Window).
By convention at least, thisObject should be null for non-instance invocation.
'this' in body gets exactly what you provide as 1st arg to call/apply,
  (If you call with anything x.fn(); then 'this' in body is precisely x).

arguments works only with 'function x()...' definitions!!
Chaining/Wrapping
I.e. this is a no-op for static function call:
function wrapperFn() {
    return OtherFn.apply(null, arguments);
}
I.e. this is a no-op for instance function call:
function wrapperFn() {
    return OtherFn.apply(this, arguments);
}
To wrap and manipulate parameters:
function wrapperFn() {
    const args = Array.prototype.splice.call(arguments, 0);
    args.unshift("COUNT");
    return OtherFn.apply(this, args);
}

Cloning objects.
With jQuery:
    // Shallow copy
    var newObject = jQuery.extend({}, oldObject);
    // Deep copy
    var newObject = jQuery.extend(true, {}, oldObject);
To get functions and everything is complicated.

Non-function/non-undefined members:
  var newObject = JSON.parse(JSON.stringify(oldObject));
Clone an array:  srcArray.slice();
Awesome object/dictionary concatenation with ES6:
  d1 = Object.assign(d1, d2, d3,...);
  Returns reference to modified d1.
  Missing in non-Edge IE 10 :(

Anonymous function call == Temporary private scope
(function(params...) { code }).(args...);

Size/length of dictionary/map/assoc-array:  Object.keys(dictionary).length

Existence test:
in operator.
Can test for dictionary members with:  e in d
Keep in mind that JavaScript map keys are always strings.
  Both with setting and in 'x in h' tests, key value is always coerced to a string.
Works better than Groovy.  Means:  is 'e' a key in d?
GOTCHA:  Often you want to know if it is an entry and has a non-undefined value.
  For that don't use 'x in y' but:  d.e !== undefined
But can not test for top-level objects with undefined comparison.
Must do that with typeof:  if (typeof x !== "undefined")

Allow Chrome to make cross-origin requests:
chrome... --disable-web-security...
OR less dangerous:
chrome... --allow-file-access-from-files

JavaScript does not support <> or >< operator!  Use != or !==.


Parse a boolean string:  (aString === "true")


Vanilla JavaScript bootstrapping:
  <script>
    window.onload = function() {
      ...
    };
  </script>

Objects don't work for keys.  At least HTML elements do not.
Intead, keep a list and a map keyed by el.id.
As stated above, object keys are always string constants.

SCOPE IN HTML pages
Vars declared inside of functions, including jQuery $(function(){...}), definitely are not
accessible above (from the Window context).
Though in JavaScript variable declarations are moved to top of block so they can be used before declared, different <script> elements count as blocks in this respect:
  Can't use a var declared in a FOLLOWING <script> block.
  Certainly can use a var declared in a PRECEDING <script> block.
Since global scope == windows, declaring a variable at HTML root level is useless (except for showing intention).

exec() sample:
var ex = /re/.exec(str);
if (!ex || ex.length != expectedInt) {
    error handling
}
Use entire capture ex[0] or groups ex[1], etc.

In-place Numerical sort:
list.sort(function(a,b) { return a-b; });

Strings can contain 4-hex-char unicode sequences exactly like Java Strings:
"one\u007f".

[Node.js has great Array.shift/unshift/push/pop]
Array.shift = array.splice(0, 1)[0]
Array.unshift = array.splice(0, 0, newEl)


Bit-wise
var b = 0
b |= x == t ? 2 : 4;  // turn on specified bit
if ((b & 6) == 6) ...         // check for specified set of bits


Update options:
gr.setWorkflow(bool);
gr.autoSysfields(bool);
work maximally as you could want in every respect.
Can set them any time after the GlideRecord instantiated and will affect all subsequent writes.
If wish can set it immediately before the .insert() or .update() call.

try and catch blocks require curly braces,
but unlike Java, finally block may be a single statement without braces.

From reading
http://ryanmorr.com/understanding-scope-and-context-in-javascript/
Context == this
Scope = variable availability due to function enclosures
    Based entirely on code locations, not function call stack.
BUT "execution context" is actually scope.  :(
ECMAScript 5 == ES6 adds block-specific "let" "const" keywords.
And "use strict";  quoted like that!
  "strict" is checked at execution-time not definition time, but scope of
    strict is the definition location.
  Can be applied to top of file or a HTML <strict> block to apply to entire
    file (including function DEFINITIONS not calls; but the DEFINITIONS
    are not checked until "body" is called from anywhere)
    or to top of a function to apply only to that entire function (and all of
    its nested function definitions).
  This has to be before any statements other than simple string constants.
  This doesn't check statements until those actual statements are executed,
   so non-conformant statements can still easily get into Production.
  In Chrome browser (but not chrome), redeclarations with 'let' are not allowed,
    but redeclarations with traditional 'function' are.
Other string constants, white space, comments of any types may precede.
const was there sometime before EMCAScript 2015 == ES6.
Consts can be redefined in a lower nested scope, just like let can.
  Except before EMCAScript 2015  == ES6 you can't redefine.
Scoping very generous.  Can just add {...} to add another level.
Once have "for (const" capability DO!:
    for (const k in...
and only if need to modify k and have 'let' DO!:
    for (let i...
    for (let k in...
const can be overridden in called functions, but in every function in which
it is defined it can never be referenced before that assignment.

If a function is not nested and not invoked with "new", then context this
within the function body is the global object (window in browsers)
EXCEPT in strict mode then will be undefined.

CLOSURE is a returned nested function reference (or an object with functions)
with it's execution scope.

IIFE == Immediately Invoked Function Expression ==
  self-(Immediately) invoked function.
https://www.w3schools.com/js/tryit.asp?filename=tryjs_function_expression_self
Giving the function a name is useful for environments like Node.js or browser, because stack traces
  will report the label.  ServiceNow, however doesn't label JavaScript functions in stack traces.

ECMAScript 5 == ES5 adds bind which locks the 'this' for the returned function.

https://zeekat.nl/articles/constructors-considered-mildly-confusing.html

hoisting:  Compiler moves local var declarations to top of function.


Standard listener for DOM element creation is non-W3C.
Consider MutationObserver instead.
https://stackoverflow.com/questions/13277212/mutation-observer-for-creating-new-elements

encoding:
encodeURIComponent / decodeURIComponent

string.slice() is like string.substring() but supports negative stop values.
  substr deals with lengths vs. substring deals with positions.
  (Array.slice() behaves analogously to string.slice()).
Elegant idiom to get last element of an array:
    arr.at(-1)  for >= ES2022
    arr.slice(-1)[0]  otherwise
GOTCHA:  Only slice allow negative START values.

Can not have parameter declarations in function definition like
    f(var x) or f(const x) or f(let x)
even with ES6.

Array clear = ar.splice(0, ar.length);

remove/delete dictionary/object entries
delete m.k
delete m[k]
remove/delete Array entry
rmedArr = arr.splice(i, 1);
It is safe to do this inside of a 'for (x in dictionary)' loop.
Just be aware that if you delete items not iterated to yet, the effects aren't
 reliable.

Nested function definitions:
ServiceNow editor SOMETIMES warns about functions (incl. IIFE) defined inside
of a loop.
I don't know if compiler is too dumb to compile such a function just once, but
if not, just define it immediately before the loop then use the reference.

Dynamic function params available in var 'arguments'. Just like C argv.

for (x in y) loops seem to work for Arrays, with x being index.

Array OOTB iterator functions. ALL provide to callback next element + index int.
Can use Arrow Functions as long as don't need to use 'this'.
Functions that return element, bool, index do shortcut iterations.
forEach (void)
every -> bool
filter -> new array
find -> element      Undefined if no match.   MISSING IN SN.
findIndex -> index   -1 if no match.  MISSING IN SN.
map -> new array
some -> bool ("any")

forEach
Docs say that 'this will get value 'undefined' by default, but in practice I
see that it gets some unknown object regardless if called from within a class instance.
Takes an optional argument AFTER the function arg.  It becomes 'this' (inside
of unknown default 'this' object) inside the funcion body.  Works fine to
chain this to "keep" current this.  ONLY WORKS for explicit native functions, not arrow functions.
This can be used to pass any value that's dynamic outside but constant for
 every iteration.  It works to pass scalars BUT BEWARE THEY ARE SOMEHOW
 CONVERTED TO OBJECTS.  So if pass a string you need to do String(this) inside,
 etc.  UPDATE!  Does not happen with NodeJS!
   Strings pass through directly (verified for string and number)

&& and || conditionals are very strange, closer to shell scripts than Java
(or any non-scripting language).
    'stringA' && 'stringB'
    'stringA' || 'stringB'
evaluates to a String (one of the two given strings), not a boolean!
Surrounding the expressions above with parens doesn't change anything.

Array sorting.  IN-PLACE
OOTB there are .sort() and .reverse() which do in-place change AND returns
  ref of updated array.  So can chain ops like: x.sort(...).reverse();
Quirk:  sort() always sorts 'undefined' val to greatest, even if you specify
 a comparator (it will not be called with undefined).
sort() requires a comparator function param unless you want string collation.
See numeric and numeric string comparator implementations in ~/code-templates/js/.

Dynamic function ref.
Instance-specific: (conditional ? obj.f1 : obj.f2)(arg1,...);
  !! GOTCHA !! Sometimes this just does not work in Rhino and have to use
    the call method (shown next).
OR
Instance-specific:
  (conditional ? Class.prototype.f1 : Class.prototoype.f2).call(obj, arg1,...);
Class/static-function: (conditional ? Class.f1 : Class.f2).call(null, arg1,...);
OR
Class/static-function: (conditional ? Class.f1 : Class.f2)(arg1,...);

To see "generated" HTML in browser-independent way:
In browser console enter:  document.documentElement.innerHTML

Destructuring
1. Coll element initialization:  const|let|var [x,y=dflt]|{x,y=dflt} =...
2. Function input params:  fn({x, y=dflt}) {...
3. Map assignment with entry elements:  m = { existingX, existingY };
4. Magic to get sub-map:  (({key1,key2})=>({key1,key2}))(sourceMap)
   N.b. all braces there are required.
See 'Object Subset Mapping' below for how to get sub-map with transformation.
Order-specific for Arrays (but not for maps).
Can even skip elements by using empty ,, element and ignoring following els!
  let [name1,, name3 = [1, 2, 3, 4, 5, 6, 7];
With arrays or maps.  RHS may obviously be a var ref instead of literal.
Can use {x,y} as a function definition param, and caller gives a map but
  only values corresponding to declared keys get to function body,
  with variable names matching the keys.
Object nesting:  If use nested {}, then ancestor keys are only for resolving
  and variables instantiated and values passed only for the leaf entries.
AND they support default values with =v if the RHS has no corresponding element.
  let [name1, name2, name3=99] = [1, 2];
AND they support RENAMING OF KEYS:  let { inputKey: newVar,...}
Can use spread operator ... to get unmatched map or array elements,
  e.g. to check if caller sent an unsupported map key.

escape/unescape are deprecated in favor of en/decodeURI[Component]

<<<<<<< HEAD
variable accessibility in function nesting
Var must be declared at some scope accessible to the fn.
Value will be whatever runtime value of that var is by assignment anywhere.
'function x(...' declarations are loaded early so scope but sequenced doesn't
  matter.
'const|let|var x = function(...' the declaration gets hoisted but the
  value assingment stays where it is, so statement must be executed before
  invocation.
Due to variable hoisting variables used inside of nested functions must just
be cleared at or above the function level.
Value comes from whatever runtime value is.

Console is awesome.  https://www.w3schools.com/jsref/api_console.asp
For some damned reason, reference failures are loaded at info level, like
  ReferenceError:  X is not defined (+ stack trace)
.debug is available in every implementation that I've seen.
console.log/debug/info/warn/error(params)
    console.log seems to be === log.info.  Why even have console.log??
OLDER-BROWSER-ONLY FRUSTRATIONS GOTCHA!
  At error level, params after the first are ignored.  WTF!!!!
    So need to log errors with both a console.error + a console.warn!
  To log object details, log at warn level!
        // params may be printf-like list,
        // or a collection that will be pretty-printed or expand/collapsable
        // or just params each of to display delimited by space.
Log Param Detail:
   Objects and collections display perfectly.
   Only imperfection is that for non-first params they are always
     concatenated to current line after a space " ".
     So if you start your first param is "\n" it will output "\n ".
Chrome's logging displays Errors like so:
    Pre-2023 (or some time earlier):
        For some damned reason, only for error-level with an error param,
          I am not getting any second line and first line only displays 1st arg.
    TOP LINE parameter list of tostrings, with 1 expand/collapse icon to
      hide/reveal the stack trace UNDER the objects.
    SECOND LINE list of expand/collapse parameter objects if any
    AFTER stack trace when top line expands them
Events.  Use Sources, nav panel "Event Listener Breakpoints".
  Settings here survive page reloads.
Missing from api spec, console.dir(object); is for pretty-printing objects,
  but as-far-as-i-can-tell you get nothing better than console.log, etc.

Dictionary sorting (non-nested!):
function sortedDict(inDict) {
    const newDict = {};
    Object.keys(inDict).sort().forEach(function(k) {
        newDict[k] = inDict[k];
    });
    return newDict;
}

Promises (async tactic)
See my examples
  ~/code-templates/promiseNoAsync.js / asyncAwait.js / promiseAwait.js
Functions return a Promise and you either provide callbacks to
  promise.then(); or call await on it.  Rejects must be handled by
  .then or .catch callbacks or by Error catching.
var promise = service();
promisel.then(successCbFn, failureCbFn);
    successCbFn(resVal)
    failureCbFn(errObj)
await
    Can only use inside an async function.
    Consequent of this and details below, the only way to block execution
      of the current level of code is to have that code in async block/function.
      To me the naming is crazy, that you need to have an async block/function
        in order to execute code synchronously (blocked by a preceding await).
    If you don't want to change return value of current function then
        (asnc()=>{...await...})();  // this actually returns the Promise
        Be aware that only code inside the precise async block +
         then/catch*/finally*s will "block".
        Execution immediately after these blocks continues immediately.
        resolvedVal = await thenableObj;  // throws if reject instead of resolve
        OR multіple-at-once (execution serial or in parallel?)
        resolvedVals = await Promise.all([thenableObj1, thenableObj2]);
    finally callback passes on param.
    There is also 'for await', like:  for await (const chunk of resp.body!)...
async functions* always return a Promise with resolution unless throw AND
  no reject-handler.
    The await calls are blocking/sync, but as soon as first async (if any)
      is hit the async function returns the Promise and after the last
      .then/.catch/.finally, execution continues to "run to completion".
    async function itself must have an await if it is to do any significant
      async work (which is the purpose).  Otherwise it would have to return
      a value before the async work runs.
    If any Error thrown with the async body then either
      1: IF there is any catch or then/reject handler, then returned Promise
         will have rejected state; or
      2: IF no such handler then the exception will propagate up.
See my directory code-templates/deno for working scripts and eval invocations.
There are class functions Promise.resolve and Reject, which create Promise
 objects with those states/values.
  I don't see how these are useful other than for testing.
* for ES6 only

Custom Events:
jQuery(window).trigger(jQuery.Event("CUST_EVT_NAME"));
jQuery("body").trigger(jQuery.Event("CUST_EVT_NAME"));

x = 3;
fn() { x... }  IS VERY DIFFERENT FROM:  fn(x) { x...}
The latter can not change x directly (though it can of course change x.y).

uniquify Arrays by interposing a ES2015 Set:
NO join and no sort operations, so often need to convert to arrays.
uniqueAr = [... new Set(origAr)]
set.add(x);
Sort example:  Array.from(set).join("\n")
Join example:  [...set].join("\n")

Parameter validation.
I like byContract.  Uses JSDoc-friendly syntax.
https://www.npmjs.com/package/bycontract
2 ways to call:
    validate(arguments, ["arg0spec", "arg1spec"]);  // validate params
    validate(value, "spec");  // for return values or interactive checking
Quick testing of tests.  Run "node" interactively or:
    node -p validate(testVal, "JSDoc expr");
Tests either return the input (upon success) or throw ByContractError
Expression: (requirements for one param):
    By default a type doesn't allow nulls
    ["!" prefix       non-nullable  THIS DOES NOT WORK.  Default behavior!]
    "?" prefix       nullable  Allow null but NOT undefined
    "=" suffix       optional  Allow undefined AND null!
    "number[]"       array of numbers
    "Array.<number>" ditto
    { k1: "expr1", k2: "expr" }
    SomeClass        instanceof
    "SomeClass"      instanceof, if 
    "expr1|expr2"    either
    "expr1|expr2"   optional in |??? (undefined???)
Special type specifiers:
    "*" anything  (undefined/unset?)
    "function"
    "nan"
    For RegExp's can use either "regexp" or "RegExp" or RegExp.
    For Array can use either "array" or [].
Unfortunately no test for ints or positive ints, so must add custom validator

Zod is modern replacement for bycontract
For OOTB you call 'schema methods' that return schemas.  The schemas provide a parse (et. al.) fn.
x.nullable() means "or null".  === or(z.null())
x.optional() means "or undefined".  === or(z.undefined())
nullish() means " or null or undefined
the throwing validator execution is:  Zfunctions()...parse(value);
An array with dedicated elements is called a tuple.  Use tuple for function param testing.
    To emulate 'argument' checking like bycontract do:
        z.tuple([z.x(), z.y()...]).parse(Array.prototype.slice.call(arguments));
    OR use z.function() as I exemplify in "zodFnWrap.js"
      Same tactic should work for class prototype functions like:
        notherFn = z.function()... implement(function(...) { ... this... };
Gotcha:  To test for object with no member criteria you must give {} parameter.
Custom validator functions:
    To modify existing function(s) just add .refine(y=>yourfn[, {message: "your"}]);
        Works intuitively for scalars, for objects and class instances the callback param is
        not the tested value but something about it.
    Otherwise use z.custom to create a custom schema (not schema function!!)
      Custom takes optional optional param obj OR opt string.  If param obj then key "message" is
      for a custom message.
Custom error messages:  You can only change the function-specific messages, in an options key
  specific to validator function itself (not the parse call).
  BUT refine and custom fns used generic key "message" AND if that's only option then shortcut to
    just the message string instead of an opt obj.
  DYNAMIC like to include the value in the error message, replace the message string with a
    function definition.  EXCEPT I find empirically that for refine you must use {message} obj
    with this and can't use the just-message shortcut.
To check/validate but not throw, call safeParse(value) instead.
    This returns an object with a "success" member.  If !success then it will have a "error" member
    which is precisely the ZodError that would have been thrown if parse() were called.


Array comparisons are difficult depending on whether nested objects,
whether sequence-significant, NaN considerations.
Better to use a library like lodash.

Strip out Java-like comments:  N.b. we only honor comments that open as first thing on a line.
var = JSON.parse(val.replace(/\r/g, "").
  replace(/^[ \t]*[/][*][\S\s]*?[*][/]/mg, "").
  replace(/^[ \t]*[/][/][^\n]*\n/mg, "").replace(/^[ \t]*\n/mg, ""));

With modern JS can do:  const [a, b] = [3, 4];

String.padEnd and String.padStart can be used to work around lack of
printf-like string padding and justification needs.

ES6 ARROW FUNCTION
=> Operator is for anonymous function (not necessarily 'immediately' so not IIFE):
    (function(...) {....}) === (...) => {...}
Params not useful for immediate invocation, but for callback according to an
 API that provides runtime parameters.
Can also generally replace
    const f = function(x) {...}
with
    const f = (x)=> {...}
Useful for JS Array iterator functions as long as don't need to use 'this'.
Default Param values exactly same as traditional.  fn=(p=dflt) => ...
SHORTCUTS:
  If exactly 1 param then don't need ():  fn = arg => {...}
      If using a {...} +++++destructuring then can't short cut it and must do: {(aKey)} =>...
  If exactly 1 statement in  body then don't need {}:  fn = (x) => expr
    GOTCHA!  If shortcut the body then DO NOT TERMINATE statement with ";".
    "return" for your expression is implicit, but you don't need to use
    returned value (e.g. can use with Array.forEach) and it can be undefined;
    even assignment and compound statements are valid expressions here, but not a try statement.
    REQUIREMENT:  One statement, may be an assignment or compound logical expr or x?y:z,
      but NOT an if or loop or throw statement.
      Satisfying this, it may nest as long as top level is
    a single statement with no ";")
        CONSEQUENTLY, can't use body shortcut for forEach or any caller that uses no return value.
    Can force execution of additional statements by adding a logical clause
      with the statement's return value.  E.g. since console.log returns
      undefined, we can do:  ==> console.log(anything) ||...
    TIP:  You can sort of shortcut body that return an object with {}, but you need to group with
      () which kinda defeats the purpose of skipping the outer {}.
  Can certainly use both of these shortcuts at same time like: v=>2*x
  N.b. there must always be something before = (with or without parens).
'this' ALWAYS set to object that defined arrow function instead of caller.

'this' inside functions gets set according to 2 different methods.
Regular "functions" (whether 'function x()...' or 'x = function() {...'
  get 'this as invoker from invoker.fnCall(...)
  OR if just called as fnCall() then whatever 'this' is when the function
    body is called.
VS. Arrow functions =>
  'this' is where the body was defined.
  Even if you do otherObj.fn = (x) => {...} 'this' is where the body is defined.
    If you do 'thing.fn = someFn;', that all
    depends on where the someFn body was loaded from.
    Should not use this for defining OO instance functions because it seems
     to work (since the fn bodies are loaded in the instance context), but
     if you assign the function to something else, then invocations from
     that will be stuck with the original instance's this.
FUCKS 'arguments'.
  Workaround is to specify input params like:
    fn = (... argsAr) =>...
  This prevents you from using named individual params though.
  JS engine will not allow you to use name 'arguments' where I have 'argsAr'.

function assignments (incl. arrow functions) vs. traditional 'function x(...)'.
Only traditional 'function x(...)' are loaded before the rest of code.
For any function assignments ['x = function(...)' or 'x = (...) =>'
  the assignments must runtime-execute before the function is runtime called.
I.e. they can be in any order in the code file, but ensure that the target
  function is runtime-assigned before it is runtime-called.

Mapping object to object / transform map.  Can't change number of entries.  Doesn't work in IE
const object2 = Object.fromEntries(Object.entries(object1).map(([k,v]) => [k, expr on k,v]));

Object Subset Mapping
const object2 = Object.fromEntries(Object.entries(
    (({key1,key2})=>({key1,key2}))(sourceMap)
).map(([k,v]) => [k, expr on k,v]));

With two different mappings from input object (working example):
console.info({
    ...Object.fromEntries(Object.entries(
            (({alpha,gamma})=>({alpha,gamma}))(o)
        ).map(([k,v]) => [k, v + v + " / " + k])),
    ...Object.fromEntries(Object.entries(
            (({beta})=>({beta}))(o)
        ).map(([k,v]) => [k, v + v + " / " + k]))
});

LOGICAL expr result:  If truthy then value of last USED operand is returned

PRECEDENCE
var is very low, so: if (!(var instanceof CName))
Highest: grouping THEN fn()/./new THEN x++/x-­ THEN !/~/+/-/++x/--x/typeof/void/delete/await
Middling:  ** THEN */% THEN +- THEN <>
Lower:  && [higher] THEN || [lower]
Lowest:  ?: THEN *=* [higher] THEN [lowest] ,sequence

Counting occurrences of character x in a string.
Could use a regexp, but this generally more efficient:  str.split("x).length - 1

String functions
.repeat is nice.  Like Groovy's * operator.
.trim same as Java.

for/of = for/in but for Arrays instead of Objects.
Both work great with const iteration var

Get (direct) methods of an instance:
  Object.getOwnPropertyNames(Object.getPrototypeOf(obj))

To customize JSON:
JSON.stringify(obj, (k,v) => k === "hiddenMember" ? undefined : v, 2)


NEW awesome JavaScript features.
To make a read-only class member (scalar or function), implement as a function
Can use arrow function definitions for simple static class definitions, but beware you will be
  missing this, arguments, and super bindings.  Not truly a class "method".
Can use dynamic keys in inline object instantiating by enclosing the key expression with [...].
Static function bodies can reference the class with: this
More maintainable to reference static variables in function bodies with:
    Static contexts:  this.VAR
    Instance contexts:  this.constructor.VAR

Remove comments from JSON:
inputData.
  replace(/^\s*[/][*][\s\S]*?[*][/]/mg, "").
  replace(/^\s*[/][/].*$/mg, "").replace(/^\s*#.*$/mg, "")