JavaScript

Iterables

DATA TYPES

Number (decimals and whole numbers)
BigInt (x > +/- 2^53 -1 )
String
Boolean
Null (ie. let age = null;)
Undefined (ie. let age;)
Object (arrays etc...)
Symbols (unique identifiers for objects)
typeof x or typeof (x) returns a string with the name of the data type of x. For null, it returns "object".

INTERACTION

alert("Hello"); - shows a message and waits for the user to press "OK".
result = prompt(title, [default]); - input field for user and buttons OK/Cancel. title is text to show, default is optional 2nd argument for initial value for the input field. []'s around default means its optional. The input is stored into result.
result = confirm(question); - shows text question and has two buttons (Ok and Cancel) returns Boolean value.

TYPE CONVERSIONS

String Conversion - String(value);
Numeric Conversion - Number(value);
- undefined becomes NaN, null becomes 0, true becomes 1, false becomes 0, empty strings are 0.
Boolean Conversion - Boolean(value);
- 0 null indefined Nan "" become false. Any thing other than previous is true.

BASIC OPERATORS

Operand - what operators are applied to (ie. 5 * 2 where 5 and 2 are operands and * is the operators)
Unary Operator - operator and single operand ( x = -x )
- Unary + : doesn't do anything to numbers but if operand isn't a number, it converts it to a number (+true is 1, +"2" is 2 as a number.)
- Prefix Form: ++a : returns new incremented value
- Postfix Form: a++ : returns old value before increment
Binary Operator - operator and 2 operands ( x - y )
Other operators: +, -, *, /, %, ** exponents (2**3 = 8).

COMPARISONS

>,>=, <, <=, ==, !=

String Comparison - 'Z' > 'A' is true - compares lexicographical order where a is least Z is most in value.
Strict Equality : 0 == false is true b/c different types are converted to numbers by the equality operator ==. So an "" becomes 0 as does false. === is the strict equality operator which checks equality without type conversion.

IF-STATEMENT, ? OPERATOR

The if, if-else, and if-elseif-else is the same as in Java

? Operator

Used to assign something to a variable depending on a condition:

if (age> 18) {
    pass = true;
} else {
    pass = false;
}

// same thing but with ? operator:
let pass = (age > 18) ? true : false;

// general syntax
let result = condition ? value1IfTrue: value2IfFalse;

Multiple ?'s for >1 conditions:

let result = (condition) ? value1 :
	(condition2) ? value2 :
	(condition3) ? value3 :
	value4Else;

LOGICAL OPERATORS

|| OR
- Finds first truthy value: result = value1 || value2 || value3; converts operands (value1/2/3) to Boolean and evaluates each from left to right one by one. If the operand is true, stops and returns the original value of that operand. if all are false, returns last operand.
&& AND
- Finds the first falsy value. same process as above. If all are true, returns the last operand.
! NOT

NULLISH COALESCING OPERATOR - ??

?? is the nullish coalescing operator; it treats null and undefined similarly and it's a nice syntax to get the first "defined" value of the two arguments.
a ?? b --> returns the first argument (a) if it's not null/undefined; otherwise returns b. It's basically:

result = (a !== null && a!== undefined) ? a : b;

Multiple ??'s:

// returns first of a/b/c which is defined (not null/undefined) otherwise "None".
a ?? b ?? c ?? "None";

LOOPS

while, do-while, for, switch, break/continue are all the same as in Java.

FUNCTIONS

Function Declaration

function sayHi(name) {
    console.log(`"Hi ${name}"`);
}

Default Parameters - if an actual parameter isn't provided, the formal parameter is undefined. To bypass this:
```
function foo(param1, param2="no text given") {
    ...
}
```
Return - same as in Java. If a function has an empty return or doesn't have it at all, it returns undefined.
```
function doNothing() {
    return;
}
console.log( doNothing() === undefined ); // true
```

FUNCTION EXPRESIONS

In JS, functions aren't structures; they're actually a special kind of value which can be assigned; hence Function Expressions:

// function declaration
function sayHi() {
    console.log("hi");
}


// function expression
let sayHi = function() {
    console.log("hi");
};

The function is created and assigned to the sayHi variable. You can even copy a function to another variable:

function sayHi() {console.log("hi");} 	// function expression would also work instead of this.
let func = sayHi;

func(); 	// hi
sayHi(); 	// hi

Differences b/n function expressions & declarations:

Function Declaration:
- function, declared as a separate statement, in the main code flow.
- visible in the whole script, no matter where it is; can be called earlier than it's defined.
Function Expression:
- function, created inside an expression.
- created when the execution reaches it and is usably only from that moment forward.

ARROW FUNCTIONS

There's another way to create functions besides declarations & expressions: Arrow Functions.

// general syntax
let func = (arg1, arg2, ..., argN) => expression

let sum = (a, b) => a + b; 	// returns sum

// for 0 parameters:
let func = () => {...};
                  
// for 1 param, remove ():
let func = param1 => {...};

For a multiline expression, use {}'s and use a normal return inside them:

let sum = (a, b) => {
    let result = a + b;
    return result;
};

Arrow Functions:
- Don't have this
- Don't have arguments
- Can't be called with new
- Don't have super

POLYFILLS

New language features may include not only syntax constructs and operators, but also built-in functions. Ie. some outdated JS engines don't have Math.trunc() so it can't run that code.

A polyfill is a script which updates/adds new functions. It "fills" in the gap and adds missing implementations. (core.js is good for this)

if (!Math.trunc) {	/// if no such function,
    //implement it
    Math.trunc = function(number) {
        return number < 0 ? Math.ceil(number) : Math.floor(number);
    };
}

TRANSPILERS

A transpiler is a special piece of software that can parse ("read and understand") modern code, and rewrite it using older syntax constructs (the result would be the same). Usually, a developer runs the transpiler on their own computer, and then deploys the transpiled code to the server. Babel is one of the most used transpilers.

OBJECTS ; [python dictionary]

The object data type is basically the python dictionary. It's created with {}'s and an optional list of properties
property is a key-value pair.
key is a string (called name/identifier)
value is anything

CREATE EMPTY OBJECT

// 2 ways of creating an empty object

let user = new Object();	// "object constructor" syntax
let user = {};			   	// "object literal" syntax

LITERALS AND PROPERTIES

// This object has 3 properties
let user = {
    // key: value,
    name: "John",
    age: 30,
    "likes birds": true, // multiword property name must be quoted
};

ADD, REMOVE, AND READ

// GET property values of object using dot notation:
var x = user.name;		// John
var y = user.age;		// 30
// dot notation won't work for multi-word properties so do this:
var z = user["likes birds"];	// true

// ADD value:
user.isAdmin = true;

// CHANGE value:
user.age = 18;	// changes age to 18.
user.age += 1;	// increments age by 1.

// REMOVE property using 'delete _propertyName_':
delete user.age;

PROPERTY VALUE SHORTHAND

function makeUser(name, age) {
    return {
        name: name,
        age: age,
    };
}

// SHORTHAND: instead of 'name: name,' just write 'name,'
function makeUser(name, age) {
    return {
        name,		// same as name: name,
        age; 30,
    }
}

