Show Menu
Cheatography
This is a draft cheat sheet. It is a work in progress and is not finished yet.

Basics

On page script:
<script type="text/javascript">  ... </script>

Include  External script:
<script src="filename.js"></script>

Deter
Use deter so that the JavaScript doesn't execute until after the DOM is loaded
<script src="script.js" defer></script>

Comments:
/* Multi line
   comment */
// One line
 Outputs:
console.log(a);             // write to the browser console
document.write(a);          // write to the HTML
alert(a);                   // output in an alert box
confirm("Really?");         // yes/no dialog, returns true/false depending on user click
prompt("Your age?","0");    // input dialog. Second argument is the initial value

Data Types

var age = 18;                           // number 
var name = "Jane";                      // string
var name = {first:"Jane", last:"Doe"};  // object
var truth = false;                      // boolean
var sheets = ["HTML","CSS","JS"];       // array
var a; typeof a;                        // undefined
var a = null;                           // value null
Symbol type???

 Objects:
var student = {                 // object name
    firstName:"Jane",           // list of properties and values
    lastName:"Doe",
    age:18,
    height:170,
    fullName : function() {     // object function
       return this.firstName + " " + this.lastName;
    }
}; 

student.age = 19;           // setting value (add a property)
student[age]++;             // incrementing
delete student.age;           // delete a property
name = student.fullName();  // call object function
iterating:
for (key in object){
object[key];
}

Data Types evaluation

'' == '0' // false
'' == 0 // true
0 == '0' // true
NaN == NaN // false
[''] == '' // true
false == undefined // false
false == null // false
null == undefined // true

'' === '0' // false
'' === 0 // false
0 === '0' // false
NaN == NaN // still weirdly false
[''] === '' // false
false === undefined // false
false === null // false
null === undefined // false

Dom Elements

Access an HTML element
document.querySelector('css selector');
document.querySelectorAll('css selector');
document.getElementById("elementID").innerHTML = "Hello World!";
example:
let element = document.querySelector('#button');
let allElements = document.querySelectorAll('css selector');
let elems = document.querySelectorAll('.quote, .comment'); // that have a 
"quote" class AND all elements that have a "comment" class.

element.style.top = '20px';
element.style.

Adding event listeners
Use dom function:
addEventListener(event name, function name);

Access attributes
you can't access the class attribute via object.class
const image = document.querySelector('img');
image.src ='somthing.jpg';
but you can't access the class attribute via object.class

Access class attribute
classList.add and classList.remove:
const image = document.querySelector('img');
image.classList.add('active');
image.classList.remove('hidden');

innerHTML: The raw HTML between the starting and ending tags of an element, as a string
textContent: The text content of a node and its descendants. (This property is inherited from Node)

 Create and remove elements 
element = document.createElement(tag string)
element = document.createElement('h1')
containerElement.appendChild(element);
element.remove();

Style
Every element has a style attribute which has higher precedence than any css file. 
element.style.font = 'something'
To undo a style set via the style attribute, you can set it to the empty string, the element will be styled according to any rules in the CSS file
element.style.font = ''

Condit­ionals

if else
if ((age >= 14) && (age < 19)) {        // logical condition
    status = "Eligible.";               // executed if condition is true
} else {                                // else block is optional
    status = "Not eligible.";           // executed if condition is false
}
Switch statement:
switch (new Date().getDay()) {      // input is current day
    case 6:                         // if (day == 6)
        text = "Saturday";          
        break;
    case 0:                         // if (day == 0)
    case 1:                         // if (day == 1)
        text = "Sunday";
        break;
    default:                        // else...
        text = "Whatever";
} 

? statements:
a = (condition) ? (cond_true_result) : (cond_false_result);

Numbers and Math

var pi = 3.141;
pi.toFixed(0);          // returns 3
pi.toFixed(2);          // returns 3.14 - for working with money
pi.toPrecision(2)       // returns 3.1
pi.valueOf();           // returns number
Number(true);           // converts to number
Number(new Date())      // number of milliseconds since 1970
parseInt("3 months");   // returns the first number: 3
parseFloat("3.5 days"); // returns 3.5
Number.MAX_VALUE        // largest possible JS number
Number.MIN_VALUE        // smallest possible JS number
Number.NEGATIVE_INFINITY// -Infinity
Number.POSITIVE_INFINITY// Infinity

