Javascript tests

Array

1. Array/Array.js

Ar#1 length
Ar#2 removes the last element from an array
Ar#3 adds a new element at the end of array
Ar#4 removes the first array element
Ar#5 adds a new element at the beginning of array
Ar#6 Changing Elements
Ar#7 changing from iterating
Ar#8 make element undefined
Ar#9 concat array
Ar#10 Merging an Array with Values
Ar#11 Flattening an array is the process of reducing the dimensionality of an array
Ar#12 used to add new items, The first parameter (2) defines the position where new elements should be added, The second parameter (0) defines how many elements should be removed.
Ar#13 Using splice() to Remove Elements
Ar#14 slices out a piece of an array into a new array.
Ar#15 toString()
Ar#16 sort
Ar#17 New
Ar#18 Arrays are a special type of objects
Ar#19 foreach
Ar#20 map  
Ar#21 keys
Ar#22 iteration for keys
Ar#23 array from
Ar#24 Transforming a Javascript iterable into an array
Ar#25 implicit string converstion
Ar#26 changing each array item
Ar#27 Array methods are always generic 
Ar#28 length property, length always ends as an integer
Ar#29 Create a string from an array
Ar#30 Find the index of an item in an array
Ar#31 Check if an array contains a certain item
Ar#32 Remove multiple items from the end of an array
Ar#33 Truncate an array down to just its first N items
Ar#34 Remove the first item from an array
Ar#35 Remove multiple items from the beginning of an array
Ar#36 Add a new first item to an array
Ar#37 concat
Ar#38 jagged 
Ar#39 three way copy
Ar#40 deep copy
Ar#41 print two-dimensional array
Ar#42 Sparse array https
Ar#43 forEach.call https
Ar#44 create range array with with function and expression

2. Array/ArrayLikeObjects.js

Aj#1 array-like objects,  Aside from true arrays, there are also array-like objects that have a length property and properties with all-digits names: NodeList instances, HTMLCollection instances, the arguments object, etc.
Aj#1 use for-of with host-provided array-like objects 
Al#2 use Array.prototype functions with host-provided array-like objects 
Al#3 Create a true array
Al#4 Use spread syntax (...)
Al#5 Use the slice method of arrays

3. Array/ArrayLoop.js

Al#1 encient stype
Al#2 for
Al#3 forEach
Al#4 for in 
Al#5 for iterator 
Al#6 (6) map
Al#7 iterate over Array with iterator

4. Array/ArrayTyped.js

Type of TypedArray
At#1 Different way to create Int9Array 
At#2 example to access data 
At#3 set up Array and access to it as octet
At#4 Multiple views on the same data
At#5 TextDecoder
At#6 FromCharCode
At#7 Conversion to normal arrays
At#8 DataView method (+ArrayBuffer and Array.From)

Async

1. Async/Async.js

As#1 if async function return simple value, that value will wrap to Promise
As#2 any Asyc function return Promise,
As#3 wait result with then
As#4 top-level await with IIFE 
As#5 parallel executing

2. Async/AsyncCallback.js

Ac#1 callback stack
Ac#2 serius of callback. A middleware function will return another function, and a terminator function will invoke the callback. 

3. Async/AsyncFunction.js

Af#1 Await is Promise
Af#2 Async functions and execution order
Af#3 always Use Promise.all instead awaiting many results

4. Async/AsyncFunctionAsterisk.js

Aa#1 simple example with: yield await Promise
Aa#2 Async generator functions always produce promises of results — even when each yield step is synchronous.
Aa#3 Using an async generator function to read a series of files 

5. Async/Await.js

Aw#1 The for await...of statement creates a loop iterating over async iterable objects as well as sync iterables. 
Aw#2 Thenables
Aw#3 Awaiting a promise to be fulfilled
Aw#4 Thenable objects are resolved just the same as actual Promise objects.
Aw#5 Thenable objects can also be rejected:
Aw#6 demonstrate how the microtask queue is processed when each await expression is encountered.

6. Async/Fetch.js

Ft#1 simple fetch with JSON
Ft#2 Async/Await fitch
Ft#3 async IIFE 
Ft#4 pass result of async function to then
Ft#5 error handle 

7. Async/ForAwaitOf.js

Ao#1 Iterating over async iterables
Ao#2 Iterating over async generators
Ao#3 Iterating over sync iterables and generators
Ao#4 yielding rejected promises from a sync generator -  In such case, for await...of throws when consuming the rejected promise and DOESN'T CALL finally blocks within that generator.

8. Async/Promise.js

Pm#1 fist call executor function creates finalstate
Pm#2 correct syntax
Pm#3 min access to Promise result from onFulfilled function
Pm#4 and onRejected

9. Async/PromiseAsPrm.js

Pb#1 this function accept promise as prm
Pb#2 create Promise from any value
Pb#3 created rejected Promise