PROPERTY EXISTENCE TEST, " in " OPERATOR

// check if a property exists in an object; returns boolean value.
console.log("name" in makeUser);	// true

FOR-IN LOOP

// to iterate thru all keys in an object, use a for-in loop.
let user = {name: "Dev", age: 17, isIndian: true};

for(let key in user) {
    console.log( key );			// keys
    console.log( user[key] );	// values
}

METHOD SHORTHAND

// you can also add function expressions into objects then call those methods via dot notation:
let user = {
    // method shorthand
    sayHi() {
        console.log("hi");
    }
};

' THIS ' METHODS

// used to access a property-value in a method, in the same Object:
let user = {
    name: "Dev",
    age: 17,
    
    sayHi () {
        console.log(`"Hi ${this.name}"`);
    }
};

user.sayHi(); // Hi Dev

CONSTRUCTOR FUNCTION - ' new ' operator

They're technically regular functions, but they're always: 1) named with a capital letter first, and 2) they should be executed only with the new operator.

function User(name, age) {
    this.name = name;
    this.age = age;
    this.isAdmin = false; 
}

let user1 = new User("Dev", 17);		// [java: create User obj user1]

console.log(user1.name);		// Dev
console.log(user1.age);			// 17
console.log(user1.isAdmin);		// false

OBJECT TO PRIMITIVE CONVERSION

When objects are added/subtracted (obj1 +/- obj2) or printed, objects are auto-converted to primitives, then the operation is carried out.

Objects are true in boolean, and there are only numeric and string conversions

NUMERIC CONVERSION - happens when you apply math functions on objects. ie. Date objects (from datetime) can be substracted
STRING CONVERSION - happens when you output an object like alert(obj), etc...

ToPrimitive

There are 3 variants of type-conversion, each called a "hint":
Object-to-String
```
alert(obj);		// output
```

Object-to-Number

let num = Number(obj);	// explicit conversion
let delta = date1 - date2;	// subtraction of datetime objects is allowed
let greater = user1 > user2;	// less/greater comparison

Default - when operator is "not sure" what type to expect (ie. a + can concatenate sting && add nums)

let total = obj1 + obj2;	// binary plus uses "default"
if (user == 1) {...};		// obj == number uses "default"

Symbol.toPrimitive

obj[Symbol.toPrimitive] = function(hint) {
    // must return a primitive value
    // hint = one of "string", "number", "default"
};

// ex.
let user = {
    name: 'dev',
    age: 17,
    [Symbol.toPrimitive](hint) {
        alert(`"hint: ${hint}"`);
        return hint == "string" ? `{name: "${this.name}"}` : this.age;
    }
};

// conversions demo:
alert(user) // hint: string -> {name: "John"}
alert(+user) // hint: number -> 17
alert(user + 1) // hint: default -> 18

Object.keys, .values, .entries

/*
Object.keys(obj) 		- returns an array of keys
Object.values(obj) 		- returns an array of values
Object.entries(obj) 	- returns an array of [key, value] pairs
*/

// looping over values (or keys):
let salaries = {
    "john": 100,
    "pete": 300,
    "mary": 250
};

for (let salary of Object.values(salaries)) {
    // salary is values in salaries object
}

SYMBOL type

Object property keys can be either Strings or Symbols.

A Symbol is a unique value; It's created using Symbol();

// CREATE SYMBOL w/ an optional description (called symbol name/label)
let id = Symbol("id");
let id2 = Symbol("id");

// SET a VALUE
user[id] = "Their id value";

// Set SYMBOL VALUE in an object LITERAL with square brackets but you still have to declare it as a symbol:
let id = Symbol();
let user = {
    name : "dev",
    [id] : 123
};

// id != id2 even though they share the same description/name.
// for printing, either do:
console.log(id.toString());		// shows 'symbol: id'
console.log(id.description());	// shows 'description: id'

HIDDEN PROPERTIES - symbols allow us to create hidden properties of an object that can't be accidentally access or overwrite. Symbols are skipped by for-in loops and Object.keys(objectName) method
GLOBAL SYMBOLS
- Sometimes, you want same-names symbols, perhaps different parts of your application want to access symbol "id"- exactly the same property. That's where the global symbol registry steps in. You can create symbols in it and access them later.
- In order to read a symbol from the registry, use Symbol.for(key). This returns the symbol with the symbol name/description/label of key- otherwise, it creates a new symbol Symbol(key) and stores it:
  // read from the global registry let id = Symbol.for("id"); // if the symbol doesn't exist, create it // read it again (maybe from another part of the code) let idAgain = Symbol.for("id"); // the same symbol alert( id === idAgain ); // true // Symbol.keyFor(symbol) returns global symbol description let sym = Symbol.for("name"); let sym2 = Symbol.for("id"); alert( Symbol.forKey(sym) ); // name alert( Symbol.forKey(sym2) ); // id

NUMBER

// More ways to write a number:
let billion = 1000000000;
let billion = 1_000_000_000;
let billion = 1e9;
let ms = 1e-6;		// 0.000001 (microsecond)

// rounding: Math.floor, .ceil, .round, .trunc, and .toFixed(x) for nearest xth decimal
let numVar = 12.3494;
alert( numVar.toFixed(1) )		// 12.4

// parseInt/parseFloat "read" a number from a string from left to right until they can't:
alert( parseInt("100px") );		// 100
alert( parseFloar("12.5vw") );	// 12.5
alert( parseInt("a123") );		// NaN, the first symbol stops the process

// Max and min:
alert( Math.max(3, 5, -10, 0, 1) );		// 5
alert( Math.min(1, 2, 0) );			   // 0

STRING

Concatenation

alert('wu' + '-tang')	// 'wu-tang'
alert('1' + 2 + 2)		// '122' and not '14'

Length

```
'hello'.length	// 5
```

Finding String in a String

var str = "Please locate where 'locate' occurs!";	// -1 if not found

var pos = str.indexOf("locate");			// pos=7
var lastpos = str.lastIndexOf("locate");	// pos=21
var posAfterIndex15 = str.indexOf("locate", 15);	// pos=21
var pos = str.search("locate");		// pos=7

// search() can't take a second start position argument
// indexOf() can't take powerful search values (regex)

Substring (str.slice, str.substring, str.substr)

var str = "Apple, Banana, Kiwi";

var res = str.slice(7, 13);		// Banana -> slice(include, exclude)
var res = str.slice(-12, -6);	// Banana -> start @ end of str
var res = str.slice(7);			// from 7 to end of str

str.substring(7, 13); // same as slice, but can't do neg. params

str.substr(7, 6);	// Banana -> 2nd param is length of substr (from 7, a 6 letter str)
str.substr(-4);		// Kiwi -> counts backwards from end of str

Replacing String Content

replaces specified value with another value in a string. It doesn't change the string, it returns a new string. It only replaces first match and is case sensitive.

str = "Please visit Microsoft";
var n = str.replace("Microsoft", "Apple");		// n= "Please visit Apple"

// to replace case insensitive, use /i flag:
var n = str.replace(/MICROSOFT/i, "Apple");		// /i for insensitive

// to replace all matches, use /g flag:
var n = str.replace(/Microsoft/g, "Apple");		// /g for global