Math
var pi = Math.PI;       // 3.141592653589793
Math.round(4.4);        // = 4 - rounded
Math.round(4.5);        // = 5
Math.pow(2,8);          // = 256 - 2 to the power of 8
Math.sqrt(49);          // = 7 - square root 
Math.abs(-3.14);        // = 3.14 - absolute, positive value
Math.ceil(3.14);        // = 4 - rounded up
Math.floor(3.99);       // = 3 - rounded down
Math.sin(0);            // = 0 - sine
Math.cos(Math.PI);      // OTHERS: tan,atan,asin,acos,
Math.min(0, 3, -2, 2);  // = -2 - the lowest value
Math.max(0, 3, -2, 2);  // = 3 - the highest value
Math.log(1);            // = 0 natural logarithm 
Math.exp(1);            // = 2.7182pow(E,x)
Math.random();          // random number between 0 and 1
Math.floor(Math.random() * 5) + 1;  // random integer, from 1 to 5

Constants:
 E, PI, SQRT2, SQRT1_2, LN2, LN10, LOG2E, Log10E

JSON

var str = '{"names":[' +                    // crate JSON object
'{"first":"Hakuna","lastN":"Matata" },' +
'{"first":"Jane","lastN":"Doe" },' +
'{"first":"Air","last":"Jordan" }]}';
obj = JSON.parse(str);                      // parse
document.write(obj.names[1].first);         // access

Send:
var myObj = { "name":"Jane", "age":18, "city":"Chicago" };  // create object
var myJSON = JSON.stringify(myObj);                         // stringify
window.location = "demo.php?x=" + myJSON;                   // send to php

Store:
myObj = { "name":"Jane", "age":18, "city":"Chicago" };
myJSON = JSON.stringify(myObj);                 // storing data
localStorage.setItem("testJSON", myJSON);   
////
text = localStorage.getItem("testJSON");        // retrieving data 
obj = JSON.parse(text);
document.write(obj.name);

Errors

try {                           // block of code to try
    undefinedFunction();
}
catch(err) {                    // block to handle errors
    console.log(err.message);
}

Throw Error
throw "My error message";    // throw a text

Input Validation
var x = document.getElementById("mynum").value; // get input value
try { 
    if(x == "")  throw "empty";                 // error cases
    if(isNaN(x)) throw "not a number";
    x = Number(x);
    if(x > 10)   throw "too high";
}
catch(err) {                                    // if there's an error
    document.write("Input is " + err);          // output error
    console.error(err);                         // write the error in console
}
finally {
    document.write("</br />Done");              // executed regardless of the try / catch result
}

Error name values

RangeError A number is "out of range"
ReferenceError An illegal reference has occurred
SyntaxError A syntax error has occurred
TypeError A type error has occurred
URIError An encodeURI() error has occurred

Cite

Got from http:/­/ht­mlc­hea­tsh­eet.co­m/js/ with custom­iza­tions

Event types

Mouse
onclick, oncontextmenu, ondblclick, onmousedown, onmouseenter, onmouseleave, onmousemove(only desktop), onmouseover, onmouseout, onmouseup
mouseEvent.clientX, mouseEvent.clientY: X|Y axis position relative to the left edge of the browser viewpoint

Touch
ontouchcancel, ontouchend, ontouchmove(only mobile), ontouchstart 

PointerEvent 
(not for all browser can be used with   polyfill) available with the following script:
<script src="https://code.jquery.com/pep/0.4.1/pep.js"></script>
And we'll add need to add touch-action="none" to the area where we want PointerEvents to be recognized (telling the browser that we do not want the default touch behavior for children of this element).

Works the same both on mobile and desktop
pointerdown, pointerup, pointermove(works both on mobile and desktop), pointercancel

To listen to pointer events that occur when the pointer goes offscreen, call setPointerCapture on the target you want to keep tracking:
event.target.setPointerCapture(event.pointerId);

Keyword
 onkeydown, onkeypress, onkeyup 
keywordEvent.key: which key was pressed:
Escape, ArrowRight, ArrowLeft, ...



Frame
 onabort, onbeforeunload, onerror, onhashchange, onload, onpageshow, onpagehide, onresize, onscroll, onunload 