10. Async/PromiseChain.js

Ph#1 Promise onFulfill and onReject functions
Ph#2 capture error in next chian
Ph#3 pass Error to second chain
Ph#4 pass promise to second chain
Ph#5 pass wrong promise with error to second chain        

11. Async/PromiseLocalFS.js

Lf#1 synchronous reading node specific
Lf#2 wrap synchronous reading to promise task 
Lf#3 standard asynchronous reading 

12. Async/PromiseWaitAll.js

Pw#1 setTimeut return Promise
Pw#2 working even simple value instead Promise  
Pw#3 handle reject
Pw#4 unhaddled rejection  
Pw#5 imediate rejection 

13. Async/PromiseWaitAny.js

Pa#1 start on Promise WaitAll

14. Async/SyncCallback.js

Sc#1 async function show the same time because it invoke synchronously

15. Async/Timeout.js

Tt#1 Promise timeout merge to one

Basic

1. Basic/Clone.js

Cl#1 Shallow_copy - object is a copy whose properties share the same references
Cl#2 deep clone with structuredClone and Object.assign() 
Cl#3 Transferring values = clone an array and transfer its underlying resources to the new object. On return, the original uInt8Array.buffer will be cleared
Cl#4 use ArrayBuffer and then clone the object it is a member of, transferring the buffer.
Cl#5 Object.assign() copies all enumerable own properties from one or more source objects to a target object. It returns the modified target object. 
Cl#6 But can not use for deep clone like structuredClone() If the source value is a reference to an object, it only copies the reference value.
Cl#7 Copying symbol-typed properties
Cl#8 Copying accessors
alternate way to deap copy on Ar#40 (JSON)

2. Basic/Compare.js

Cm#1 compare value and type
Cm#2 compare bigint (0n) with other
Cm#3 This use case demonstrates an instance of the Liskov substitution principle 
Cm#4 Similar to same-value equality, but +0 and -0 are considered equal.
Cm#5 Object.is() and NaN

3. Basic/Delete.js

Dl#1 delete and the prototype chain
Dl#2 delete global this (don't working in strict mode) 

4. Basic/DestructuringAssignment.js

Da#1 assignment like x = y = 5
Da#2 Assignment with destructuring, Unpacking values from a regular expression match
Da#3 common syntax of destructing Assignment
Da#4 Swapping variables
Da#5 Using a binding pattern as the rest property
Da#6 unpacking from any iterable
Da#7 Unpacking properties from objects passed as a function parameter
Da#8 unpacking object
Da#9 inside for-of
Da#10 the prototype chain is looked up when the object is deconstructed

5. Basic/Eval.js

Ev#1 eval(script), script -  A string representing a JavaScript expression, statement, or sequence of statements. Direct call eval version
Ev#2 For if, it would be the last expression or statement evaluated.
Ev#3 If you assign multiple values then the last value is returned.
Ev#4 eval() as a string defining function requires "(" and ")" as prefix and suffix. Function declaration vs function expression
Ev#5 Indirect call version using the comma operator to return eval
Ev#6 Uses global scope, throws because x is undefined
Ev#7 strict mode
Ev#8 source eval string is in strict mode
Ev#9 eval new.target
Ev#10 var-declared variables and function declarations would go into the surrounding scope if the source string is not interpreted in strict mode — for indirect eval, they become global variables.
Ev#11 Context is strict, but this is indirect eval and the source string is not strict
Ev#12 indirect eval - Simply using indirect eval and forcing strict mode. The two code snippets above may seem to work the same way, but they do not; the first one using direct eval suffers from multiple problems.
Ev#13 The Function() constructor is very similar to the indirect eval 
Ev#14 Using bracket accessors to access properties dynamically. 
Ev#15 the same with descendant properties obj.a.b.c

6. Basic/In.js

In#1 The in operator returns true if the specified property is in the specified object or its prototype chain
In#2 In on array used as property (index or other)
In#3 Using the in operator with deleted or undefined properties
In#4 If you set a property to undefined but do not delete it, the in operator returns true for that property.
In#5 Inherited properties object - hasOwn
In#6 Using the in operator to implement branded checks
In#7 You can also implement this as a @@hasInstance [Symbol.hasInstance] method of the class, so that you can use the instanceof operator to perform the same check

7. Basic/NullishAndChaining.js

Nc#1 logical nullish assignment operator, only evaluates the right operand and assigns to the left if the left operand is nullish (null or undefined).
Nc#2 Nullish coalescing operator ??
Nc#3 || Optional chaining 
Nc#4 Assigning a default value to a variable
Nc#5 Short-circuiting

8. Basic/Object.js