Upper and Lower Cases

```
str.toUpperCase();
str.toLowerCase();
```

Trim

str.trim();		// removes whitespace from both sides of a string

Converting String to Array

str.split("");	// split string into all characters array
str.split(",");	// split on commas

String interpolation (kinda like printf)

// use `` instead "" and insert variable into ${}
let myPet = "chimp";
console.log(`I own a pet ${myPet}.`)

Special Characters

let names = "Guests:\n * John\n * Pete\n * Mary";

/*
newline		\n
quotes		\', \"
backslash	\\
tab			\t
*/

Loop Over characters with For-of Loop

for (let char of "hello") {
    console.log(char);		// H, e, l, l, o (char becomes H, then e, then l...)
}

Test for Match (includes, startsWith, endsWith)

alert( "Widget with id".includes("Widget") );	// true
alert( "Hello".includes("Bye") );			   // false

// The opt. 2nd arg of str.includes is the position to start search:
alert( "Widget".includes("id") );	// true
alert( "Widget".includes("id", 3) );	// false [from position 3]

ARRAYS

Creating an array

var cars = ["Corvette", "Alfa Romeo", "BMW"];
var values = ["Foo", "Bar", 10];	// can hold multiple types

// use names to access its "members"; person.firstName -> "John"
var person = {firstName: "John", lastName: "Doe", age:46};

Access Elements

var firstCar = cars[0];
var john = person.firstName;	// from person array

Adding Elements

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.push("Lemon");			    // adds to end and returns length
fruits[fruits.length] = "Peach";	// add peach at end

Difference b/n Arrays & Objects: arrays use numbered indexes, while, Objects use names indexes.

Removing Elements

var nums = [1, 2, 3, 4];

nums.pop();			// returns and removes last element
nums.shift();		// removes first element and shifts element left by 1
nums.unshift(1);	// adds new element in front, and pushes elements right by 1
delete nums[0];		// change first element to undefined; leaves undefined "holes"

Changing Elements and Copying Array

cars[0] = "Ferrari";
let copyCars = cars;		// copys entire array
// typeof cars --> 'Object'

Length (bit tricky)

/* length is actually not the count of values in the array, but the greatest numeric index plus one. The length property is also writable. If we increase it manually, nothing interesting happens. But if we decrease it, the array is irreverseibly truncated: */

let arr = [1, 2, 3, 4, 5];

arr.length = 2; // truncate to 2 elements
alert( arr ); // [1, 2]

arr.length = 5; // return length back
alert( arr[3] ); // undefined: the values do not return


// so technically, the simplest way to clear an array is:
arr.length = 0;

Properties & Methods

/*
- length -> cars.length;
- sort -> cars.sort();
- reverse() -> reverses the array then returns it
- check array -> Array.isArray(cars);
- convert array to csv string -> cars.toString();
- join elements by a char -> cars.join("*");

- merge arrays -> arr3 = arr1.concat(arr2); adds arr2 at the end of arr1

- slice part of array -> var x = nums.slice(1);		starts from 1 to end (do 1,x)

- push(...items) –> adds items to the end,
- pop() –> extracts an item from the end,
- shift() –> extracts an item from the beginning,
- unshift(...items) –> adds items to the beginning.
- includes(value) -> returns boolean if array has the value.

*/

Iteration

let arr = ["Apple", "Orange", "Pear"];
  
// normal for-loop:
for (let i = 0; i < arr.length; i++) {
	alert( arr[i] );
}

// for-of:
for (let fruit of fruits) {
	alert( fruit );
}

// for-in, since arrays are objects:
for (let key in arr) {
	alert( arr[key] ); // Apple, Orange, Pear
}

// for-each, run a function for elements in array:
arr.forEach((item, index, array) {
	alert( item );
});

["Bilbo", "Gandalf", "Nazgul"].forEach((item, index, array) => {
	alert(`${item} is at index ${index} in ${array}`);
});

Multi-Dimensional Array

let matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

// [row][column]
alert( matrix[0][2] );	// 3

.map()
- allows you to run a function on each item in the array, returning a new array as the result
- In React, map() can be used to generate lists
  const myArray = ['apple', 'banana', 'orange']; const myList = myArray.map((item) => <p>{item}</p>)

MAP

Basically an object (or python Dictionary) but Map allows keys of any type.

Methods and Properties:

/*
new Map() 				– creates the map.
map.set(key, value) 	– stores the value by the key.
map.get(key) 			– returns value of key, else, undefined.
map.has(key) 			– returns boolean if key exists.
map.delete(key) 		– removes the value by the key.
map.clear() 			– removes everything from the map.
map.size 				– returns the current element count.
map.keys() 				– returns an iterable for keys,
map.values() 			– returns an iterable for values,
map.entries() 			– returns an iterable for [key, value]'s.

Every map.set returns the map, so we can chain the calls:

map.set('1', 'str1')
	 .set(1, 'num1')
   .set(true, 'bool1');
*/

Basic Implementation:

let map = new Map();		// creates the map

map.set('name', 'dev');   // a string key
map.set(99, 'problems');     // a numeric key
map.set(true, 'isMessiGoat'); // a boolean key

// Objects would convert keys to string but
// Map keeps the type, so these two are different:
alert( map.get('name') ); 		// 'dev'
alert( map.get(99) );			// 'problems'
alert( map.size ); 				// 3

Map can also use Objects as Keys:

let john = { name: "John" };
let ben = { name: "Ben" };

// for every user, let's store their visits count
let usersMap = new Map();

// john is the key for the map
usersMap.set(john, 123);
usersMap.set(ben, 321)

alert( usersMap.get(john) ); // 123
alert( usersMap.get(ben) ); // 321

Iteration

let recipeMap = new Map([
  ['cucumber', 500],
  ['tomatoes', 350],
  ['onion',    50]
]);

// iterate over keys using map.keys()
for (let vegetable of recipeMap.keys()) {
  alert(vegetable); // cucumber, tomatoes, onion
}

// iterate over values using map.values()
for (let amount of recipeMap.values()) {
  alert(amount); // 500, 350, 50
}

// iterate over [key, value] entries.
// recipeMap is the same as of recipeMap.entries()
for (let entry of recipeMap) {
  alert(entry); // cucumber,500 (and so on)
}

// Map also has a built-in forEach method like the array:
// runs the function for each (key, value) pair
recipeMap.forEach( (value, key, map) => {
  alert(`${key}: ${value}`); // cucumber: 500 etc
});

SET

“set of values” (without keys), where each value may occur only once

Methods & Properties:

/*
new Set(iterable) 		– creates set- optional iterable object (array etc...)

set.add(value) 			– adds a value, returns set.
set.delete(value) 		– removes the value.
set.has(value) 			– returns boolean if the value exists.
set.clear() 			– removes everything from the set.
set.size 				– is the elements count.

*** main feature is that repeated calls of set.add(value) with the same value don’t do anything.
*/

Basic Implementation:

let set = new Set();		// creates set

let john = { name: "John" };	// 3 users
let pete = { name: "Pete" };	
let mary = { name: "Mary" };

// users are added, often repeatedly
set.add(john);
set.add(pete);
set.add(mary);
set.add(john); // repeat
set.add(mary); // repeat