Form
 onblur, onchange, onfocus, onfocusin, onfocusout, oninput, oninvalid, onreset, onsearch, onselect, onsubmit 

Drag
 ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop 

Clipboard
 oncopy, oncut, onpaste 

Media
 onabort, oncanplay, oncanplaythrough, ondurationchange, onended, onerror, onloadeddata, onloadedmetadata, onloadstart, onpause, onplay, onplaying, onprogress, onratechange, onseeked, onseeking, onstalled, onsuspend, ontimeupdate, onvolumechange, onwaiting 

Animation
 animationend, animationiteration, animationstart 

Miscellaneous
 transitionend, onmessage, onmousewheel, ononline, onoffline, onpopstate, onshow, onstorage, ontoggle, onwheel

Working with Events

Adding event listeners
Use dom function:
addEventListener(event name, function name);

 Access caller element inside callback
event.target; //the element that was clicked /
"dispatched the event" (might be a child of the target)
event.currentTarget; // the element that the original event handler was attached to)

also 'this' refer to event in callback

Event propagation
If a child and a parent element exist that have different callbacks to events, and inner element is clicked, both events are called. This is called event bubbling.

<div id="outer">
  Click me!
  <div id="inner">
    No, Click me!
  </div>
</div>
innerElem.addEventListener('click', innerCallback);
outerElem.addEventListener('click', oute/rCallback);

if inner element is called, outer and inner callbacks will be fired.

event.stopPropagation() method inside callback can prevent further propagation of event to outer callbacks.

the propagation can go in opposite direction (called event capturing) by setting additional parameter for addEventListener.
event.addEventListener('click', onClick, { capture: true} );

prevent default
There's a default behavior for some events that can be prevented using preventDefault method.
function onCallback(event){
event.preventDefault();
}

Random number

Use Math.random: returns a random floating point number between [0, 1)
To get a random number in [0, maxNumber):
Math.floor(Math.random() * Max)

Data attributes

You can assign special data-* attributes to HTML elements to give associate additional data with the element
<tag data-your-name='your value"> </tag>
to access in javascript:
tagElement.dataset.YourName
Dash-separated words turn to camel case and are returned as string

Global functions

eval();                     // executes a string as if it was script code
String(23);                 // return string from number
(23).toString();            // return string from number
Number("23");               // return number from string
decodeURI(enc);             // decode URI. Result: "my page.asp"
encodeURI(uri);             // encode URI. Result: "my%page.asp"
decodeURIComponent(enc);    // decode a URI component
encodeURIComponent(uri);    // encode a URI component
isFinite();                 // is variable a finite, legal number
isNaN();                    // is variable an illegal number
parseFloat();               // returns floating point number of string
parseInt();                 // parses a string and returns an integer

Dates

Thu Mar 22 2018 11:40:54 GMT+0430 (+0430)

var d = new Date();

1521702654616 miliseconds passed since 1970

Number(d) 

Date("2017-06-23");                 // date declaration
Date("2017");                       // is set to Jan 01
Date("2017-06-23T12:00:00-09:45");  // date - time YYYY-MM-DDTHH:MM:SSZ
Date("June 23 2017");               // long date format
Date("Jun 23 2017 07:45:00 GMT+0100 (Tokyo Time)"); // time zone

Get Dates:
Thu Mar 22 2018 11:40:54 GMT+0430 (+0430)

var d = new Date();

1521702654616 miliseconds passed since 1970

Number(d) 

Date("2017-06-23");                 // date declaration
Date("2017");                       // is set to Jan 01
Date("2017-06-23T12:00:00-09:45");  // date - time YYYY-MM-DDTHH:MM:SSZ
Date("June 23 2017");               // long date format
Date("Jun 23 2017 07:45:00 GMT+0100 (Tokyo Time)"); // time zone


Setting part of a date:
var d = new Date();
d.setDate(d.getDate() + 7); // adds a week to a date

setDate();          // day as a number (1-31)
setFullYear();      // year (optionally month and day)
setHours();         // hour (0-23)
setMilliseconds();  // milliseconds (0-999)
setMinutes();       // minutes (0-59)
setMonth();         // month (0-11)
setSeconds();       // seconds (0-59)
setTime();          // milliseconds since 1970)

Regular Expres­sions

Promises

An object used to manage asynchronous results. 
has a then() method that lets you attach functions to execute onSuccess and onError callbacks.
Allows you to build chains of asynchronous results.