Ob#1 common Object syntax and initializer 
Ob#2 you should directly call() the Object.prototype method on your target object instead, to prevent the object from having an overriding property that produces unexpected results.
Ob#3 create object from NULL prototype with Object.create(null)
Ob#4 creating from NULL prototype can be interesting, this function working wrong
Ob#5 but this working correctly
Ob#6 Making your sensitive object not inherit from Object.prototype also prevents prototype pollution attacks. 
Ob#7 Constructing empty objects
Ob#8 create Boolean objects
Ob#9 Modifying the object prototype property 
Ob#10 get keys and value from Object
Ob#11 JSON Indented format (usefull function)
Ob#12 Detecting an undefined object property with hasOwnProperty or with ====
Ob#13 object methods create/defineProperty/getOwnPropertyDescriptor/getOwnPropertyNames/getPrototypeOf/keys 
Ob#14 protection object methods preventExtensions/isExtensible/seal/isSealed/freeze/isFrozen  
Ob#15 serialise Obj with circular reference

9. Basic/PredefinedFunctions.js

Pf#1 The decodeURI() / encodeURI() method encodes a Uniform Resource Identifier (URI)           by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character
Pf#2 The decodeURIComponent()/ encodeURIComponent() method encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character   
Pf#3 redirect standard console.log by redefine function console.log to variable
also look to Html Folder to list of all global function on Node.JS and Browser

10. Basic/Property.js

Pr#1 computed property names like [`foo${++i}`]
Pr#2 computed property names like [Array]
Pr#3 computed property names like [variables]
Pr#4 Spread object properties to merged object with ...  

11. Basic/StrictModeOff.js

So#1 error because variable is not declared 
So#2 This, Only for demonstration — you should not mutate built-in prototypes like Number.prototype.getThis === globalThis
So#3 compare with This.js - currently this 5 functions return false, with strict mode on - all of that comparing return true
So#4 function local scope (only the code inside the function is in strict mode):
So#5 Deleting a variable (or object) is not allowed in strict mode
So#6 Octal numeric literals are not allowed in strict mode 
So#7 Octal escape characters are not allowed in strict mode
So#8 Writing to a read-only property is not allowed in strict mode
So#9 get-only property is not allowed in strict mode
So#10 Deleting an undeletable property is not allowed in strict mode
So#11 eval, arguments, implements, interface, let, package, private, protected, public, static, yield -  can not use as identifier in strict mode
So#12 The with statement is not allowed in strict mode
So#13 variable can not be used before it is declared in strict mode
So#14 eval() can not declare a variable in strict mode

12. Basic/Xhr2.js

Xr#1 use XMLHttpRequest 

ControlFlow

1. ControlFlow/DoWhile.js

Dw#1 do while
Dw#2 while 
Dw#3 const html = (strings, ...values) => String.raw({ raw: strings }, ...values);
Dw#4 create createNodeIterator on dom.window.document 
Dw#5 Many style guides recommend putting additional parentheses as a grouping operator () around the assignment in While - while ((currentNode = iterator.nextNode())) {}

2. ControlFlow/Goto.js

Gt#1 Goto on Continue 
Gt#2 Goto on Break for

3. ControlFlow/Other.js

Ot#1 nested ternary operator
Ot#2 Break on block {}
Ot#3 switch 
Ot#4 for-each loop

Function

1. Function/ArrowFunction.js

Fa#1 syntax cases
Fa#2 code inside braces ({}) is parsed as a sequence of statements, where foo is a label, not a key in an object literal. To fix this, wrap the object literal in parentheses:
Fa#3 you may put the line break after the arrow or use parentheses/braces around the function body
Fa#4 Arrow function expressions should only be used for non-method functions because they do not have their own this
Fa#5 this inside the arrow function's body will correctly point to the instance (or the class itself, for static fields). However, because it is a closure, not the function's own binding, the value of this will not change based on the execution context
Fa#6 Arrow functions do not have their own arguments object.
Fa#7 Cannot be used as constructors
Fa#8 With arrow functions, function is essentially created on the globalThis (global) scope, it will assume this is the globalThis
Fa#9 this on array.forEach with ordinary and arrow functions, all arrow functions lexically bind the this

2. Function/ExecuteFunctionAsLiteral.js

Fl#1 execute function as literal

3. Function/Function.js

Fu#1 Constructor new Function
Fu#2 Declaration
Fu#3 Function expressions; the function is anonymous but assigned to a variable
Fu#4 Expression; the function has its own name
Fu#5 Arrow function
Fu#6 define Method and Get/Set function in object
Fu#7 Object, Default and Array (with Spread syntax) as function parameters 
Fu#8 obj as parameters
Fu#9 Invoking a Function with a Function Constructor NEW
Fu#10 Named function expression

4. Function/FunctionApplyBindCall.js