alert( set.size ); // 3; set keeps only unique values

for (let user of set) {
  alert(user.name); // John then Pete then Mary
}

Iteration over Set:

let set = new Set(["oranges", "apples", "bananas"]);

// single-line for-of loop
for (let value of set) {
	alert(value)
}

// forEach:
set.forEach((value, valueAgain, set) => {
  alert(value);
});

WeakMap

is Map-like collection that allows only objects as keys and removes them together with associated value once they become inaccessible by other means.

WeakSet

is Set-like collection that stores only objects and removes them once they become inaccessible by other means. [WeakMap&Set]'s main advantages are that they have weak reference to objects, so they can easily be removed by garbage collector. That comes at the cost of not having support for clear, size, keys, values…

DESTRUCTURING ASSIGNMENT

Destructuring assignment is a special syntax that allows us to “unpack” arrays/objects into a bunch of variables.

Array Destructing

// we have an array with the name and surname
let arr = ["John", "Smith"]

// destructuring assignment
// sets firstName = arr[0]
// and surname = arr[1]
let [firstName, surname] = arr;

alert(firstName); 	// John
alert(surname);  	// Smith

Ignore Elements using commas

// second element is not needed so leave it empty
let [firstName, , title] = ["Julius", "Caesar", "Consul"];

alert( firstName );		// Julius
alert( title ); 		// Consul

String Destructing

// destructive assignment can work on any iterable like strings
let [a, b, c] = "abc"; 	// ["a", "b", "c"]
let [one, two, three] = new Set([1, 2, 3]);	// even on Sets

Assign to anything

// you can use any "assignables" on the left side.
// Ie. an object property:
let user = {};
[user.name, user.surname] = "Julius Caesar".split(" ");
alert(user.name);			// Julius
alert(user.surname);	// Caesar

Swapping Values in 1 line via destructive assignment

let user1 = "Julius";
let user2 = "Pompey";
[user1, user2] = [user2, user1];
// now, user1="Pompey"	& 	user2="Julius"

The Rest "..."

// Usually, if the array is longer than the list at the left, the “extra” items are omitted. If we’d like also to gather all that follows, add "...rest":

let [name1, name2, ...rest] = ["A", "B", "C", "D", "E"];

// 'rest' is array of items, starting from the 3rd one:
// ["C", "D", "E"]
alert(rest[0]); 		// C
alert(rest.length); // 3

// *** We can use any other variable name in place of rest

Default Value

// If the right array is shorter than the left list, they're just undefined values. If we want a “default” value to replace undefined values, we can provide it using =:
let [name = "Guest", surname = "Anonymous"] = ["Julius"];

alert(name);    // Julius (from array)
alert(surname); // Anonymous (default used)

Object Destructing

Basic Syntax: let {var1, var2} = {var1:…, var2:…}

The right side is an existing object. The left side contains an object-like “pattern” for corresponding properties (same name as property names in object):

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

let {title, width, height} = options;
alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

// The order does not matter. This works too:
let {height, width, title} = { title: "Menu", height: 200, width: 100 }

If we want to assign a property to a variable with another name, set the variable name using a colon:
```
let {width: w, height: h, title} = options;
```

The Rest "..."

let options = {title: "Menu", height: 200, width: 100};

// rest = object with the rest of properties
let {title, ...rest} = options;

// now title="Menu", rest={height: 200, width: 100}
alert(rest.height);  // 200
alert(rest.width);   // 100

DATE AND TIME

new Date object:

// no parameters
let now = new Date();
alert( now ); // shows current date/time

/* new Date(year, month, date, hours, minutes, seconds, ms)

- Create the date with the params (first 2 args are obligatory)
- The year must have 4 digits.
- The month count starts with 0 (Jan), up to 11 (Dec).
- The date param is day of month, if absent then 1 is assumed.
- If hours/min/secs/ms is absent, they're assumed to be 0.
*/
new Date(2011, 0, 1, 0, 0, 0, 0); // 1 Jan 2011, 00:00:00
new Date(2011, 0, 1); // the same, hours etc are 0 by default

Access date components from Date object:

/*
getFullYear()		- get the year (4digits)
getMonth()			- get month (from 0 to 11)
getDate()				- Get the day of month, from 1 to 31
--> getHours(), getMinutes(), getSeconds(), getMilliseconds()
getDay()				- Get day of week, from 0 (Sun) to 6 (Sat)
getTime()				- Returns timestamp (#ms since Jan,1,1970)
*/

Autocorrection (Out-of-range date components are distributed automatically)

let date = new Date(2016, 1, 28);
date.setDate(date.getDate() + 2);

alert( date ); // 1 Mar 2016

Date.now() - returns the current timestamp

let start = Date.now(); // ms count from 1 Jan 1970

for (let i = 0; i < 100000; i++) {
  let doSomething = i * i * i;
}

let end = Date.now(); // done

alert(`loop time (ms): ${end - start}`);

Date.parse() from a string

// The method Date.parse(str) can read a date from a string.
// The string format should be: YYYY-MM-DDTHH:mm:ss.sssZ

let ms = Date.parse('2012-01-26T13:51:50.417-07:00');
alert(ms); // 1327611110417  (timestamp)

JSON

Let’s say we have a complex object, and we’d like to convert it to a string, to send it over a network, or just to output it for logging purposes. Throughout development, properties are added, renamed, and removed; updating a toString() every single time is PAIN.
JSON (JavaScript Object Notation) is a general format to represent values/objects.

JSON.stringify

converts objects into JSON to a string called encoded / serialized / stringified / marshalled object.

let student = {
    name: 'John',
    age: 30,
    isAdmin: false,
    courses: ['java', 'py', 'js'],
    wife: null
 };
  
let json = JSON.stringify(student);

alert(typeof json); // we've got a string!

alert(json);
/* JSON-encoded object:
{
    "name": "John",
    "age": 30,
    "isAdmin": false,
    "courses": ["html", "css", "js"],
    "wife": null
}
*/

Note: JSON-encoded object differs from the object literal in that:

Strings use "". No '' or backticks in JSON. So 'John'--> "John".
All Object property names are "". So age:30 --> "age":30.

JSON.stringify can be applied to str, numbers, bool, null, & even arrays:

// a number in JSON is just a number
alert( JSON.stringify(1) ) // 1

// a string in JSON is still a string, but double-quoted
alert( JSON.stringify('test') ) // "test"
alert( JSON.stringify(true) ); // true
alert( JSON.stringify([1, 2, 3]) ); // [1,2,3]

JSON is a data-only language-independent specification, so some JS-specific object properties are skipped by JSON.stringify: functions, symbolic keys and values, and properties that store undefined:

let user = {
  sayHi() { // ignored
    alert("Hello");
  },
  [Symbol("id")]: 123, // ignored
  something: undefined // ignored
};

alert( JSON.stringify(user) ); // {} (empty object)

JSON.parse

To decode a JSON-string, we need JSON.parse(). Basic Syntax:

let value = JSON.parse(str, [reviver]);
// str: JSON-string to parse
/// reviver: Optional function(key,value) that will be called for each (key, value) pair and can transform the value

Basic Implementation + For Nested Objects:

let numbers = "[0, 1, 2, 3]";		// stringified array
numbers = JSON.parse(numbers);	// decodes from JSON
alert( numbers[1] ); 						// 1

// nested objects (ie. array property or another obj):
let userData = '{ "name": "John", "age": 35, "isAdmin": false, "friends": [0,1,2,3] }';

let user = JSON.parse(userData);		// decodes along with array obj
alert( user.friends[1] ); 					// 1

Reviver:

// Imagine, we got a stringified meetup object from the server:
// title: (meetup title), date: (meetup date)
let str = '{"title":"Meeting","date":"2017-11-30T12:00:00.000Z"}';

/* PROBLEMOOO:
let meeting = JSON.parse(str);		// deserialize

// The value of meeting.date is a string, not a Date object.
alert( meetup.date.getDate() );
*/

// Pass to JSON.parse the reviving function as the second argument, that returns all values “as is”, but date will become a Date:

let meeting = JSON.parse(str, function(key, value) {
  if (key == 'date')
    return new Date(value);
  return value;
});

alert( meetup.date.getDate() ); // now works!

REST PARAMETERS

A function can be called with any number of arguments, no matter how it is defined:

function sum(a, b) {
  return a + b;
}

alert( sum(1, 2, 3, 4, 5) );	// 3
// There's no "excessive arguments" error; only the first 2 count

The rest of the unused parameters can be included in the function definition by using three dots ... followed by the name of the array that will contain them:

function sumAll(...args) { 	// args is the array
  let sum = 0;
  for (let arg of args) sum += arg;
  return sum;
}
alert( sumAll(1) ); 			// 1
alert( sumAll(1, 2) ); 			// 3
alert( sumAll(1, 2, 3) ); 		// 6

We can choose to get the first parameters as variables, and gather only the rest. Here below, the first 2 arguments go into variables, and the rest go into a 'titles' array:

function showName(firstName, lastName, ...titles) {
  alert( firstName + ' ' + lastName ); 		// Julius Caesar

  // i.e. titles = ["Consul", "Imperator"]
  alert( titles[0] ); // Consul
  alert( titles[1] ); // Imperator
  alert( titles.length ); // 2
}

showName("Julius", "Caesar", "Consul", "Imperator");

Spread Syntax

In Rest Parameters, we saw how to get an array from the list of parameters. But sometimes we need to do the opposite.
Ie. Math.max() returns the greatest number from a list. Let's say we have an array [3, 5, 1]. You can't pass the array into the function as it expects numeric arguments, and doing Math.max(arr[0], arr[1], etc..) may take forever.

Spread Syntax works similarly with rest parameters, also using ..., but inversely. When ...arr is used in a function call, it expands the iterable object into the list of arguments:

let arr = [3, 5, 1];
alert( Math.max(...arr) ); // 5 (spread turns arr into list of args)

// we can also pass multiple iterables and solo number arguments:
let arr2 = [8, 3, -8, 1];
alert( Math.max(..arr, ...arr2, 8, 24) );		// 24

We can also use Spread Syntax to merge arrays:

let arr = [3, 5, 1];
let arr2 = [8, 9, 15];
let merged = [0, ...arr, 2, ...arr2];
alert(merged); // 0,3,5,1,2,8,9,15 (0, then arr, then 2, then arr2)

GLOBAL OBJECTS

The Global object provides variables & functions that are available anywhere. In a browser it's named window. for Node.js it's global, and recently, globalThis (use this now).
In a browser, global functions & variables declared with var (not let/const) become the property of the global object:
```
var gVar = 5;
alert(window.gVar); // 5 (became a property of the global object)
```

If a value is so important that you’d like to make it available globally, write it as a property:

window.currentUser = {
  name: "John"
};

// somewhere else in code
alert(currentUser.name);  // John

// or, if we have a local variable with the name "currentUser"
// get it from window explicitly (safe!)
alert(window.currentUser.name); 	// John

For some reason, this works instead of the above:
```
gVar = 5;
console.log(global.gVar);	// 5
```

NFE : Named Function Expression

In JS, functions are objects, kinda like: "action objects"

The "name" property:

// function’s name is accessible as the “name” property
function sayHi() { alert("Hi"); }
alert( sayHi.name ); // sayHi

// also applicable to functions in Objects:
let user = {
  sayHi() {/* ...*/},
  sayBye: function() {/* ...*/}
}
alert(user.sayHi.name); 	// sayHi
alert(user.sayBye.name); 	// sayBye

The "length" property:

// returns the number of function parameters (excl. rest @params)
function f1(a) {}
function f2(a, b) {}
function many(a, b, ...more) {}

alert(f1.length); // 1
alert(f2.length); // 2
alert(many.length); // 2

NFE

// ordinary function expression:
let sayHi = function(who) {
  alert(`Hello, ${who}`);
};

// add a name to it
let sayHi = function func(who) {
  alert(`Hello, ${who}`);
};

// the "func" allows the function to reference itself internally, and it's not visisible outside the function:
let sayHi = function func(who) {	// who is a param
  if (who) {
    alert(`Hello, ${who}`);
  } else {
    func("Guest"); // use func to re-call itself
  }
};

sayHi(); // Hello, Guest
func(); // Error, func is not defined outside sayHi()

You can also call sayHi() internally and it would work, the problem is that sayHi may change outside. If the function gets assigned to another variable instead, the code will start to give errors:
```
let welcome = sayHi;
sayHi = null;		// sayHi and welcome both point to the same thing
welcome(); // Error, the nested sayHi call doesn't work any more!
```

Function Binding

When passing object methods as callbacks, there’s a known problem: "losing this".

ie. Here’s how it may happen with setTimeout:

let user = {
  firstName: "John",
  sayHi() {
    alert(`Hello, ${this.firstName}!`);
  }
};

setTimeout(user.sayHi, 1000); // Hello, undefined!

// It outputs undefined instead of "John" for this.firstName because setTimeout got the function user.sayHi, separately from the object.

Solution: a Wrapper (also called wrapping function):

let user = {
  firstName: "John",
  sayHi() {
    alert(`Hello, ${this.firstName}!`);
  }
};

setTimeout(() => user.sayHi(), 1000); // Hello, John!
// this works bc it recieves user from the outer lexical env, then calls the method normally.

PROPERTY FLAGS AND DESCRIPTORS

Object properties, besides a value, have three special attributes (“flags”):

writable – if true, the value can be changed, otherwise it’s read-only.
enumerable – if true, then listed in loops, otherwise not listed.
configurable – if true, the property can be deleted and these attributes can be modified, otherwise not.
All 3 are initially true, but they can be changed. To access the full info about a property: (returns a "property-descriptor" object: value and all the flags)
```
let descriptor = Object.getOwnPropertyDescriptor(obj, propertyName);
```

Basic Implementation

let user = {
  name: "John"
};

let descriptor = Object.getOwnPropertyDescriptor(user, 'name');

alert( JSON.stringify(descriptor, null, 2 ) );
/* property descriptor:
{
  "value": "John",
  "writable": true,
  "enumerable": true,
  "configurable": true
}
*/

To change the flags: use the Object,defineProperty method:

Object.defineProperty(obj, propertyName, descriptor)
// descriptor: property descriptor object to apply

Basic Implementation of Writable:

// make user.name non-writable (can’t be reassigned) by changing writable flag
let user = { name: "John" };

Object.defineProperty(user, "name", {
  writable: false
});

user.name = "Pete";		// Error; 'name' is read-only

Basic Implementation of Enumberable:

// basically, the toString is skipped if enumerable is false
let user = {
  name: "John",
  toString() { return this.name; }
};

Object.defineProperty(user, "toString", {
  enumerable: false
});

// Now our toString disappears:
for (let key in user) alert(key); // name
// non-enumerable properties are also skipped in Object.keys

Basic Implementation of Configurable:

// basically, non-configurable =can't be deleted, nor can it be changed back with defineProperty (one-way road).
// Below, user.name can't changed nor deleted.
let user = {
  name: "John"
};

Object.defineProperty(user, "name", {
  writable: false,
  configurable: false
});

// won't be able to change user.name or its flags
// all this won't work:
user.name = "Pete";
delete user.name;
Object.defineProperty(user, "name", { value: "Pete" });

Define many properties with Object.defineProperties:

// basic syntax:
Object.defineProperties(obj, {
  prop1: descriptor1,
  prop2: descriptor2
  // ...
});

// ie.
Object.defineProperties(user, {
  name: { value: "John", writable: false },
  surname: { value: "Smith", writable: false },
  // ...
});

PROPERTY GETTERS + SETTERS

There are 2 kinds of object properties: data properties,accessor properties.

Accessor properties are essentially properties used to get and set a value. In an object literal, they're denoted by getand set:

let obj = {
  get propName() {
    // getter, the code executed on getting obj.propName
  },

  set propName(value) {
    // setter, the code executed on setting obj.propName = value
  }
};

Basic implementation:

let user = {
  name: "John",
  surname: "Smith",

  get fullName() {		// getter
    return `${this.name} ${this.surname}`;
  },

  set fullName(value) {		// setter
    [this.name, this.surname] = value.split(" ");
  }
};

user.fullName = "Alice Cooper";		// set fullName splits this str
alert(user.name); 				// Alice
alert(user.surname); 			// Cooper

You can also create accessor properties, get&set, via defineProperty descriptor:

let user = {
  name: "John",
  surname: "Smith"
};

Object.defineProperty(user, 'fullName', {
  get() {
    return `${this.name} ${this.surname}`;
  },

  set(value) {
    [this.name, this.surname] = value.split(" ");
  }
});

alert(user.fullName); // John Smith
for(let key in user) alert(key); // name, surname

PROTOTYPAL INHERITANCE

Java Inheritance (extending one object to another, to access object properties)

[ [ Prototype ] ]

Objects have a special hidden property [[Prototype]] ; either null or references another object. This object is called a "prototype".
When we read a property from object, and it’s missing, JavaScript automatically takes it from the prototype. This is Prototypal Inheritence.

The property [[Prototype]] is internal and hidden. One way to set it is:

__proto__:

let animal = {
  eats: true
};
let rabbit = {
  jumps: true
};

rabbit.__proto__ = animal; // rabbit prototypically inherits from animal.

// If we read a property from rabbit, and it’s missing, JS will automatically take it from animal:

alert( rabbit.eats ); // true
alert( rabbit.jumps ); // true

So if animal has a lot of useful properties and methods, then they become automatically available in rabbit. Such properties are called “inherited”:

// If we have a method in animal, it can be called on rabbit:
let animal = {
  eats: true,
  walk() {
    alert("Animal walk");
  }
};

let rabbit = {
  jumps: true,
  __proto__: animal
};

rabbit.walk(); // Animal walk is taken from the prototype

You can have as many prototypes as you want, and you can chain them: if duck inheritis from rabbit inherits from animal, then duck can also inherit from animal.

For-in loop

If rabbit inherits from animal, a call to Object.keys(rabbit) will only return the keys of rabbit. But, if you use a for-in loop, it iterates over it's own and inherited keys:

let animal = {
  eats: true
};

let rabbit = {
  jumps: true,
  __proto__: animal
};

// Object.keys only returns own keys
alert(Object.keys(rabbit)); // jumps

// for..in loops over both own and inherited keys
for(let prop in rabbit) alert(prop); // jumps,  eats

// obj.hasOwnProperty(key) returns boolean if the key at hand (use for-loop) is the object's (true) or inherited (false).

Prototype methods, objects without `proto`

The __proto__ is considered outdated; the modern methods are:

Object.create(proto, [descriptors]) – creates an empty object with given proto as [[Prototype]] and optional property descriptors.
Object.getPrototypeOf(obj) – returns the [[Prototype]] of obj.

Object.setPrototypeOf(obj, proto) – sets the [[Prototype]] of obj to proto

let animal = {	eats: true	};

// create a new object with animal as a prototype
let rabbit = Object.create(animal);

alert(rabbit.eats); // true

// returns the animal (rabbit's prototype)
alert(Object.getPrototypeOf(rabbit) === animal); // true

// changes the prototype of rabbit to {}
Object.setPrototypeOf(rabbit, {});

Object.create's optional second argument:

// We can provide extra properties to the new object there:
let animal = {	eats: true	};

let rabbit = Object.create(animal, {
  jumps: {
    value: true
  }
});

alert(rabbit.jumps); // true

// This 2nd argument also allows for better cloning than for-in:
let clone = Object.create(Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj));
// This call makes a truly exact copy of obj, including all properties: enumerable & non-enumerable, data properties and setters/getters – everything, and with the right [[Prototype]].

Other Methods:
- Object.keys(obj), Object.values(obj), Object.entries(obj) returns an array of property names/values/key-value pairs.
- Object.getOwnPropertySymbols(obj) - returns an array of all keys with Symbols.
- Object.getOwnPropertyNames(obj) - returns an array of all own string keys.
- Reflect.ownKeys(obj) - returns an array of all keys (basically same as ^).
- obj.hasOwnProperty('keyName') - returns boolean if obj has own (not inherited) key named keyName.

F.PROTOTYPE

Remember, new objects can be created with a constructor function like new F(). So if F.prototype is an object, then the new operator uses it to set [[Prototype]] for the new object.

F.prototype here is a regular property on F. Ie:

let animal = {eats: true};

function Rabbit(name) {
    this.name = name;
}

Rabbit.prototype = animal;	// When a 'new Rabbit' is created, its prototype will be 'animal'
let rabbit = new Rabbit("Bugs Bunny");

alert( rabbit.eats );	// true

NATIVE PROTOTYPES

All built-in objects follow the same pattern:
- The methods are stored in the prototype (Array.prototype, Object.prototype, etc...)
- The object itself stores only the data (array items, object properties, etc...)

CLASSES

We often need to create many objects of the same kind (ie. users).
A class is kind of like template code for creating objects, providing initial values for variables and methods.

General Syntax:

class className {
    // class methods
    constructor() {...}
    method1() {...}
    method2() {...}
    ...
}
    
// CREATE NEW OBJECTS
let obj1 = new className();		// the constructor() is called by 'new'
user.method1();

In JS, a class is a a function (typeof myClass >>> function). After new className object is created, when we call its method, it’s taken from the prototype.

