(FRONT) FRONT (2021)

Javascript tests

Array

  1. Array/Array.js
  2. 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
    
  3. Array/ArrayLikeObjects.js
  4. 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
    
  5. Array/ArrayLoop.js
  6. 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
    
  7. Array/ArrayTyped.js
  8. 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
  2. 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
    
  3. Async/AsyncCallback.js
  4. Ac#1 callback stack
    Ac#2 serius of callback. A middleware function will return another function, and a terminator function will invoke the callback. 
    
  5. Async/AsyncFunction.js
  6. Af#1 Await is Promise
    Af#2 Async functions and execution order
    Af#3 always Use Promise.all instead awaiting many results
    
  7. Async/AsyncFunctionAsterisk.js
  8. 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 
    
  9. Async/Await.js
  10. 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.
    
  11. Async/Fetch.js
  12. 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 
    
  13. Async/ForAwaitOf.js
  14. 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.
    
  15. Async/Promise.js
  16. 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
    
  17. Async/PromiseAsPrm.js
  18. Pb#1 this function accept promise as prm
    Pb#2 create Promise from any value
    Pb#3 created rejected Promise
    
  19. Async/PromiseChain.js
  20. 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        
    
  21. Async/PromiseLocalFS.js
  22. Lf#1 synchronous reading node specific
    Lf#2 wrap synchronous reading to promise task 
    Lf#3 standard asynchronous reading 
    
  23. Async/PromiseWaitAll.js
  24. 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 
    
  25. Async/PromiseWaitAny.js
  26. Pa#1 start on Promise WaitAll
    
  27. Async/SyncCallback.js
  28. Sc#1 async function show the same time because it invoke synchronously
    
  29. Async/Timeout.js
  30. Tt#1 Promise timeout merge to one
    

Basic

  1. Basic/Clone.js
  2. 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)
    
  3. Basic/Compare.js
  4. 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
    
  5. Basic/Delete.js
  6. Dl#1 delete and the prototype chain
    Dl#2 delete global this (don't working in strict mode) 
    
  7. Basic/DestructuringAssignment.js
  8. 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
    
  9. Basic/Eval.js
  10. 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
    
  11. Basic/In.js
  12. 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
    
  13. Basic/NullishAndChaining.js
  14. 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
    
  15. Basic/Object.js
  16. 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
    
  17. Basic/PredefinedFunctions.js
  18. 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
    
  19. Basic/Property.js
  20. 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 ...  
    
  21. Basic/StrictModeOff.js
  22. 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
    
  23. Basic/Xhr2.js
  24. Xr#1 use XMLHttpRequest 
    

ControlFlow

  1. ControlFlow/DoWhile.js
  2. 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())) {}
    
  3. ControlFlow/Goto.js
  4. Gt#1 Goto on Continue 
    Gt#2 Goto on Break for
    
  5. ControlFlow/Other.js
  6. Ot#1 nested ternary operator
    Ot#2 Break on block {}
    Ot#3 switch 
    Ot#4 for-each loop
    

Function

  1. Function/ArrowFunction.js
  2. 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
    
  3. Function/ExecuteFunctionAsLiteral.js
  4. Fl#1 execute function as literal
    
  5. Function/Function.js
  6. 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
    
  7. Function/FunctionApplyBindCall.js
  8. 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,
    
  9. Function/FunctionCallback.js
  10. Fk#1 callback function on map
    Fk#2 Callback with Rest parameters
    
  11. Function/FunctionClosure.js
  12. 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
    
  13. Function/FunctionPrototype.js
  14. Fp#1 The function with custom prototype
    
  15. Function/FunctionReference.js
  16. Fe#1 function can apply to any array elements, pass function reference as parameter
    
  17. Function/ImmediatelyInvokedFunction.js
  18. Fi#1 Immediately Invoked Function Expression
    Fi#2 IIFE with arrow Function
    Fi#3 Async IIFE
    
  19. Basic/NewFunction.js
  20. 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
    
  21. Function/UseArguments.js
  22. 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
  2. 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 
    
  3. DataTypes/RegExp.js
  4. Rg#1 Matching duplicate words with text.match
    Rg#2 Assignment with destructuring, Unpacking values from a regular expression with exec
    
  5. DataTypes/Symbol.js
  6. 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
  14. Dm#1 Create Html dom with jsdom
    
  15. Html/HtmlDom2.js
  16. Dm#2 Create Html dom with html-element, return Promise
    
  17. Html/IIFE-SortTable.html
  18. Html/Index.html
  19. Html/LocalStorage.txt
  20. Html/PostForms.html
  21. Html/Transitions.txt
  22. Html/VideoAudio.txt
  23. Html/WebGL.txt
  24. Html/Webworker.txt