Fb#1 Using call, bind, and apply 
Fb#2 Function Borrowing with the bind() method, an object can borrow a method from another object. Creates a bound function that has the same body as the original function. The this object of the bound function is associated with the specified object, and has the specified initial parameters.
Fb#3 Call()
Fb#4 Call with parameters
Fb#5 apply()
Fb#6 apply can used for calculate Max Method on Arrays
Fb#7 Using call() and apply(), you can pass the value of this as if it's an explicit parameter.
Fb#8 f.bind(someObject) creates a new function with the same body and scope as f,

5. Function/FunctionCallback.js

Fk#1 callback function on map
Fk#2 Callback with Rest parameters

6. Function/FunctionClosure.js

Fc#1 Nested Functions and closure, see more in Closure
Fc#2 closure on self-invoking functions (arrow function working in global context)
Fc#3 This point to global context in arrow function
Fc#4 arrow function fn2()() === globalThis is true in non-strict mode
Fc#5 Nested functions and closures
Fc#6 Name conflict in Closure

7. Function/FunctionPrototype.js

Fp#1 The function with custom prototype

8. Function/FunctionReference.js

Fe#1 function can apply to any array elements, pass function reference as parameter

9. Function/ImmediatelyInvokedFunction.js

Fi#1 Immediately Invoked Function Expression
Fi#2 IIFE with arrow Function
Fi#3 Async IIFE

10. Basic/NewFunction.js

Fn#1 Function constructor 
Fn#2 The function constructor can take in multiple statements separated by a semicolon. Function expressions require a return statement with the function's name

11. Function/UseArguments.js

Fm#1 apply arguments for function parameters
Fm#2  arguments look as array-like object, but this is not array!

DataTypes

1. DataTypes/Map.js

Mp#1 The Map object holds key-value pairs and remembers the original insertion order of the keys.
Mp#2 create function and function call more readable
Mp#3 converting string to array Array.prototype.map.call
Mp#4 can transformed to Array with entries() - IterableIterator
Mp#5 Reformatting Array to Objects 

2. DataTypes/RegExp.js

Rg#1 Matching duplicate words with text.match
Rg#2 Assignment with destructuring, Unpacking values from a regular expression with exec

3. DataTypes/Symbol.js

Sm#1 Every Symbol() call is guaranteed to return a unique Symbol.
Sm#2 Symbol wrapper around object, TypeOf symbol and typeof wrapper
Sm#3 Symbol.for(tokenString) takes a string key and returns a symbol value from the registry, while Symbol.keyFor(symbolValue) takes a symbol value and returns the string key corresponding to it.
Sm#4 typeof operator with Symbols, Symbols(object), Symbol.iterator
Sm#5 Symbols and for...in iteration
Sm#6 Symbols and JSON.stringify()
Sm#7 Symbol wrapper objects as property keys

Html

1. Html/AllDomExample.txt
2. Html/AllHtmlExample.html
3. Html/Angular.txt
4. Html/Canvas.html
5. Html/CookieProxy.html
6. Html/CustomControl.html
7. Html/DetectUniqueBrowser.html
8. Html/GlobalContext-Chrome.txt
9. Html/GlobalContext-Firefox.txt
10. Html/GlobalContext-Node.txt
11. Html/Global.html
12. Html/Html5.html
13. Html/HtmlDom1.js

Dm#1 Create Html dom with jsdom

14. Html/HtmlDom2.js

Dm#2 Create Html dom with html-element, return Promise

15. Html/IIFE-SortTable.html
16. Html/Index.html
17. Html/LocalStorage.txt
18. Html/PostForms.html
19. Html/Transitions.txt
20. Html/VideoAudio.txt
21. Html/WebGL.txt
22. Html/Webworker.txt

Iterator

1. Iterator/ForIn.js

Fr#1 for...in loop only iterates over enumerable, non-symbol properties. 
Fr#2 we can use of Object.hasOwn(): the inherited properties are not displayed.
Fr#3 Shadowed properties are only visited once:
Fr#4 Deleting a property during iteration:
Fr#5 Changing the prototype during iteration:
Fr#6 Difference between for...of and for...in - The for...in statement iterates over the enumerable string properties of an object, while the for...of statement iterates over values that the iterable object defines to be iterated over.

2. Iterator/ForOf.js

Ff#1 Iterating over an Array
Ff#2 Iterating over a string
Ff#3 Iterating over a TypedArray
Ff#4 Iterating over a Map
Ff#5 Iterating over a Set
Ff#6 Iterating over the arguments object
Ff#7 Iterating over a NodeList - dom.window.document.querySelectorAll 
Ff#8 Iterating over a user-defined iterable - Iterating over an object with an @@iterator [Symbol.iterator]() method that returns a custom iterator
Ff#9 Iterating over an object with an @@iterator generator method *[Symbol.iterator]()
Ff#10 Iterable iterators (iterators with a [@@iterator]() method that returns this) are a fairly common technique to make iterators usable for for...of
Ff#11 Iterating over a generator function*
Ff#12 Execution of the break statement in the first loop causes it to exit early. The iterator is not finished yet, so the second loop will continue from where the first one stopped at.
Ff#13 Difference between for...of and for...in 