Local Storage

 

Variables

var a;                          // Function scope variable
let al;                          // block scope variable
const ca;                          // block scope constant, cannot be changed. However, it doesn't provide true const correctness, so you can still modify the underlying object so:
const list = [1, 2, 3];
list.push(4); // OK

var b = "init";                 // string
var c = "Hi" + " " + "Joe";     // = "Hi Joe"
var d = 1 + 2 + "3";            // = "33"
var e = [2,3,5,8];              // array
var f = false;                  // boolean
var g = /()/;                   // RegEx
var h = function(){};           // function object
const PI = 3.14;                // constant
var a = 1, b = 2, c = a + b;    // one line
let z = 'zzz';                  // block scope local variable

Strict mode
"use strict";   // Use strict mode to write secure code
x = 1;          // Throws an error because variable is not declared

Operators

Values
false, true                     // boolean
18, 3.14, 0b10011, 0xF6, NaN    // number
"flower", 'John'                // string
undefined, null , Infinity      // special

Operators
a = b + c - d;      // addition, substraction
a = b * (c / d);    // multiplication, division
x = 100 % 48;       // modulo. 100 / 48 remainder = 4
a++; b--;           // postfix increment and decrement

Bitwise operators
& 	AND  	 5 & 1 (0101 & 0001)	1 (1)
| 	OR  	 5 | 1 (0101 | 0001)	5 (101)
 	NOT  	  5 (~0101)	10 (1010)
 	XOR  	 5  1 (0101 ^ 0001)	4 (100)
<< 	left shift  	 5 << 1 (0101 << 1)	10 (1010)
>> 	right shift  	 5 >> 1 (0101 >> 1)	2 (10)
>>> 	zero fill right shift  	 5 >>> 1 (0101 >>> 1)	2 (10)

Asthmatics:
a * (b + c)         // grouping
person.age          // member
person[age]         // member
!(a == b)           // logical not
a != b              // not equal
typeof a            // type (number, object, function...)
x << 2  x >> 3      // minary shifting
a = b               // assignment
a == b              // equals
a != b              // unequal
a === b             // strict equal
a !== b             // strict unequal
a < b   a > b       // less and greater than
a <= b  a >= b      // less or equal, greater or eq
a += b              // a = a + b (works with - * %...)
a && b              // logical and
a || b              // logical or

Strings

var abc = "abcdefghijklmnopqrstuvwxyz";
var esc = 'I don\'t \n know';   // \n new line
var len = abc.length;           // string length
abc.indexOf("lmno");            // find substring, -1 if doesn't contain 
abc.lastIndexOf("lmno");        // last occurance
abc.slice(3, 6);                // cuts out "def", negative values count from behind
abc.replace("abc","123");       // find and replace, takes regular expressions
abc.toUpperCase();              // convert to upper case
abc.toLowerCase();              // convert to lower case
abc.concat(" ", str2);          // abc + " " + str2
abc.charAt(2);                  // character at index: "c"
abc[2];                         // unsafe, abc[2] = "C" doesn't work
abc.charCodeAt(2);              // character code at index: "c" -> 99
abc.split(",");                 // splitting a string on commas gives an array
abc.split("");                  // splitting on characters
128.toString(16);               // number to hex(16), octal (8) or binary (2)

Functions

Declaration
functions in JavaScript are "first-class" because they are treated like any other variable/object.

function hello(input) {
// body
}