Class Expression

Just like functions, classes can be defined inside another expression, passed around, returned, assigned, etc:

let User = class {
  sayHi() {
    alert("Hello");
  }
};

// Similar to NFE, class expressions may have a name, call it NCE:
let User = class MyClass {
  sayHi() { alert(MyClass); } //MyClass name only visible in the class
};

new User().sayHi(); // works, shows MyClass definition
alert(MyClass); // error, MyClass name isn't visible outside of class

Getters/Setters

Just like literal objects, classes may include getters/setters:

class User {

  constructor(name) {	// invokes the setter
    this.name = name;
  }

  get name() {
    return this.name;
  }

  set name(value) {
    if (value.length < 4) {
      alert("Name is too short.");
      return;
    }
    this._name = value;
  }

}

let user = new User("John");
alert(user.name); // John

user = new User(""); // Name is too short.

CLASS INHERITANCE - way for one class to extend another class.

Extends

To extend a child class to a parent, class Child extends Parent:

// Animal class not shown but Rabbit objects can access Rabbit + Animal methods.
class Rabbit extends Animal {
    ...
}

Overriding methods

If both Parent and Child classes share a method name, a call from a Child class object will call the Child class method.

"Super"

If you want to intentionally call the Parent method instead of overriding, then call super.methodName(). However, arrow functions don't have a super keyword.

Overriding Constructors

A call to super(...) will call the Parent constructor (only from inside the child constructor).

If a Child extends a Parent and has no constructor, then it calls the Parent constructor passing it all the arguments.

class Animal {
    constructor(name, speed) {
        this.name = name;
        this.speed = speed;
    }
}

class Rabbit extends Animal {
    // if you even remove this constructor and leave Rabbit empty, this code will still work
    // because it will just pass the arguments to the Animal constructor.
    constructor(name, speed) {
        super(name, speed);
    }
}

let rabbit = new Rabbit("Bugs Bunny", 25);
console.log(rabbit.name);	// "Bugs Bunny"
console.log(rabbit.speed);	// 25

NOTE: You can override both methods, but also class fields (methods+variables).

STATIC PROPERTIES AND METHODS

Static Methods
- Static methods are the same as they're in Java (don't need to make an object to call it):
  class User { static staticMethod() { console.log('hi'); } } User.staticMethod(); // hi
- Usually, static methods are used to implement functions that belong to the class, but not to any particular object of it. Call it via: className.staticMethodName();

Static Properties

Static properties look like regular class properties but have static prepended

class Article {
  	static publisher = "Messi";
}

console.log( Article.publisher ); // Messi

Static properties and methods are inherited

PRIVATE+PROTECTED PROPERTIES AND METHODS

properties and methods are split into two groups:
- Internal interface – methods+properties, accessible from other methods of the class, but not from the outside.
- External interface – methods+properties, accessible also from outside the class
Public vs. Private Fields (properties+methods):
- Public: accessible from anywhere. They comprise the external interface.
- Private: accessible only from inside the class. These are for the internal interface.
  - # prefix ie. #name or #returnName(){...}
- Protected: like private, but child classes can access. These fields will be read-only. JS doesn't have an actual implementation but you can emulate it by a class having a getter but not a setter.
  - _ prefix ie. _name or _returnName(){...}

Ie. a Name Class:

class NameGenerator {
    _name;		// _ indicates protected
  	#race;		// # indicates private
  
    constructor(name) { this._name = name; }
  	get name() { return this._name; }	// only getter, no setter
}

let nameGenerator = new NameGenerator("John");
console.log(`My name is ${nameGenerator.name}`); // My name is John
nameGenerator.name = "Jane"; // Error; 'name' is read-only

EXTENDING BUILT-IN CLASSES

You can extend a given class onto built-in classes, like Array/Map, and add functionality:

Ie. extend a custom PowerArray class to the built-in Array class:

// add one more method to it (can do more)
class PowerArray extends Array {
  isEmpty() {
    return this.length === 0;
  }
}

let arr = new PowerArray(1, 2, 5, 10, 50);
alert(arr.isEmpty()); // false

let filteredArr = arr.filter(item => item >= 10);
alert(filteredArr); // 10, 50
alert(filteredArr.isEmpty()); // false

CLASS CHECKING: "instanceof"

The instanceof operator allows to check whether an object belongs to a certain class. It also takes inheritance into account. The syntax is:

obj instanceof Class
// returns true if obj is a Class object, or it inherits from Class.

// ie:
class Rabbit {}
let rabbit = new Rabbit();
alert( rabbit instanceof Rabbit ); // true

It also works with constructor functions:

function Rabbit() {}
alert( new Rabbit() instanceof Rabbit ); // true

Object.prototype.toString

We can use toString as an extended typeof and an alternative for instanceof. It will return:
- For a number, it will be [object Number]
- For a boolean, it will be [object Boolean]
- For null: [object Null]
- For undefined: [object Undefined]
- For arrays: [object Array]
- …etc (customizable).

let arr = [];
console.log( Object.prototype.toString(arr) ); // [object Array]

MIXINS

In JS we can only inherit from a single object & a class can only extend one other class.
A mixin is a class containing methods that can be used by other classes without a need to inherit from it.
The simplest way to implement a mixin in JS is to make an object with useful methods, so that we can easily merge them into a prototype of any class.

ie. here the mixin sayHiMixin is used to add some “speech” for User:

// mixin object
let sayHiMixin = {
  sayHi() { alert(`Hello ${this.name}`); },
  sayBye() { alert(`Bye ${this.name}`); }
};

// usage:
class User {
  constructor(name) { this.name = name; }
}

Object.assign(User.prototype, sayHiBye);	// User now has sayHiBye methods
let me = new User("dev");
me.sayHi();	// Hi dev

// There’s no inheritance, but a simple method copying

ERROR HANDLING

The try-catch syntax is same as in Java:

try {

  alert('Start of try runs');  // runs 

  lalala; // ERROR

  alert('End of try (never reached)');  // skipped over

} catch (err) {
  alert(`Error has occurred!`); 	// runs if there's an error.
}

Error Object

When an error occurs, JS generates an object containing the details about it. The object is then passed as an argument to catch:
```
try {
  // ...
} catch (err) { // <-- "error object", could use another word instead of err
  // ...
}
```
the error object has two main properties:
- name - Error name. For instance, for an undefined variable that’s "ReferenceError".
- message - Textual message about error details.

There are other non-standard properties available in most environments. One of most widely used and supported is:

stack - Current call stack: a string with info about the sequence of nested calls that led to the error.

ie:

try {
  lalala; // ERROR
} catch (err) {
  alert(err.name); 		// ReferenceError
  alert(err.message); // lalala is not defined
  alert(err.stack); // ReferenceError: lalala is not defined at (call stack)

  // Can also show an error as whole. The error is converted to string as "name: message"
  alert(err); // ReferenceError: lalala is not defined
}

Throwing our own errors

Let's say we have a JSON and we are parsing it. What if the json is syntactically correct, but doesn’t have a required name property?

// Here JSON.parse runs normally, but non-existent 'name' is errorful.
let json = '{ "age": 30 }';