3. Iterator/Generator.js

Gn#1 function generator function* gen() { yield* [];} gen().next()
Gn#2 Generator Function 
Gn#3 GeneratorFunction.prototype.constructor return  instance of GeneratorFunction
Gn#4 infinite generator 
Gn#5 async generator function async function* [yield await Promise]
Gn#6 operators yield* vs yield 

4. Iterator/Iterator.js

It#1 @@iterator the same is [Symbol.iterator]() looks as ForEach(), simplest iterator over array items - array.keys()
It#2 For of
It#3 Transforming a Javascript iterable into an array array.entries()
It#4 Array.prototype[@@iterator]()] - check typeOf iterable parameter 
It#5 iterable iterator  (function* () { yield {}; }) (),
It#6 array and parameters spreading ... from *[Symbol.iterator]() {}
It#7 spreading chars from string 
It#8 desctructing assignment from set 
It#9 create User-defined iterables
It#10 unpack uder defined iterables to array
It#11 and read unpacked value with array.map
It#12 for-of  over User-defined iterables
It#13 pass break to iterables perform return() instead next()
It#14 Defining custom iterator function from array, index in Iterators are stateful 
It#15 Defining an iterable property (Simple Class As Array with index)
It#16 You can redefine the iteration behavior by supplying our own @@iterator
It#17 create createNodeIterator on dom.window.document 

5. Iterator/Spread.js

allows an iterable, such as an array or string. used in (1) function argument, (2) array, (3) literal and (4) object
Sp#1 1. Replace apply() in Function arguments list 
Sp#2 2. Spread in array 
Sp#3 make a shallow copy of an array
Sp#4 Apply for new operator - When calling a constructor with new, it's not possible to directly use an array and apply(), because apply() calls the target function instead of constructing it, which means, among other things, that new.target will be undefined, therefore only this way is possible
Sp#5 concatenate arrays instead Array.prototype.concat()
Sp#6 Conditionally adding values to an array
Sp#7 3. Spread in object 
Sp#8 Conditionally adding properties to an object, no key at all with Object.keys().
Sp#9 Object.assign() can be used to mutate an object, whereas spread syntax can't.

Meta

1. Meta/MapKeyValuePair.js

Kv#1 Map is KeyValue set
Kv#2 Map Object
Kv#3 NaN
Kv#4 Iteration with For [key, value] of myMap
Kv#5 iteration Map.forEach((value, key) => {}
Kv#6 Relation with Array objects new Map(Array), Array.from(Map), [...Map]
Kv#7 Map can clone
Kv#8 Map can Merge
Kv#9 Map can megre with array
Kv#10 create from Array
Kv#11 add item
Kv#12 Being able to use objects as keys is an important Map feature.
Kv#13 for-of iteration
Kv#14 Keys

2. Meta/ProxyReflect.js

Pl#1 Proxy object can intercept and redefine fundamental operations for that object. The Reflect method still interacts with the object through object internal methods — it doesn't "de-proxify" the proxy if it's invoked on a proxy. 
Pl#2 Before Reflect, you typically use the Function.prototype.apply() method to call a function with a given this value and arguments provided as an array (or an array-like object).
Pl#3 With Reflect.apply this becomes less verbose and easier to understand

3. Meta/Set.js

St#1 JavaScript Set is a collection of unique values. Each value can only occur once in a Set. A Set can hold any value of any data type. 
St#2 Set looks as ordinary Ilist of data
St#3 Set.add
St#4 set from string
St#5 Set.forEach
St#6 Set.values()
St#7 Set.keys()
St#8 A Set has no keys, entries() returns [value,value] pairs instead of [key,value] pairs on Map.
St#9 Sets are Objects, typeof Set, instanceof Set
St#10 Iterating sets
St#11 Keys, Value, entries
St#12 Convert Set object to an Array object, with Array.from
St#13 Iteration with fileter
St#14 Use to remove duplicate elements from an array

4. Meta/Week.js

Wk#1 A WeakSet is a collection of garbage-collectable values, including objects and non-registered symbols. Example 1.
Wk#2 example 2
Wk#3 example 3
Wk#4 A WeakMap is a collection of key/value pairs whose keys must be objects or non-registered symbols, with values of any arbitrary JavaScript type, Example 1
Wk#5 WeakMap Example 2

Node

1. Node/AsyncHook.js

Ah#1 node:async_hooks, If Workers are used, each thread has an independent async_hooks interface, and each thread will use a new set of async IDs.
Ah#2 Asynchronous context example. The context tracking use case is covered by the stable API AsyncLocalStorage. 