hello = (input)  => {
// body
} 
// you can omit {} if there is only one statement:
// you can omit () if there is only one argument
hello = input => input + 1;
var hello = function hello(input) { // body }

this scope inside functions


functions:
this is will be dynamically assigned to a different value depending on how the function is called (unless explicitly bound with bind)
- this in a constructor: refers to the new object being
created
- this outside a constructor: refers to a different value
depending on how the function is called
  - In response to a DOM event, this is the element
  that the event handler was tied to
  - When called in a method, this is the object that
  the method is called from
- bind: sets the value of this for a function so it does
not change depending on the context



Arrow functions link:
Arrow functions capture the this value of the enclosing context.
Arrow function syntax uses “lexical scoping”. Lexical scoping is fancy way of saying it uses “this” from the surrounding code… the code that contains the code in question.
Arrow functions do not have their own this.
arrow functions cannot be used as generators (yeild does not work unless for further nested function)
this.test = "attached to the module";

var foo = {
  test: "attached to an object"
};

foo.method = function(name, cb){
  this[name] = cb;
};

foo.method("bar", () => {
  // not what you expected, maybe?
  console.log(this.test); 
});

foo.bar(); // => "attached to an object" but it was expected to be madule!

As another example:

var obj = {
  i: 10,
  b: () => console.log(this.i, this),
  c: function() {
    console.log(this.i, this);
  }
}

obj.b(); // prints undefined, Window {...} (or the global object)
obj.c(); // prints 10, Object {...}


this inside object as function:
obj = { 'a': 12, f: function(){ console.log(this.a)}}; obj.f() // => 12
this inside object as arrow function:
obj = { 'a': 12, f: () => { console.log(this.a)}}; obj.f(); // => undefined.
or:
a = 1; obj = { 'a': 12, f: () => { console.log(this.a)}}; obj.f(); // => 1

 functional programming:
- First-class functions (functions as objects)
- Closures
- Anonymous functions / lambdas / function literals
- Currying

Hoisted declaration
Some function declaration are hoisted. definition gets moved to the top of the scope in which it's defined. So this works:
hello()
function hello() { // ,,, }

These kind of declaration are not hoisted:

closures
A function declared within a function is also known as a closure. Inner functions are called closures

function outerFunc() {
 function innerFunc() {
 // closures
 }
}

Scope:
Functions declared with function (or var) have function scope
Functions declared with const or let have block scope

Access to outer function variables
closures have access to variables declared in outer function and those variables does not go away! (remains and can be even changed!!). It's like a function pointer but local variables of outer function remained and are not destroyed.
f = function outerFunction(){
 let x = 1;
 return function(){
 x = x + 1;
 console.log(x);
 }
}
run = f();
run(); // 2
run(); // 3
run(); // 4

curryng
The idea of constructing a new function that is "partially instantiated" with arguments is called currying.
Constructing a new function that references part of the outer function's parameters is called currying.
for example when one function needs additional argument and we can't add another argument to it (it's not expected to have another one!), we can use currying. we can have a function that accepts that additional argument and have another function (a closure) which has expected arguments:

we want a function with 2 arguments to have another argument: 
somthing.add(twoArgumentFunc)
function makeTwoArgument(anotherArg){
  return function(){
    // use anotherArg in here 
    // It's like having 3 arguments!
  }
}
=> somthing.add(makeTwoARgument(anotherArg));

 Anonymous function 
When we define a function without an identifier, we call it an anonymous function

return function() {
 //this is anonymous function
}

Arrays

var dogs = ["Bulldog", "Beagle", "Labrador"]; 
var dogs = new Array("Bulldog", "Beagle", "Labrador");  // declaration

alert(dogs[1]);             // access value at index, first item being [0]
dogs[0] = "Bull Terier";    // change the first item

for (var i = 0; i < dogs.length; i++) {     // parsing with array.length
    console.log(dogs[i]);
}

Methods:
dogs.toString();                        // convert to string: results "Bulldog,Beagle,Labrador"
dogs.join("  ");                       // join: "Bulldog  Beagle * Labrador"
dogs.pop();                             // remove last element
dogs.push("Chihuahua");                 // add new element to the end
dogs[dogs.length] = "Chihuahua";        // the same as push
dogs.shift();                           // remove first element
dogs.unshift("Chihuahua");              // add new element to the beginning
delete dogs[0];                         // change element to undefined (not recommended)
dogs.splice(2, 0, "Pug", "Boxer");      // add elements (where, how many to remove, element list)
var animals = dogs.concat(cats,birds);  // join two arrays (dogs followed by cats and birds)
dogs.slice(1,4);                        // elements from [1] to [4-1]
dogs.sort();                            // sort string alphabetically
dogs.reverse();                         // sort string in descending order
x.sort(function(a, b){return a - b});   // numeric sort
x.sort(function(a, b){return b - a});   // numeric descending sort
highest = x[0];                         // first item in sorted array is the lowest (or highest) value
x.sort(function(a, b){return 0.5 - Math.random()});     // random order sort
splice // Add/remove element at index
list.splice(startIndex, deleteCount, item1, item2, ...)
list.splice(3, 1) //Remove one element at index 3:
list.splice(2, 0, element); //Add element at index 2:

list.forEach(function): Executes the provided function once for each array element.
list.filter(function): Creates a new array with all elements that pass the test implemented by the provided function.
list.every(function) : Tests whether all elements in the array pass the test implemented by the provided function

others:
 concat, copyWithin, every, fill, filter, find, findIndex, forEach, indexOf, isArray, join, lastIndexOf, map, pop, push, reduce, reduceRight, reverse, shift, slice, some, sort, splice, toString, unshift, valueOf

Loops

 For Loops:
for (var i = 0; i < 10; i++) {
    document.write(i + ": " + i*3 + "<br />");
}
var sum = 0;
for (var i = 0; i < a.length; i++) {
    sum + = a[i];
}               // parsing an array

 For each
for ( var i in something){
  console.log(something[i]);
}

 While Loops:
var i = 1;                      // initialize
while (i < 100) {               // enters the cycle if statement is true
    i *= 2;                     // increment to avoid infinite loop
    document.write(i + ", ");   // output
}


 Do While Loops:
var i = 1;                      // initialize
do {                            // enters cycle at least once
    i *= 2;                     // increment to avoid infinite loop
    document.write(i + ", ");   // output
} while (i < 100)               // repeats cycle if statement is true at the end


 Break:
for (var i = 0; i < 10; i++) {
    if (i == 5) { break; }          // stops and exits the cycle
    document.write(i + ", ");       // last output number is 4
}


 Continue:
for (var i = 0; i < 10; i++) {
    if (i == 5) { continue; }       // skips the rest of the cycle
    document.write(i + ", ");       // skips 5
}

Classes

Definition
class ClassName{
  constructor(){ //it's optional
    // define public fields by setting this.fieldName
    // in constructor or any method
    this.fieldName = value; 
    
  }
  
  methodName(){ //don't need to use function keyword
    //all methods are public - no private method yet
    // convention: _ before the name means private
  }

  methodTwo(){
  //always refer to other methods or fields in class with this
    this.methodName();
     
  }
}


Element as a class
Use class that gets Container element as input for constructor
Definition
class ClassName{
  constructor(containerElement){ 
    this.containerElem = containerElement;
    
    //Create element:
    this.image = document.createElement('img');
    this.image.src = 'image.jpg';
    this.image.addEventListener('click', this._clickElement)
    
  }
  
  _clickElement(event){ 
    // do some thing   
  }
}

Binding this 
This in here refers to the element that the event handler was attached to! 
to make this always refer to the instance object for a method in the class we use bind
for above example:

first bind this in the constructor:
 constructor(containerElement){ 
 // always bind event listeners in the constructor
  this._clickElement = this._clickElement.bind(this); 
 }
then use this as expected:
clickElement(event){ 
// now this refer to the class object not event element!
    this.image.src = 'image2.jpg'; 
}

another solution was to access the element with event.currentTarget
Instantiation
const x = new SomeClass();
const y = new SomeClass();
y.someMethod();

Custom events

You can listen to and dispatch (fire) Custom Events.
const event = new CustomEvent(eventNameString, optionalParameterObject);
element.addEventListener(eventNameString);
element.dispatchEvent(eventNameString);
CustomEvent can only be listened to /dispatched on HTML elements, and not to arbitrary class instances.

Communicating between element
You can add custom event on the document and dispatch that event inside different element. 
document.addEventListerner( ...
document.dispatchEvent(...

to add additional information about the event you can pass parameter to the custom event:
onClick(event) {
 const eventInfo = {
 buttonName = this.text;
 }
 document.dispatchEvent( new CustomEvent('bclicked', { detail: eventinfo});

}

onCustomEven(event) {
event.detail.buttonName; // can access info
}

Template literals

Template literals allow you to embed expressions in
JavaScript strings
const port = 80;
console.log(
Server is listening on port: ${port}
);

async/­await

Fetch

The API to use to load external resources (text, JSON, etc) in the browser (like XHR but easier to use)
- It has only one function: fetch
- takes string path to the resource as argument
- return a promise
Fetch api:

function onSuccess(response) {
...
}
function onFail(response) {
...
}
fetch('images.txt').then(onSuccess, onFail);
or
const promise = fetch('images.txt');
promise.then(onSuccess, onFail);