try {
  let user = JSON.parse(json);
  alert( user.name ); // ERROR: JSON doesn't have 'name' property
  
} catch (err) {
  alert( "doesn't execute" );
}

'Throw' operator

The throw operator generates an error. The syntax is:
```
throw <error object>
```

JS has many built-in constructors for standard errors: Error, SyntaxError, ReferenceError, TypeError, etc... We can use them to create error objects:

let error = new Error(message);
let error = new SyntaxError(message);
let error = new ReferenceError(message);
// For built-in errors (above), the 'name' property is the name of the constructor. And 'message' is taken from the argument.

Implementation of try-catch and throw operator:

// Have the abscence of `name` is an error
let json = '{ "age": 30 }'; // JSON

try {

  let user = JSON.parse(json); // <-- no errors

  if (!user.name) {	// if 'name' property doesn't exist
    throw new SyntaxError("Incomplete data: no name"); // (*)
  }

  alert( user.name );

} catch (err) {
  alert( "JSON Error: " + err.message ); // error mesaage display
}

Try-Catch-Finally

try {
   // try to execute the code
} catch (err) {
   // handle errors
} finally {
   // execute always
}

CALLBACKS

A callback is a function that's passed into another function and is to be executed after another function has finished executing.

Function Sequence

JS functions are executed in the sequence they are called. Not in the sequence they are defined. ie:

// myDisplayer changes innerHTML of an element, so the final call to it will be the final product.
function myFirst() { myDisplayer("Hi"); }
function mySecond() { myDisplayer("Bye"); }

myFirst();
mySecond();
// this example ends up displaying "Bye"

Callback Function

Let’s add a callback function as a second argument (usually anonymous) to loadScript that should execute when the script loads.

function myDisplayer(some) {
	document.getElementById("demo").innerHTML = some;
}

function myCalculator(num1, num2, myCallback) {
    let sum = num1 + num2;
    myCallback(sum);
}

myCalculator(5, 5, myDisplayer);

Using a callback, you can call myCalculator with a callback, and let the calculator function run the callback after the calculation is finished.
- Right: myCalculator(5, 5, myDisplayer);
- Wrong: myCalculator(5, 5, myDisplayer());

Callback in Callback

ie. We can load two scripts sequentially: the first one, and then the second one after it, by putting the second callback call inside the first callback:

// After the outer loadScript is complete, the callback initiates the inner one.

loadScript('/my/script.js', function(script) {
    alert(`Cool, the ${script.src} is loaded, let's load one more`);

    loadScript('/my/script2.js', function(script) {
    	alert(`Cool, the second script is loaded`);
    });
});

Callback Error handling

ie. In the case the script loading fails, the callback need to react to the error. The error handling usage:

loadScript('/my/script.js', function(error, script) {
    if (error) {
    	// handle error
    } else {
    	// script loaded successfully
    }
});

The first argument of the callback is actually reserved for an error if it occurs.

PROMISES

"Producing code" - code that does something and takes time. ie. code that loads the data over a network
"Consuming code" - code that wants the result of the “producing code” once it’s ready. ie. Functions
A Promise - a JavaScript object that links producing code and consuming code

Constructor Syntax

let promise = new Promise(function(resolve, reject) {
	// executor (the producing code)
});

executor - function passed to new Promise. "Producing Code"
resolve/reject - callbacks provided by JS itself. When the executor obtains the result, it should call one of these callbacks:
- resolve(value) — if the job is finished successfully, with result value.
- reject(error) — if an error has occurred, error is the error object.
The promise object returned by the new Promise constructor has these internal properties:
- state
  - initially "pending", then changes to either
  - "fulfilled" when resolve is called or
  - "rejected" when reject is called.
- result
  - initially undefined, then changes to either
  - value when resolve(value) is called or
  - error when reject(error) is called.

ie:

let myPromise = new Promise(function(resolve, reject) {
    // after 1 second signal that the job is done with the result "done"
    // calling resolve('done') changes myPromise properties to (state='fulfilled' and result='done')
    setTimeout(() => resolve("done"), 1000);
});

let promise = new Promise(function(resolve, reject) {
    // after 1 second signal that the job is finished with an error
	// calling reject(error) changes myPromise properties to (state='rejected' and result=error)
    setTimeout(() => reject(new Error("Whoops!")), 1000);
});

Note: there can only be one call to resolve/reject in the executor. All other resolve/reject calls below the first one are ignored.

Consumers: then, catch, finally

The state and result properties of the Promise object are internal. We can’t directly access them. We have to use the methods .then/.catch/.finally

then

// general syntax
myPromise.then(
  function(result) { /* handle a successful result */ },
  function(error) { /* handle an error */ }
);

The 1st argument of .then is a function that runs when the promise is resolved, and receives the result
The 2nd argument of .then is a function that runs when the promise is rejected, and receives the error

ie.

let myPromise = new Promise(function(resolve, reject) {
  setTimeout(() => resolve("done!"), 1000);
});

// a callback to resolve from the executor runs the first function in .then
myPromise.then(
    result => alert(result), // shows "done!" after 1 second
    error => alert(error) // doesn't run
);

catch

If we’re interested only in errors, then we can use null as the first argument:
.then(null, errorHandlingFunction)

Or we can use .catch(errorHandlingFunction), which is exactly the same:

let myPromise = new Promise((resolve, reject) => {
    setTimeout(() => reject(new Error("Whoops!")), 1000);
});

// .catch(f) is the same as promise.then(null, f)
myPromise.catch(alert); // shows "Error: Whoops!" after 1 second

finally

Just like there’s a finally clause in a try-catch there’s finally in promises.
The call .finally(f) is similar to .then(f, f) in the sense that f always runs when the promise is settled: be it resolve or reject.

It's a good handler for performing cleanup ie. stopping our loading indicators (not needed anymore regardless of outcome)

// here, there’s an error in the promise, passed through finally to catch:
let myPromise = new Promise((resolve, reject) => {
    throw new Error("error");
})

myPromise.finally(() => alert("Promise ready"))
myPromise.catch(err => alert(err));  // <-- .catch handles the error object

ie:

function loadScript(src) {
    return new Promise(function(resolve, reject) {
        let script = document.createElement('script');
        script.src = src;

        script.onload = () => resolve(script);
        script.onerror = () => reject(new Error(`Script load error for ${src}`));

        document.head.append(script);
    });
}

// loadscript returns a promise object
let myPromise =loadScript("/myscript.js");

myPromise.then(
    script => alert(`${script.src} is loaded!`),
    error => alert(`Error: ${error.message}`)
);

promise.then(script => alert('Another handler...'));

Promise Chaining

new Promise(function(resolve, reject) {

  setTimeout(() => resolve(1), 1000); // (*)

}).then(function(result) { // (**)

  alert(result); // 1
  return result * 2;

}).then(function(result) { // (***)

  alert(result); // 2
  return result * 2;

}).then(function(result) {

  alert(result); // 4
  return result * 2;

});

Here the flow is:

The initial promise resolves in 1 second (*),
Then the .then handler is called (**).
The value that it returns is passed to the next .then handler (***)
…and so on.

PreviousSQL NextJQuery

Last updated 2 years ago