2. Node/AsyncStateManagement.js
3. Node/CalcScriptTime.js

Tm#1 accuracy measure script working time with setTimeout(() => console.timeEnd())

4. Node/ConsoleRead.js

Cr#1 console input on node

5. Node/EventEmitter.js

Ee#1 emit events with EventEmitter.emit and process events
Ee#2 pass arguments

6. Node/EventLoop.js

El#1 JavaScript runtime collecting events, and executing queued sub-tasks of accumulated event
El#2 how Node call simple thread JS-program
El#3 IIFE function executed immediatelly, but callaback with setTimeout after all main stack calculation finished

7. Node/GlobalThis.js

print All Node.js global objects
Th#1 globalThis-getOwnNonenumerables 
Th#2 globalThis-getOwnEnumerables
Th#3 globalThis-getPrototypeNonenumerables
Th#4 globalThis-getPrototypeEnumerables

8. Node/JsonParse.js

Fs#1 Tab Session Manager parser

9. Node/LocalFS.js

Fs#2 local file read/write sync and async

10. Node/LongCalc.js

Tm#2 long calculation on worker_threads (separate threads)

11. Node/Process.js

Tp#1 print Node process list 

12. Node/Server.js

Ex#1 simple Express API REST server on port 3000

13. Node/SimplePropertyRetriever.js

Rw#1 Enumerability all properties

14. Node/WebWorker.js

Ww#1 worker threading

15. Node/WorkerThreads.js

Wt#1 start longcalculations and measure time console.end

Oop

1. Oop/Abstract.js

Ab#1 Abstract Method
Ab#2 Abstract Class

2. Oop/Class.js

Cl#1 encapsulation private field
Cl#2 get/set Accessor fields
Cl#3 Bound methods in classes this.x.bind(this), The value of 'this' in methods depends on their caller https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
also Example of Static constructor and  instanceof / @@hasInstance  see on In.js , Super.js, Function.js

3. Oop/Extend.js

Ex#1 private fields
Ex#2 A class's constructor can return a different object, which will be used as the new this for the derived class constructor. 
also see Prototype to extend

4. Oop/ExtendHTML.js

Eh#1 #masket from external using

5. Oop/InstanceOf.js

Tn#1 objects, defining constructor and check prototype chain with instanceof 
Tn#2 Re-assign `constructor.prototype` (you should  rarely do this in practice) and check prototype chain with instanceof 
Tn#3 string leieral vs String object
Tn#4 Objects created using Object.create() and check instanceof
Tn#5 Object with null prototype
Tn#6 Overriding the behavior of instanceof - static [Symbol.hasInstance] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof#overriding_the_behavior_of_instanceof
Tn#7 extends class with custom  instanceof method and check class chain

6. Oop/NewTarget.js

Nt#1 The new.target meta-property lets you detect whether a function or constructor was called using the new operator. new.target is guaranteed to be a constructable function value or undefined.
Nt#2 use new.target to check that class instantiated with new
Nt#3 extend Map (KeyValuePair from lib.es2015.collection.d.ts) with operation InsertOrUpdate

7. Oop/Private.js

Pv#1 You can use the in operator to check whether an externally defined object possesses a private property.
Pv#2 #privateField from the ClassWithPrivateField base class is private to ClassWithPrivateField and is not accessible from the derived Subclass
Pv#3 A class's constructor can return a different object, which will be used as the new this for the derived class constructor. 
Pv#4 Simulating private constructors

8. Oop/Prototype.js

Pt#1 Objects 
Pt#2 Array
Pt#3 Function
Pt#4 Constructor
Pt#5 Access to prototype getPrototypeOf/setPrototypeOf, __proto__ keyword
Pt#6 set prototype using Object.create
Pt#7 Using a prototype constructor with Object.assign
Pt#8 Own property
Pt#9 To build longer prototype chains, we can set the [[Prototype]] of Constructor.prototype via the Object.setPrototypeOf() function.
Pt#10 In class terms, this is equivalent to using the extends syntax.
Pt#11 With constructor functions
Pt#12 Object.create() creates a new object. The [[Prototype]] of this object is the first argument of the function:
Pt#13 The instanceof operator tests to see if the prototype property of a constructor appears anywhere in the prototype chain of an object

9. Oop/Super.js

Sp#1 super (MyBase in VB)
Sp#2 Setting super.prop sets the property on this instead
Sp#3 non-writable property
Sp#4 ReferenceError to super constructor

10. Oop/tracePrototypeChainOf.js

Pc#1 Trace Prototype Chain

Puppeteer

1. Puppeteer/Start.js

Pp#1

SimpleDataTypes

1. SimpleDataTypes/Bigint.js