Iterator

  1. Iterator/ForIn.js
  2. 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.
    
  3. Iterator/ForOf.js
  4. 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 
    
  5. Iterator/Generator.js
  6. 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 
    
  7. Iterator/Iterator.js
  8. 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 
    
  9. Iterator/Spread.js
  10. 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
  2. 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
    
  3. Meta/ProxyReflect.js
  4. 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
    
  5. Meta/Set.js
  6. 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
    
  7. Meta/Week.js
  8. 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
  2. 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. 
    
  3. Node/AsyncStateManagement.js
  4. 
    
  5. Node/CalcScriptTime.js
  6. Tm#1 accuracy measure script working time with setTimeout(() => console.timeEnd())
    
  7. Node/ConsoleRead.js
  8. Cr#1 console input on node
    
  9. Node/EventEmitter.js
  10. Ee#1 emit events with EventEmitter.emit and process events
    Ee#2 pass arguments
    
  11. Node/EventLoop.js
  12. 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
    
  13. Node/GlobalThis.js
  14. print All Node.js global objects
    Th#1 globalThis-getOwnNonenumerables 
    Th#2 globalThis-getOwnEnumerables
    Th#3 globalThis-getPrototypeNonenumerables
    Th#4 globalThis-getPrototypeEnumerables
    
  15. Node/JsonParse.js
  16. Fs#1 Tab Session Manager parser
    
  17. Node/LocalFS.js
  18. Fs#2 local file read/write sync and async
    
  19. Node/LongCalc.js
  20. Tm#2 long calculation on worker_threads (separate threads)
    
  21. Node/Process.js
  22. Tp#1 print Node process list 
    
  23. Node/Server.js
  24. Ex#1 simple Express API REST server on port 3000
    
  25. Node/SimplePropertyRetriever.js
  26. Rw#1 Enumerability all properties
    
  27. Node/WebWorker.js
  28. Ww#1 worker threading
    
  29. Node/WorkerThreads.js
  30. Wt#1 start longcalculations and measure time console.end
    

Oop

  1. Oop/Abstract.js
  2. Ab#1 Abstract Method
    Ab#2 Abstract Class
    
  3. Oop/Class.js
  4. 
    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
    
  5. Oop/Extend.js
  6. 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
    
  7. Oop/ExtendHTML.js
  8. Eh#1 #masket from external using
    
  9. Oop/InstanceOf.js
  10. 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
    
  11. Oop/NewTarget.js
  12. 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
    
  13. Oop/Private.js
  14. 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
    
  15. Oop/Prototype.js
  16. 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
    
  17. Oop/Super.js
  18. 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
    
  19. Oop/tracePrototypeChainOf.js
  20. Pc#1 Trace Prototype Chain
    
    

Puppeteer

  1. Puppeteer/Start.js
  2. Pp#1
    

SimpleDataTypes

  1. SimpleDataTypes/Bigint.js
  2. 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
    
  3. SimpleDataTypes/DataTypes.js
  4. 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
    
  5. SimpleDataTypes/Date.js
  6. 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
    
  7. SimpleDataTypes/Numbers.js
  8. 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()
    
  9. SimpleDataTypes/ParseIntAndFloat.js
  10. 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. 
    
  11. SimpleDataTypes/TemplateString.js
  12. 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
    
  13. SimpleDataTypes/TypeConversrion.js
  14. 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()
    
  15. SimpleDataTypes/TypeOf.js
  16. 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
    
  17. SimpleDataTypes/Void.js
  18. 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
  2. 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]() {}
    
  3. Syntax/Comma.js
  4. 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. 
    
  5. Syntax/Expression.js
  6. 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 
    
  7. Syntax/Group.js
  8. 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:
    
  9. Syntax/Jsdoc.js
  10. Ab#2 jsdoc comment 
    
  11. Syntax/Semicolon.js
  12. 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
  2. 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.....
    
  3. ThisContext/Scope.js
  4. 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
    
  5. ThisContext/This.js
  6. 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 ( )
Link to this page: http://www.vb-net.com/JsTest/Index.htm
< THANKS ME>