Bg#1 bigint created by appending n to the end of an integer literal, or by calling the BigInt() function (without the new operator), Only use a BigInt value when values greater than 2^53 are reasonably expected.
Bg#2 Operation with Bigint - most do not permit operands to be of mixed types — both operands must be BigInt
Bg#3 compare Bigint with zero
Bg#4 comparisons with Object-wrapped BigInt
Bg#5 logical compare with Bigint
Bg#6 BigInt values aren't serialized in JSON by default, 
Bg#7 However, JSON.stringify() has toJSON() method
Bg#8 custom parser function of BigInt object
Bg#9 Transform string to BigNumber value on Json
Bg#10 example calculation with Bigint

2. SimpleDataTypes/DataTypes.js

Dt#1 Variables in JavaScript are not directly associated with any particular value type, and any variable can be assigned (and re-assigned) values of all types:
Dt#2 conversion of week types
Dt#3 NULL
Dt#4 See more in TypeOf.js 
Dt#5 Hexadecimal escape sequences
Dt#6 Unicode escape sequences
See more in TypeOf.js , TemplateString

3. SimpleDataTypes/Date.js

De#1 Date object is slightly smaller than the maximum safe integer (Number.MAX_SAFE_INTEGER, which is 9,007,199,254,740,991). A Date object can represent a maximum of ±8,640,000,000,000,000 milliseconds
De#2 now and New Date return milliseconds 
De#3 Get formatting parts of date (local and UTC), the same methods to Set
De#4 Date.parse string
De#5 Date time get formatting string result
De#6 measure interval

4. SimpleDataTypes/Numbers.js

Nm#1 JavaScript Numbers are Always 64-bit Floating Point
Nm#2 limits
Nm#3 JavaScript BigInt is a new datatype (ES2020) that can be used to store integer values that are too big to be represented by a normal JavaScript Number.
Nm#4 The JavaScript interpreter works from left to right. 
Nm#5 NaN - Not a Number
Nm#6 typeof NaN returns number:
Nm#7 operation with NaM
Nm#8 Infinity (or -Infinity) is the value JavaScript will return if you calculate a number outside the largest possible number.
Nm#9 hexadecimal preceded by 0x.
Nm#10 toString() method to output numbers from base 2 to base 36.
Nm#11 JavaScript Numbers as Objects
Nm#12 Note the difference between (x==y) and (x===y).
Nm#13 Comparing two JavaScript objects always returns false.
Nm#14 toFixed
Nm#15 Number ParseInt 
Nm#16 Number ParseFloat
Nm#17 function determines whether a value is NaN or not. Note: coercion inside the isNaN function has interesting rules. You may alternatively want to use Number.isNaN() to determine if the value is Not-A-Number.    
Nm#18 The global isFinite() function determines whether the passed value is a finite number. If needed, the parameter is first converted to a number. More robust Number.isFinite()

5. SimpleDataTypes/ParseIntAndFloat.js

Pi#1 The parseInt() parses a string argument and returns an integer of the specified radix (the base in mathematical numeral systems). Does not handle BigInt values and see Math.Trunc()
Pi#2 The parseFloat() function parses a string argument and returns a floating point number. 

6. SimpleDataTypes/TemplateString.js

Ts#1 escape char and long string 
Ts#2 Raw strings allows without processing escape sequences. 
Ts#3 template litheral on String.raw 
Ts#4 string array join
Ts#5 escape a backtick and dollar
Ts#6 Use backtick to create multiline string
Ts#7 String interpolation
Ts#8  Nesting templates
Ts#9 Tagged templates
Ts#10 The tag does not have to be a plain identifier. 
Ts#11 Nesting templates literal syntax and closures
Ts#12 For any particular tagged template literal expression, the tag function will always be called with the exact same literal array, no matter how many times the literal is evaluated.
Ts#13 passes literal array to String.raw
Ts#14 format this literal's content as HTML
Ts#15 Tagged templates and escape sequences \unicode

7. SimpleDataTypes/TypeConversrion.js

Cn#1 All type coercion algorithms look up this symbol on objects for the method that accepts a preferred type and returns a primitive representation of the object, before falling back to using the object's valueOf() and toString() methods 
Cn#2 An object with Symbol.toPrimitive property.
Cn#3 there's no strong preference for what the actual type should be. This is usually when a string, a number, or a BigInt are equally acceptable . Objects are converted to primitives by calling its [@@toPrimitive]() (with "default" as hint), valueOf(), and toString() methods, in that order.
Cn#4 Unary plus performs number coercion on its operand, which, for most objects without @@toPrimitive, means calling its valueOf()

8. SimpleDataTypes/TypeOf.js

Tf#1 typeof Numbers
Tf#2 typeof bigint
Tf#3 typeof Strings
Tf#4 typeof Booleans
Tf#5 typeof Symbols
Tf#6 typeof Undefined
Tf#7 typeof Objects, Array, new Date, new Boolean, new Number, new Strin
Tf#8 Functions
Tf#9 use Array.isArray or Object.prototype.toString.call to differentiate regular objects from arrays
Tf#10 Object.prototype.toString.call

9. SimpleDataTypes/Void.js

Vd#1 The void operator evaluates the given expression and then returns undefined. 
Vd#2 void console.log
Vd#3 iife console.log
Vd#4 void block executing function at all

Syntax

1. Syntax/Brackets.js

Ev#14 Using bracket accessors to access properties dynamically. 
Pr#1 computed property names
Ob#1 common Object syntax and initializer
Mp#5 Reformatting Array Objects
Sm#5 Symbols and for...in iteration
Sm#7 Symbol wrapper objects as property keys
Rg#2 Assignment with destructuring, Unpacking values from a regular expression with exec
Da#6 unpacking from any iterable
It#6 (5) array and parameters spreading ... from *[Symbol.iterator]() {}

2. Syntax/Comma.js

Co#1 assignment expression, not a declaration, previous expression before comma is discarded
Co#2 x = y = 3 - x value assign from y value, what assign from 3
Co#3 printing the values of the diagonal elements in the array - used string expression plus cycle with two variable, in this case coma is declaration
Co#4 Processing and then returning last value (x += 1, x) the same as ++x
Co#5 Comma and grouping operation in arrow function  [].map((x) => ((sum += x), x * x));
Co#6 the grouping operator still returns the reference, the comma operator returns a new value
Co#7 The comma operator always returns the last expression as a value instead of a reference. 

3. Syntax/Expression.js

Ep#1 function call like [x].forEach(y)
Ep#2 template literal `${x}`
Ep#3 Assignment operators like [x, ...y] = z  
Ep#4 increment operator like x++ or ++x
Ep#5 Delete statement 
Ep#6 Import statement
Ep#7 yield generator function 
Ep#8 yield* operator 

4. Syntax/Group.js

Gr#1 In an arrow function expression body (one that directly returns an expression without the keyword return),  the grouping operator can be used to return an object literal expression
Gr#2 since when the parser sees the left parenthesis, it knows that what follows must be an expression instead of a declaration.
Gr#2 using for without block
Gr#3 Empty statement
Gr#4 Assign all array values to 0 with empty statement, Using a block statement to encapsulate data
Gr#5 Many style guides recommend putting additional parentheses as a grouping operator around the assignment:
Gr#6 code inside braces ({}) is parsed as a sequence of statements, where foo is a label, not a key in an object literal. To fix this, wrap the object literal in parentheses:

5. Syntax/Jsdoc.js

Ab#2 jsdoc comment 

6. Syntax/Semicolon.js

Sl#1 Automatically insert semiclon. This code  return undefined, because a semicolon is inserted directly after the return keyword, without evaluating a + b

ThisContext

1. ThisContext/Closure.js

Cs#1 What is closure 
Cs#2 var are either function-scoped or global-scoped. This can be tricky, because blocks with curly braces do not create scopes
Cs#3 let and const allow you to create block-scoped variables
Cs#4 makeAdder is a function factory, the function factory creates two new functions—one that adds five to its argument, and one that adds 10.
Cs#5 Emulating private methods with closures, in this example each closure had its own lexical environment
Cs#6 The shared lexical environment is created in the body of an anonymous function, which is executed as soon as it has been defined (also known as an IIFE).
Cs#7 Every closure has three scopes: Local scope (Own scope), Enclosing scope (can be block, function, or module scope), Global scope
Cs#8 the same without anonimous functions
Cs#9 Closures can capture variables in block scopes and module scopes as well, For example, the following creates a closure over the block-scoped variable y
Cs#10 Closures over modules can be more interesting.....

2. ThisContext/Scope.js

Se#1 what is scope
Se#2 var declarations are globally scoped or function/locally scoped.
Se#3 let is block scoped, Unlike var which is initialized as undefined, the let keyword is not initialized
Se#4 let can be updated but not re-declared.
Se#5 const declarations are block scoped, const cannot be updated or re-declared

3. ThisContext/This.js

Ti#1 What is this?
Ti#2 this in strict mode (compare result with StrictModeOff)
Ti#3 this will be a primitive value as well — but only if the function is in strict mode.
Ti#4 Callbacks are typically called with a this value of undefined (calling it directly without attaching it to any object), which means if the function is non–strict
Ti#5 Callbacks with parameters
Ti#6 In arrow functions when evaluating an arrow function's body, the language does not create a new this binding
Ti#7 In arrow function this is bound to what it was when the function was created
Ti#8 bind() method has to be used to prevent losing this.
Ti#9 this with a getter or setter

Comments ( )