• The source text of JS script gets scanned from left to right and converted into a sequence of input elements (tokens, control characters, line terminators, comments, or whitespace).
• Semicolon automatic insertion: JS will automatically insert a semicolon at the end of a line if it can't parse the code without a semicolon. This makes using semicolons technically optional. However, Both Google and AirBnB's style guides require them, and there is a minor (probably insignificant) hit to performance to have JS automatically insert it.
• Line length: Google recommends a maximum line length of 80 characters. AirBnB recommends 100.
  

let str = 'Hello';

str = 'hi'; // "hi" is a new string assigned to str. The "Hello" string primitive gets garbage collected.

• Primitives have no methods or properties directly. Instead:
• JavaScript determines the value's data type. The value can then access methods on the associated prototype. String primitives can access String.prototype methods. Number primitives can access Number.prototype methods, Boolean primitives can access Boolean.prototype methods.
• When a method from the prototype is called on a primitive value, JavaScript temporarily auto-boxes the value into a wrapper object, then calls the method from the prototype on it. 
• Example: "hello".toUpperCase() 
• "hello" has quotes around it so JavaScript parses it as a string data type.
• JavaScript auto-boxes the value into a wrapper object and gives it access to properties and methods from String.prototype.
• The String.prototype.toUpperCase method is called on the temporary object, and returns the string primitive 
  

• window.Date() for browser, global.Date() for Node //Using the global object name.
• this.Date() //Using the this keyword.
• Date() //The preferred method is to leave out the global object name since it is implied.

Global objects that are standard objects:

Global objects that are functions:

const [fruit, vegetable, meat] = ['apple', 'carrot', 'chicken'];
fruit; // 'apple'

const [fruit, vegetable] = ['apple', 'carrot', 'chicken'];
const [fruit, , meat] = ['apple', 'carrot', 'chicken'];

const [fruit='not specified', vegetable='not specified', meat='not defined'] = ['apple', 'carrot', 'chicken'];

let fruit = 'carrot'; let vegetable = 'apple';
[vegetable, fruit] = [fruit, vegetable]; // Now fruit is 'apple', vegetable is 'carrot'

const food = ['apple', 'carrot', 'chicken'];
[food[2], food[1]] = [food[1], food[2]]; // arr: ['apple', 'chicken', 'carrot']

const [meat, ...fruitAndVeg] = ['chicken', 'apple', 'carrot'];
// meat equals 'chicken', fruitAndVeg equals ['chicken', 'apple']

let res = 4; 

res += 3; // Same as res = res + 3
res; // returns 7

res -= 2; // Same as res = res - 2
res; // returns 5

res *= 4; // Same as res = res * 4
res; // returns 20

res /= 5; // Same as res = res / 5
res; // returns 4

• increment/decrement operators can only be used with variables.

7++; // SyntaxError

++"7"; // SyntaxError

let x = -7;
+x; // -7
+"-7"; // -7

+7; // 7; 
-7; // -7
+(-7); // -7
-(-7); // 7
+"7"; // 7
-"7"; // -7
+true; // 1
-true; // 11
+false; // 0
-false; // -0
+null; // 0
+""; // 0
+" "; // 0
+"Eleven"; // NaN
+undefined; // NaN
-undefined; // NaN

NaN !== NaN; 
-0 === +0; 
undefined !== null;

Object.is(7, (3 + 4)); // true
Object.is(NaN, NaN); // true
Object.is(-0, +0); // true
Object.is(-0, +0); // false

const input = someVal; // any value between 1 and 1000
if (0 < input && input <= 1000) console.log('valid');

const input = someVal; // any value
if (input === '' || input === null) console.error('invalid');

const input = someVal; // value should be a finite number
if (!Number.isFinite(input)) console.error('invalid');

let grade;
let score = 77;
if (score >= 90) {
  grade = 'A';
} else if (score >= 70) {
  grade = 'C';
} else {
  grade = 'F';
}
grade; // C

let age = 25; 
age >= 18 ? 'Adult' : 'Child'; // "Adult"

function weekday(num) { 
   switch (num) { 
    case 1: return 'Mon'; 
    case 2: return 'Tues'; 
    case 3: return 'Wed'; 
    case 4: return 'Thurs'; 
    case 5: return 'Fri'; 
    default: return 'Invalid Day';
  } 
} 
weekday(3); // returns 'Wed'

Boolean global object

• Boolean is a JavaScript standard built-in object in the global scope. It is also called a global object because it is attached to the global object (window or global):

Boolean === window.Boolean; // returns true in the browser environment
Boolean === global.Boolean; // returns true in the Node.js environment

• Boolean is a constructor function (functions are a type of object).

typeof Boolean; // returns 'function'

• When called with the new keyword, it instantiates a Number object. 

const bool = new Boolean(0); // creates a boolean object with value false
typeof bool; // returns 'object'

• When called in a non-constructor context (i.e., without the new keyword) it converts the argument to a boolean primitive value:

Boolean(0); // returns false
Boolean('Some string'); // returns true

Boolean static properties and methods:

• Boolean has three static properties and no methods:

Object.getOwnPropertyNames(Boolean); // returns length, name, prototype

Boolean instance properties and methods:

• Boolean literals are primitive values and not instances of the Boolean constructor:

typeof true; // returns 'boolean'
true instanceof Boolean; // returns false

true.constructor === Boolean; // returns true
Object.getPrototypeOf(false) === Boolean.prototype; // returns true

• The Boolean.prototype has three instance properties:

Object.getOwnPropertyNames(Boolean.prototype); // returns constructor, valueOf, toString

• valueOf: converts a boolean object to a boolean literal: 

const bool = new Boolean(1);
typeof bool; returns 'object'
bool.valueOf(); // returns true
typeof bool.valueOf(); // returns 'boolean'

• toString: converts a boolean to a string 

true.toString(); // returns 'true'

let input;

if (input) console.log(valid);

if (input || input === 0) console.log('valid input');

if (input.trim() || input === 0) console.log('valid input');

if (input != null) console.log('valid input');

if (typeof input !== 'undefined') console.log('valid input');

for (let i = 1; i < 6; i++) { 
  console.log(i); 
} // logs 1 through 5

let i = 1;
while (i < 6) {
  console.log(i);
  i++;
} // logs 1 through 5.

let i = 1;
do {
  console.log(i++);
} while (i < 6); // logs 1 through 5

const arr = ['a', 'b', 'c', 'd', 'e']; 
for (const elem of arr) { 
  console.log(elem); 
}  // logs a b c d e.

for (const char of 'Hello') { 
  console.log(char); 
} // logs each of the characters in the string as separate elements. 

const numArr = [1,2,3]; 
let res = 1; 
for (const val of numArr) { 
  res *= val; 
}
res; // 6

const person = { name: 'Joey', gender: 'male', age: 30 }; 
let res = ''; 
for (const prop in person) { 
  res += person[prop] + ' '; 
}
res; // "Joey male 30 "

function double(num) { //Fn definition: fn keyword, fn name, params.
  const res = num * 2; //Function body.
  return res;
}
double(5);

function square(num) { 
  return num * num; 
}; 
square(2); //Returns 4

square(2); // 4
function square(num) { 
  return num * num; 
}; 

function mathFunctions() { 
  function square(x) { return x * x; } 
}
square(2); //Uncaught ReferenceError: square is not defined

if (true) { 
  function square(x) { return x * x } 
}
square(2); //Returns 4

function square(num) { return num * num; }
window.square(2); //Returns 4

const square = function(num) { 
  return num * num;
}; 
square(4); // 16

• The name can only contain letters, digits, underscores, and dollar signs, but cannot begin with a number. Use lowerCamelCase for multiword names.
• It is block scoped.
• It cannot use the same name as another function or variable in the same scope.
• It cannot be redeclared in the same scope.
• It is not hoisted, so it cannot be called before it is declared.
  
• It does not become part of the global object even if declared in the global scope.

• Google and AirBnB style guides both recommend using arrow functions over function declarations. Reasoning is hoisting potentially harms readability/maintainability since function declarations can be called before they are declared.

const double = (num) => {
  return num * 2;
}
double(10); // returns 20

double(10); // Uncaught ReferenceError: double is not defined
const double = (num) => {
  return num * 2;
}

if (true) { 
  const double = (x) => { 
    return x * 2;
  } 
} 
double(10); // Uncaught ReferenceError: double is not defined

const double = (num) => {
  return num * 2; 
}
double(10); // returns 20
window.double(10); // Uncaught TypeError: window.double is not a function

const double = (num) => num * 2;
double(10); // returns 20

const setUser = (user) => ({name: user}); 
setUser("Joey"); // {name: "Joey"}

• If you add curly braces you must also add the return statement:

const double = (num) => { return num * 2; }
double(10); // returns 20

function square(num) {
  return num * num;
}
square(4); //Returns 16

(function (num) { 
  return num * num; 
}(4)); //Returns 16

function double(num) {
   return num * 2;
}
double(10, 8, 77);

function double(num) {
  return num * 2;
}
double();

function multiply(a, b = 1) { 
  return a * b; 
} 
multiply(7); //Returns 7 

• Passing undefined as an argument to a parameter that has a default will result in the default. Passing null will result in null.

function multiply(a, b = 1) { 
  return a * b; 
} 
multiply(7, null); //Returns 0. 7 * null becomes 7 * 0 which returns 0. 

• Parameters already encountered are available to later default parameters. If not yet encountered, throws a ReferenceError. 

function func(x, y = x/2) { 
  return x + y; 
} 
func(4); // 6

• Ref: MDN Functions/rest_parameters
• The rest parameter can be any valid variable name and is prefixed with ... 
• Only the last parameter can be a "rest parameter".
• If no arguments are passed to the ...rest parameter, it's value is an empty array [];
• Rest parameter syntax looks exactly like the spread syntax. However, it does the opposite. The spread syntax expands an elements out of an array, while the rest syntax condenses the values into an array.

const highScore = (name, ...scores) => {
  const sorted = scores.sort((a,b) => b - a);
  return `${name}'s highest score is ${sorted[0]}.`
}
highScore('Judy', 75, 82, 94, 72, 88); //Returns 'Judy's highest score is 94.'

let age = 22;
const person = { name: 'Joey', age: 22 };
function changeVals(age, person) {
  age += 1;
  person.age += 1; 
  console.log('Inside function:', age, person.age); //Inside function: 23, 23
}
changeVals(age, person); 
console.log('Outside function:', age, person.age); //Outside function: 22, 23

• Objects are stored in heap memory while primitives are stored in stack memory. Variables assigned to objects hold the memory address as their value, not the actual object property values.
• Objects (including arrays) passed in as arguments actually pass in a reference to the object in memory, not the actual object property values. 
• The function parameter creates a local variable that refers to that object. If the function changes the object's properties, the change is applied to the object/array in the heap memory. This changes the values both inside and outside the function.

const toBoolean = (value) => {
  if (value === 'Yes') {
    return true;
  } else if (value === 'No') {
    return false;
  }
}
toBoolean('Yes'); //Returns true 
toBoolean('No'); //Returns false 
toBoolean('Not sure'); //Returns undefined 

• Strings can use single or double quotes: const str = 'Hello'; or const str = "Hello";
• Both Google and AirBnB JS style guide recommend using single quotes for strings and template literals (``) if the string contains single quotes.
• Primitive values are represented directly at the lowest level of the language implementation. This makes it fast and efficient. 
• Use string primitives over String objects.
• You can call any of the properties and methods of the String object on a string literal value. JS automatically converts the string literal to a temporary String object, calls the method, then discards the temporary String object. 

'Hello'.constructor; // String()
'Hello'.constructor.prototype; // String
'Hello'.toUpperCase(); // "HELLO"

let str = "Advice for new web devs:\n\t\"Learn JavaScript Basics\"";
str; 

const name = 'Joey';
const str = `Hello ${name}`; // Embedded expressions go inside ${}
str;

const multiLine = `This string
spans multiple
lines.`;
multiLine;

String global object

• String is a JavaScript standard built-in object in the global scope. It is also called a global object because it is attached to the global object (window or global):

String === window.String; // returns true in the browser environment
String === global.String; // returns true in the Node.js environment

• String is a constructor function (functions are a type of object).

typeof String; // returns 'function'

• When called with the new keyword, it instantiates a String object. 

const str = new String('Hello');
typeof str; // returns 'object'

• When called in a non-constructor context (i.e., without the new keyword) it converts the argument to a string primitive value:

String(10); // returns '10'
String(true); // returns 'true'

String static properties and methods:

• String has some static properties:

Object.getOwnPropertyNames(String); // returns length, name, prototype, fromCharCode, fromCodePoint, raw

String Instance properties and methods:

• String literals are primitive values and not instances of the String constructor:

typeof 'Hello'; // returns 'string'
'Hello' instanceof String; // returns false

'Hello'.constructor === String; // returns true
Object.getPrototypeOf("Hello") === String.prototype; // returns true

Object.getOwnPropertyNames(String.prototype); // Returns: length, constructor, anchor, big, blink, bold, charAt, charCodeAt, codePointAt, concat, endsWith, fontcolor, fontsize, fixed, includes, indexOf, italics, lastIndexOf, link, localeCompare, match, matchAll, normalize, padEnd, padStart, repeat, replace, replaceAll, search, slice, small, split, strike, sub, substr, substring, sup, startsWith, toString, trim, trimStart, trimLeft, trimEnd, trimRight, toLocaleLowerCase, toLocaleUpperCase, toLowerCase, toUpperCase, valueOf, at.

let str = 'Hello';
str.length; // 5

let str = 'hELLo';
str = str.toUpperCase(); // HELLO
str = str.toLowerCase(); // hello
str = str.charAt(0).toUpperCase() + str.slice(1); // Hello

let phone = '415-555-5555';
phone.replace(/-/g, '.'); // "415.555.5555"

• Use matchAll to get an array of information on each match (searching globally, case insensitive) and put the matches in an iterator.
• Use array destructuring to put the matches in an actual array. Then iterate over the array, logging the info for each match.

const str = 'This string contains cat and dog. Cat by itself is in twice, then there are category and catch.';
const matches = [...str.matchAll(/cat/ig)];
matches.forEach((match) => console.log(match));

let regex = /findme/;

let regex = new RegExp('findme');

let regex = new RegExp(/findme/);

let input = 'findme'
let regex = new RegExp(input);

RegExp global object

• RegExp is a JavaScript standard built-in object. It is also called a global object because it is attached to the global object (window or global):

RegExp === window.RegExp; // returns true in the browser environment
RegExp === global.RegExp; // returns true in the Node.js environment

• RegExp is a constructor function (functions are a type of object).

typeof RegExp; // returns 'function'

• When called with the new keyword, it instantiates a RegExp object. 

const re = new RegExp('pattern', 'g');
typeof re; // returns 'object'

RegExp static properties and methods:

• RegExp has some static properties:

Object.getOwnPropertyNames(RegExp); // returns length, name, prototype, input, $_, lastMatch, $&, lastParen, $+, leftContext, $`, rightContext, $', $1, $2, $3, $4, $5, $6, $7, $8, $9,

RegExp Instance properties and methods:

• RegExp literals are instances of the RegExp constructor:

typeof /pattern/; // returns 'object'
/pattern/ instanceof RegExp; // returns true
/pattern/.constructor === RegExp; // returns true

Object.getPrototypeOf(/pattern/) === RegExp.prototype; // returns true

Object.getOwnPropertyNames(RegExp.prototype); // Returns: constructor, exec, dotAll, flags, global, hasIndices, ignoreCase, multiline, source, sticky, unicode, compile, toString, test

• 'Replace first "a" only'.replace(/a/, 'x'); // 'Replxce first "a" only'
• 'Replace all "a"s globally'.replace(/a/g, 'x'); // "Replxce xll "x"s globxlly"

const str = `Multi-line matching.
At least one line starts with "a".`;
/^A/.test(str); // false
/^A/m.test(str); // true

• /[abc]/.test('cdef'); // true, there is at least one a, b, or c in this string. 
• /[^abc]/.test('abcd'); // true, there are characters other than a, b, and c in this string.
• /[^\d]/.test('01234'); // false, there are no non-digit characters in this string so this test fails.
• /[A-Z]/.test('Joey'); // true, there is at least one capital letter (A-Z) in this string.
• /[^A-Z]/.test('Joey'); // true, there is at least one character that is not a capital letter (A-Z) in this string.
• /[^A-Z]/.test('JOEY'); // false, there are characters that are not capital letters (A-Z) so this test fails.
• /[^A-Z]/.test('JOEY2'); // true, there is at least one character (the number 2) that is not a capital letter (A-Z).
• /[^A-Z]/.test('JOEY '); // true, there is at least one character (a space) that is not a capital letter (A-Z).

• /(ab|c)/.test('ab'); // true, there is either an "ab" or "c".

• /^[A-Za-z\s']+$/.test("Patrick O'Brien"); // true, contains one or more letters, spaces, or apostrophies from beginning to end.
• /^[A-Za-z\s']{3,}$/.test("Patrick O'Brien"); // true, contains at least 3 letters, spaces, or apostrophies from beginning to end.
• /^\d{3}\s?\d{3}-\d{4}$/.test("(415)555-1234"); // true, contains 3 digits, 0 or 1 spaces, 3 digits, "-", and 4 digits from beginning to end.

let regex = new RegExp("l", "gi");
"Hello".match(regex); // ["l", "l"] 

const data = 'This is a document that contains the letter X';

/x/i.test(data); // true

const letter = 'x';
new RegExp(letter, 'i').test(data); // true

const animal = 'cat'
data.match(new RegExp('\\b' + animal + 's?\\b', 'gi'));
data.match(new RegExp(`\\b${animal}s?\\b`, 'gi'));
 // ["Cat", "cat", "cats"] 

Number global object

• Number is a JavaScript standard built-in object in the global scope. It is also called a global object because it is attached to the global object (window or global):

Number === window.Number; // returns true

• Number is a constructor function (functions are a type of object).

typeof Number; // returns 'function'

• When called with the new keyword, it instantiates a Number object. 

const numObj = new Object(7); // creates a Number object with value 7
typeof numObj; // returns 'object'

• When called in a non-constructor context (i.e., without the new keyword) it converts the argument to a primitive number:

Number('7'); // converts the string '7' to number 7
Number('Hello'); // converts the string 'Hello' to number NaN
Number(true); // converts the boolean true to number 1
Number(false); // converts the boolean false to number 0

Number static properties and methods:

• Number has several static properties and methods:

Object.getOwnPropertyNames(Number); // returns length, name, prototype, isFinite, isInteger, isNaN, isSafeInteger, parseFloat, parseInt, MAX_VALUE, MIN_VALUE, NaN, NEGATIVE_INFINITY, POSITIVE_INFINITY, MAX_SAFE_INTEGER, MIN_SAFE_INTEGER, EPSILON

Number instance properties and methods:

typeof 7; // returns 'number'
7 instanceof Number; // returns false

(7).constructor === Number; // returns true
Object.getPrototypeOf(7) === Number.prototype; // returns true

Object.getOwnPropertyNames(Number.prototype); // returns constructor, toExponential, toFixed, toPrecision, toString, valueOf, toLocaleString

Number.isFinite(7); // true
Number.isFinite(Infinity); // false 
Number.isFinite(-Infinity); // false 
Number.isFinite(NaN); // false 
Number.isFinite(0); // true 
Number.isFinite(2e64); // true 
Number.isFinite(undefined); // false

Number.isFinite('7'); // false; 
Number.isFinite(true); // false; 
Number.isFinite(false); // false; 
Number.isFinite(null); // false; 
Number.isFinite(""); // false; 
Number.isFinite(" "); // false; 

Number.isInteger(7); // true 
Number.isInteger(-7); // true 
Number.isInteger(7.0); // true 
Number.isInteger(7.1); // false 
Number.isInteger("7"); // false 
Number.isInteger(NaN); // false
Number.isInteger(Infinity); // false
Number.isInteger(-Infinity); // false

Number.isSafeInteger(7); // true
Number.MAX_SAFE_INTEGER; // Returns 9007199254740991
Number.isSafeInteger(Number.MAX_SAFE_INTEGER); // true
Number.isSafeInteger(Number.MAX_SAFE_INTEGER + 1); // false

Number.isNaN(Math.PI); // false
Number.isNaN('7.3'); // false
Number.isNaN(NaN); // true
Number.isNaN(Number('some text')); // true
Number.isNaN(true); // false
Number.isNaN(false); // false
Number.isNaN(null); // false
Number.isNaN(""); // false
Number.isNaN(" "); // false

Number.isNaN(undefined); // false; 
Number.isNaN('sometext'); // false; 
Number.isNaN({}); // false, 

typeof Math; // returns 'object'

Object.getOwnPropertyNames(Math); // returns abs, acos, acosh, asin, asinh, atan, atanh, atan2, ceil,cbrt, expm1, clz32, cos, cosh, exp, floor, fround, hypot,imul,log, log1p, log2, log10, max, min, pow, random, round, sign,sin, sinh,sqrt, tan, tanh, trunc, E, LN10,LN2, LOG10E, LOG2E, PI, SQRT1_2, SQRT2

function random(min, max) { 
  return Math.floor(Math.random()*(max-min+1))+min;
} 
random(1, 10);

Date global object

• Date is a JavaScript standard built-in object. It is a global object since it is attached to the global object (window in the browser or global in Node.js):

Date === window.Date; // returns true in the browser environment
Date === global.Date; // returns true in the Node.js environment

• Date is a constructor function (functions are a type of object).

typeof Date; // returns 'function'

• When called with the new keyword, it instantiates a Date object. 

const date = new Date(); // instantiates an new Date object
typeof date; // returns 'object'

• When called in a non-constructor context (i.e., without the new keyword) it returns the current date string using the system's timezone and language format:

const date = Date(); // returns "current day date time timezone"

Date static properties and methods:

• Date static properties and methods are called on the Date object (e.g., Date.parse())

Object.getOwnPropertyNames(Date); // returns length, name, prototype, now, parse, UTC

Date Instance properties and methods:

• There are no date literals, only date objects. 
• Date values are returned as a timestamp number or a string.

Object.getPrototypeOf(new Date() === Date.prototype); // returns true

Object.getOwnPropertyNames(Date.prototype); // Returns: constructor, toString, toDateString, toTimeString, toISOString, toUTCString, toGMTString, getDate, setDate, getDay, getFullYear, setFullYear, getHours, setHours, getMilliseconds, setMilliseconds, getMinutes, setMinutes, getMonth, setMonth, getSeconds, setSeconds, getTime, setTime, getTimezoneOffset, getUTCDate, setUTCDate, getUTCDay, getUTCFullYear, setUTCFullYear, getUTCHours, setUTCHours, getUTCMilliseconds, setUTCMilliseconds, getUTCMinutes, setUTCMinutes, getUTCMonth, setUTCMonth, getUTCSeconds, setUTCSeconds, valueOf, getYear, setYear, toJSON, toLocaleString, toLocaleDateString, toLocaleTimeString

• If time zone is not specified, the local time zone is used.
• Exception to this: if date is formatted as YYYY-MM-DD, then the UTC time zone is used.

new Date('2025, 11, 31, 23, 59, 59'); // same as 'December 31, 2025, 23:59:59 UTC'

Returns the object's primitive value, in the case of Date is a number representing the number of milliseconds since 1/1/1970 UTC.

const date = new Date('2025-09-01 17:30:00');

• //Display date based on the default system locale.

date.toLocaleString(); // (e.g., en-US default) '9/1/2025, 5:30:00 PM'

• //Display date using English-US locale, then using English-Great Britain locale.

date.toLocaleString('en-US'); // '9/1/2025, 5:30:00 PM'
date.toLocaleString('en-GB'); // '01/09/2025, 17:30:00'

• //Set locale to en-US and display date/time as: '09/01/2025, 05:30:00 PM'

date.toLocaleString('en-US', {year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit'}); 

• //Set locale to en-US and display date/time as: '9/1/25, 5:30:00 PM'

date.toLocaleString('en-US', {year: '2-digit', month: 'numeric', day: 'numeric', hour: 'numeric', minute: '2-digit'}); 

date.toLocaleString('en-US', {year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit'});

date.toLocaleString('en-US', {year: 'numeric', month: 'long', day: 'numeric', weekday: 'long', hour: 'numeric', minute: '2-digit', timeZoneName: 'long'});

const date = new Date('2025-12-31 09:30:00 PST');
date.toLocaleTimeString(); // "9:30:00 AM"
date.toLocaleTimeString('en-US', {hour: 'numeric', minute: '2-digit'}); // "9:30 AM"
date.toLocaleTimeString('en-US', {hour: '2-digit', minute: '2-digit'}); // "09:30 AM"

Local time zone:

Array global object

• Array is a JavaScript standard built-in object. It is also called a global object because it is attached to the global object (window or global):

Array === window.Array; // returns true in the browser environment
Array === global.Array; // returns true in the Node.js environment

• Array is a constructor function (functions are a type of object).

typeof Array; // returns 'function'

• Array when called with or without the new keyword will instantiate an Array object. 

const arr2 = new Array('cherry', 'watermelon', 'peach');
const arr3 = Array('mango', 'tangerine', 'pomagranite');

Array static properties and methods:

• Array static properties:

Object.getOwnPropertyNames(Array); // returns length, name, prototype, isArray, from, of

Array Instance properties and methods:

• Array literals are instances of the Array constructor:

typeof []; // returns 'object'
[] instanceof Array; // returns true
[].constructor === Array; // returns true

Object.getPrototypeOf([]) === Array.prototype; // returns true

Object.getOwnPropertyNames(Array.prototype); // Returns: length, constructor, concat, copyWithin, fill, find, findIndex, lastIndexOf, pop, push, reverse, shift, unshift, slice, sort, splice, includes, indexOf, join, keys, entries, values, forEach, filter, flat, flatMap, map, every, some, reduce, reduceRight, toLocaleString, toString, at, findLast, findLastIndex

const arr = new Array('a', 'b', 'c', 'd', 'e');
const arr2 = Array('a', 'b', 'c', 'd', 'e');

const arr3 = new Array(3);

const arr = ['a',          'b',  'c',  'd',  'e'];
arr.length; 

arr.length = 7;

arr.length = 3;

const arr = ['a', 'b', 'c', 'd', 'e'];

let i = arr.indexOf('d'); // returns 3

arr[i] = 'X'; // arr is now ['a', 'b', 'd', 'X', 'e']

arr.splice(i, 1); // arr is now ['a', 'b', 'd', 'e']

const users = [{id: 1, name: 'Joey'}, {id: 2, name: 'Sheena'}, {id: 3, name: 'Johnny'}];

const i = users.findIndex((user) => user.id === 1); // returns index 0

const user4 = { id: 4, name: 'Judy' };
users.push(user4);

const user1 = { id: 1, name: 'Joseph' };
users[i] = user1;

users[i].name = 'Joseph';

users.splice(i, 1);

users; // returns [{id: 2, name: 'Sheena'}, {id: 3, name: 'Johnny'}, {id: 4, name: 'Judy'}]

const users = ['Joey', 'Sheena', 'Johnny', 'Joey', 'DeeDee'];
users.indexOf('Joey'); // returns 0

const users = ['Joey', 'Sheena', 'Johnny', 'Judy', 'DeeDee'];
users.includes('Judy'); // returns true

const ages = [20, 16, 19, 24, 26, 19];
ages.some((age) => age >= 21); // true

const arrs = [['a', 'b'], ['c', 'd', 'e'], ['f']];
const flatArr = arrs.reduceRight((prev, curr) => {
    return prev.concat(curr);
}, []);
flatArr; // ["f", "e", "d", "c", "b", "a"]

const arr = ['a', 'b', 'c', 'd', 'e'];
const arrCopy = [...arr]; 

const arr = ['a','b','c','d','e'];
const arrCopy = arr.slice(); //arrCopy is ['a','b','c','d','e']

const arr = ['a', 'b', 'c'];

let copiedArr = [...arr, 'd']; 

copiedArr = arr.map((elem) => elem === 'c' ? 'X' : elem);

copiedArr = arr.filter((item) => item !== 'b');

const article = {
  title: 'Learn JavaScript',
  content: 'Lorem Ipsum',
  categories: ['education', 'tech'],
  author: { name: 'Joey'},
};

const user = new Object({name: 'Joey', age: 29});

const user = Object({name: 'Joey', age: 29});

const article = {}
article.author; // undefined
article.author.name // Uncaught TypeError Cannot set property 'name' of undefined

article.author && article.author.name // undefined

article.author?.name // undefined

Object global object

• Object is a JavaScript standard built-in object in the global scope. It is also called a global object because it is attached to the global object (window or global):

Object === window.Object; // returns true in the browser environment
Object === global.Object; // returns true in the Node.js environment

• Object is a constructor function (functions are a type of object).

typeof Object; // returns 'function'

• When called with the new keyword, it instantiates an object. 

const obj = new Object('Hello'); // creates a Sting object with value 'Hello'
typeof obj; // returns 'object'

• When called in a non-constructor context (i.e., without the new keyword) it converts the argument to an object:

Object(7); // converts the primitive value to a Number object with value 7
Object('Hello'); // converts the primitive value to a String object with value "Hello"

Object static properties and methods:

• Object has several static properties that can be used with any object. 

Object.getOwnPropertyNames(Object); // returns length, name, prototype, assign, getOwnPropertyDescriptor, getOwnPropertyDescriptors, getOwnPropertyNames, getOwnPropertySymbols, is, preventExtensions, seal, create, defineProperties, defineProperty, freeze, getPrototypeOf, setPrototypeOf, isExtensible, isFrozen, isSealed, keys, entries, fromEntries, values, hasOwn

Object instance properties and methods:

typeof {}; // returns 'object'
{} instanceof Object; // returns true
{}.constructor; // returns Object

Object.getPrototypeOf({}) === Object.prototype; // returns true

Object.getPrototypeOf(String.prototype) === Object.prototype; // true 
Object.getPrototypeOf(Number.prototype) === Object.prototype; // true 
Object.getPrototypeOf(Boolean.prototype) === Object.prototype; // true 
Object.getPrototypeOf(Date.prototype) === Object.prototype; // true 
Object.getPrototypeOf(Array.prototype) === Object.prototype; // true 
Object.getPrototypeOf(Function.prototype) === Object.prototype; // true 

Object.getOwnPropertyNames(Object.prototype); // Returns: constructor, hasOwnProperty, isPrototypeOf, propertyIsEnumerable, toString, valueOf, __proto__, toLocaleString

const user = { name: 'Joey', age: 22 };

Object.preventExtensions(user);
Object.isExtensible(user); // returns false

Object.seal(user); 
Object.isSealed(user); // returns true

Object.freeze(user);
Object.isFrozen(user); // returns true

• Get the constructor function of an array literal.

• Get the constructor function of an object literal.

class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
const user1 = new User('Joey', 22);

let str = new String('Hello'); // create a String object
typeof str; //Returns 'object'
typeof str.valueOf(); //Returns 'string'

const user = { name: 'Joey', age: 22 };
user.toString(); // Returns [object Object]

user.toString = () => `User name is ${user.name}, age is  ${user.age}`;
user.toString(); // returns 'User name is Joey, age is 22'

• Prove that Global Objects are instances of Object:

• Prove that an array literal is an instance of both Array and Object:

• Prove that an object literal is an instance of Object:

• Prove that a string literal is not an instance of String:

• Make 'Hello' an object, then prove it is an instance of String and Object:

class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

• JavaScript is an object object-oriented programming language, but unlike most OOP languages it uses prototypes instead of classes. 
• Prototypes are objects that contain constructor functions. Constructor functions are used to create object instances of the prototype. The prototype's constructor function is a template that defines the properties that all prototype instances will have.
• The constructor function has a property called prototype. This is an object that holds the instance methods defined in the class. Each object created with the class has an internal property pointing to the prototype object.
• New instance objects are returned from a constructor function when it is called, appended with the "new" operator, passing in property values as arguments.
• Traditional OOP classes do essentially the same thing. The difference is that unlike classes, JS constructors are just regular functions. Any function can be converted to a constructor function to make objects. And objects created from a prototype can be mutated. You can just add properties to an instance without regard to its prototype.
• ES2015 introduced the class keyword to use for prototypes and gave them a special syntax. Despite using the word class, they are still JS constructor functions (you could call it syntactic sugar). But just like traditional classes, a JS class is a template of properties and methods used to create instance objects of the prototype.

class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
const user1 = new User('Joey', 22);
user1; // User {name: "Joey", age: 22}

class Article {  
  constructor(title, content, categories, author) {
    this.title = title;
    this.content = content;
    this.categories = categories;
    this.author = author;
  }
}
const article1 = new Article('Learn JavaScript', 'Lorem ipsum', ['education', 'tech'], user1);

class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  get profile() {
    return `User ${this.name} is age ${this.age}`;
  }
}
const user1 = new User('Joey', 22);
user1.profile; // 'User Joey is age 22'; 

class User { 
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  toString() { return `<User: ${this.name}>`; }
}
const user1 = new User('Joey', 22);
user1.toString(); // '<User: Joey>'

user1.toString(); // "[object Object]"

class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  static about() {
    return 'The User class has properties for name and age.';
  }
}

class PremiumUser extends User {
  constructor(name, age, access) {
    super(name, age);
    this.access = access;
  }
}
const premiumUser1 = new PremiumUser('Johnny', 32, 'all');
premiumUser1; // PremiumUser {name: "Johnny", age: 32, id: 3, access: "all"}

• Library: A Collection of prewritten code snippets, related in some way, that you can import as a whole and use in your code. It can be a single file or a directory. Examples: jQuery, React, packages installed with npm. You can also create your own libraries.
• Module: In JS, to use a library it must be exported as a module. Modules can be third party packages, Node built-in modules, or merely a separate file in your project. In Node.js, each file is treated as a separate module.
• Package: A package is a library/module that has been prepared to be installed using a package manager like npm. Packages must have a package.json file. NPM installs packages in the node_modules folder. All packages are modules, but not all modules are packages. 

• './fileName' Import file from the same directory.
• './path/to/fileName' Import file from a child directory.
• '../fileName' Import file from the parent directory.
• '../path/to/fileName' Import file from a sibling directory.
• Absolute paths start with / and are from the computer's root directory. Generally avoid absolute paths since they will likely differ from the development and production machines.

const fs = require('fs');
console.log(fs.readdirSync('.'));

const { readdirSync, readFile } = require('fs');
console.log(readdirSync('.'));

const axios = require('axios');
const users = await axios.get('https://jsonplaceholder.typicode.com/users');

const { post, get } = require('axios');
const users = await get('https://jsonplaceholder.typicode.com/users');

Export file: calculator.js

const calculator = {
  double: (x) => x * 2,
  triple: (x) => x * 3
};
module.exports = calculator;

Import file: app.js

const calculator = require('./calculator'); // relative path
console.log(calculator.double(10)); // logs 20
console.log(calculator.triple(10)); // logs 30

class Calculator {
  double(x) { return x * 2; } 
  triple(x) { return x * 3; }
}
const calculator = new Calculator();
module.exports = calculator;

const calculator = require('./calculator'); // relative path
console.log(calculator.double(10)); // logs 20
console.log(calculator.triple(10)); // logs 30

Export file: calculator.js

const double = (x) => x * 2;
const triple = (x) => x * 3;
module.exports = { double, triple };

Import file: app.js

const { double, triple } = require('./calculator');
console.log(double(10)); // logs 20
console.log(triple(10)); // logs 30

Export file: calculator.js

const double = (x) => x * 2;
const triple = (x) => x * 3;
module.exports = { double, triple };

Import file: app.js

const calculator = require('./calculator');
console.log(calculator.double(10)); // logs 20
console.log(calculator.triple(10)); // logs 30

Export file: calculator.js

exports.double = (x) => x * 2;
exports.triple = (x) => x * 3;

Import file: app.js

const { double, triple } = require('./calculator');
console.log(double(10)); // logs 20
console.log(triple(10)); // logs 30

import fs from 'fs';
console.log(fs.readdirSync('.'));

import { readdirSync, readFile } from 'fs';
console.log(readdirSync('.'));

import axios from 'axios';
const users = await axios.get('https://jsonplaceholder.typicode.com/users');

import { get, post } from 'axios';
const users = await get('https://jsonplaceholder.typicode.com/users');
post('https://jsonplaceholder.typicode.com/users', { name: 'Joey', age: 22 });

Export file: calculator.js

const calculator = {
  double: (x) => x * 2,
  triple: (x) => x * 3
};
export default calculator;

Import file: app.js

import calculator from './calculator.js'; // relative path
console.log(calculator.double(10)); // logs 20
console.log(calculator.triple(10)); // logs 30

class Calculator {
  double(x) { return x * 2; } 
  triple(x) { return x * 3; }
}
const calculator = new Calculator();
export default calculator;

import calculator from './calculator.js'; // relative path
console.log(calculator.double(10)); // logs 20
console.log(calculator.triple(10)); // logs 30

const double = (x) => x * 2;
const triple = (x) => x * 3;
export { double, triple };

Import file: app.js

import * as calculator from './calculator.js';
console.log(calculator.double(10)); // logs 20
console.log(calculator.triple(10)); // logs 30

Import file: app.js

import { double as twoTimes, triple as threeTimes } from './calculator.js';
console.log(twoTimes(10)); // logs 20
console.log(threeTimes(10)); // logs 30

console.log('Performing some side effect');

myFile.js

import './myModule.js'; // Logs "Performing some side effect"

const double = (x) => x * 2;
const triple = (x) => x * 3;
export { double, triple };

import { double, triple } from './calculator.mjs';
console.log(double(10)); // logs 20
console.log(triple(10)); // logs 30

package.json

{
  ...
  "type": "module",
  ...
}

• On the client side (i.e., in the HTML document), set the type attribute in the script tag:

 Explain Diagram:

• Runtime: Stage of the programming lifecycle when the program is running.
• Runtime Environment: Environment in which JS is run. Browser, Node.js.
• Script: Program or sequence of instructions interpreted/executed by another program.
• Core JavaScript: ECMAScript. Excludes Web APIs.
• JS engine: An interpreter that parses and executes a JavaScript program.
• JIT Compilation: JS engines compile JS directly to machine code before executing it.
• API: Interface for programs to communicate with each other. 
• Web APIs: Browser I/O APIs such as DOM, fetch, storage, timers, etc.
• Node I/O APIs: Core Node.js modules and 3rd party NPM packages.
• Heap Memory: Region of memory, mostly unstructured, that stores objects, functions.
• Call Stack: Stack data structure of currently executing nested function. Uses LIFO.
• Events: Actions/occurrences that happen to HTML elements like a button click.
• Callback Queue: On event, message and associated callback are added to the Queue.
• Microtask queue: Similar to Callback Queue but for Promises.
• Event Loop: Monitors Call Stack and Queue. Places Callback on stack when empty.
• Single Treaded: Has one call stack and one memory heap. 
• Synchronous: Blocking code executed in sequence.
• Asynchronous: Non-blocking. Doesn't await result before moving to next line.
• ---
• Runtime: The stage of the programming lifecycle when the program is running alongside any external instructions such as interfacing with Input/Output APIs. 
• Runtime environment (or runtime system): The environment in which a programming language is run. JavaScript has two principal runtime systems, the browser and Node.js.
  Browser Runtime environment: Includes a JS engine, Input/output APIs, and an event loop. The I/O APIs are the Web APIs, particularly the DOM to manipulate HTML documents.
  Node Runtime environment: Includes the V8 JS engine (also used in Chrome and Edge), Input/output APIs, and an event loop. The I/O APIs are Node modules and 3rd party npm packages for interfacing with the computer's file system, external storage (e.g., database), HTTP requests/responses, etc.
  The event loop listens for and responds to events like a user clicking on a button in the Browser or a database query returning a response in a Node.js app.
• Core JavaScript: Also called ECMAScript with standards set by the Ecma International organization. Includes the language syntax, data types, built-in objects and functions (String, Number, Boolean, Array, Object, RegExp, Math, Error, etc.), prototype-based inheritance mechanism, basic memory model. In the browser, core JavaScript is JavaScript without the Web APIs.

• JS Engine: The JavaScript engine is an interpreter that parses and executes a JavaScript program.
  JavaScript was created to run in the browser. Each browser includes a JavaScript engine and a rendering engine that renders HTML documents, images, and CSS styling. The two work in concert via the Document Object Model (DOM). 
  The JS engine executes core JavaScript code (JS without Web APIs) and manages heap and stack memory including garbage collection. Chrome, Edge and Node.js use a JS engine created by Google called V8.
• Script: A program or sequence of instructions that is interpreted or carried out by another program. This is in contrast to a language that is compiled ahead of time, and executed by the computer processor at runtime.
  
• Scripting language: A programming language that can be executed by an interpreter at runtime, without being compiled ahead of time. JavaScript is a scripting language.
• Interpreted: High level programming languages are either executed as is by an interpreter at run time, or are compiled to lower level code ahead of time.
  C, C++, C#, Swift and Java are examples of compiled languages. They require an extra "build" step when the program is complete, but before it can be run. This is generally done through an IDE like Eclipse for Java or a compiler like GCC for C and C++.
  JavaScript, Python, PHP, and Ruby are examples of interpreted languages.
  
• JIT Compilation: Since the release of V8 in 2008, JS engines use just-in-time (JIT) compilation. The JS engine compiles the JavaScript source code directly into native machine code during run time before executing it. Since JavaScript is not compiled by the user ahead of time, it is still considered an interpreted language.
• API (Application Programming Interface): An interface for two or more computer programs to communicate with each other. 
• Web APIs: Web browsers offer a multitude of Input/Output APIs called Web APIs. The DOM API lets you access and modify a web page with JavaScript. The fetch API lets you fetch data from the server. Storage APIs store/access data in the browser. Web APIs are executed behind the scenes using lower level programming languages like C++.
• Node I/O APIs: The Node.js Runtime Environment has Input/Output APIs to access Node.js modules and 3rd party npm packages. The fs module allows interacting with the computer's file system. The http module creates a web server and interact with the HTTP request/response cycle. There are npm packages to interact with a database, create a web framework, and many other things.
• Heap Memory: Region of computer memory, mostly unstructured, that stores objects, including functions.
• Call Stack: A mechanism used by the JavaScript engine to keep track of nested function calls. Follows the Last In First Out (LIFO) principle. The last function called is at the top of the stack and executed first. When complete it is removed from the stack.
• Events: Actions or occurrences that happen to HTML elements. They can be user actions such as clicking a mouse button, or network or browser state changes like a web page load completing. Events are also generated by APIs to represent the progress of an asynchronous task. 
• Event Listener/Handler: DOM elements can be set up to "listen" for HTML events by attaching the EventTarget.addEventListener() method to them. The first parameter of the function is the event to listen for. The second argument is a callback function (aka handler function) to handle the event. 
• If there is no event listener attached to the element, the event is lost. For instance, if you click on a button element without a listener function attached, nothing will happen.
• Callback Queue: When an event occurs it returns a message. Each message has an associated function that gets called to handle the message. The message and associated callback function are added to the Callback Queue to await execution. The Queue follows the First In First Out (FIFO) principle, so functions in the Queue are executed in the order they were added. 
• For DOM events, the callback function in the addEventListener method is added to the callback queue, along with the "event" object as the "message". 
• Other asynchronous I/O API function calls like querying a database, making Ajax/Fetch requests to a server, or calling setTimeout, return data or other message when complete and add it to the callback Queue along with the associated function that gets called to handle it.
• Microtask queue: Similar to Callback Queue but for Promises. Takes precedence over Callback Queue.
• Event Loop: The event loop monitors the call stack and the callback queue. When the call stack is empty, it checks the callback queue. The first callback in the queue (the oldest) gets placed onto the call stack and executed. The "message" is the function's input parameter. 
• When done, the event loop grabs the next one. If there are no callbacks in the Queue, the event loop pauses and waits for one to come. 

• Single Treaded: JavaScript is a single threaded programming language. This means it has one call stack and one memory heap. So it can only execute one sequence of code at a time. Multi-threaded programming languages can split code sequences into separate threads and process them concurrently, but at the cost of managing the multiple treads.

• Synchronous (sync): Blocking architecture. Code is executed in sequence, line by line, one line at a time. When a synchronous function is called, the program waits until the function returns its value before proceeding to the next line. Synchronous API calls can slow the program down if it takes a while for execution.
• Asynchronous (async): Non-blocking architecture. Calls to asynchronous Web API or Node module functions may be asynchronous. JS does not wait for the result before moving on to the next line. They are processed concurrently in the Runtime environment but outside the JS engine. When complete, the API generates an event, passing the result to a callback function, which is added to the callback queue, then executed by the JS engine. Examples of asynchronous functions include HTTP request/responses, Database queries, SetTimeout, File System access.

• Core JS executes synchronously. Some Web APIs and Node.js modules are synchronous and some are asynchronous. Asynchronous API calls can be made synchronous using JS Promises.

const fs = require('fs');
fs.readdir('.', (err, files) => console.log(files));

const getUsers = (callback) => {
  const users = ['Joey', 'Sheena', 'Johnny', 'Judy'];
  setTimeout(() => callback(users), 1000);
};
const logUsers = (users) => console.log(users); // Callback function.
getUsers(logUsers);

Promise global object

• Promise is a JavaScript standard built-in object. It is also called a global object because it is attached to the global object (window or global):

Promise === window.Promise; // returns true in the browser environment
Promise === global.Promise; // returns true in the Node.js environment

• Promise is a constructor function (functions are a type of object).

typeof Promise; // returns 'function'

• When called with the new keyword, it instantiates a Promise object. 

const prom = new Promise((resolve, reject) => { resolve(value); reject(reason) });
typeof prom; // returns 'object'

Promise static properties and methods:

Object.getOwnPropertyNames(Promise); // returns: length, name, prototype, all, allSettled, any, race, resolve, reject

Promise Instance properties and methods:

• There is no Promise literal syntax.

Object.getOwnPropertyNames(Promise.prototype); // Returns: constructor, then, catch, finally

const prom = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('Processing the database query'); 
    const success = Math.round(Math.random()) === 1; //Random true or False
    if (success) {
      const value = ['Joey', 'Sheena', 'Johnny', 'Judy'];
      resolve(value);
    } else {
      const reason = 'There was a problem';
      reject(reason);
    }
  }, 1000);
});

• When creating a new Promise object you pass in a function (called the executor) as the argument. 
• The executor function itself passes in two built-in functions as parameters. The resolve function and the optional reject function.
• SetTimeout is an asynchronous function from the Web API. The first argument is the function to be executed when the timer expires. The second argument is the timer set to 1000 milliseconds (i.e., 1 second).

const prom = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (Math.round(Math.random()) === 1) {
      const value = ['Joey', 'Sheena', 'Johnny', 'Judy'];
      resolve(value);
    } else {
      const reason = 'There was a problem';
      reject(reason);
    }
  }, 1000);
});
prom; 
//Returns {[[PromiseState]]: "pending", [[PromiseResult]]: undefined}
// Wait at least one second.
prom; 
//Returns {[[PromiseState]]: "fulfilled", [[PromiseResult]]: Array(4)}

• When creating a new Promise object you pass in a function (called the executor) as the argument. 
• The executor function itself takes two functions as parameters. A resolve function and an optional reject function.
• SetTimeout is an asynchronous function from the Web API. The first argument is the function to be executed when the timer expires. The second argument is the timer set to 1000 milliseconds (i.e., 1 second).
• Promise object internal properties:
• Initial values: {[[PromiseState]]: "pending", [[PromiseResult]]: undefined}
• Settled values if resolved:

{[[PromiseState]]: "fulfilled", [[PromiseResult]]: ['Joey', 'Sheena', 'Johnny', 'Judy']}

• Settled values if rejected:

{[[PromiseState]]: "rejected", [[PromiseResult]]: 'There was a problem'}

• To use await inside a function, add async keyword to the function declaration.
• Create a promise object, passing in the resolve callback function.
• To handle the resolved callback response using an await expression rather than thenables, append keyword async to the function. This will make the executor function behave as though it's synchronous, waiting for the result before executing the next statement.

async function wrapper() {
  const users = await new Promise((resolve) => {
    setTimeout(() => {
      const users = ['Joey', 'Sheena', 'Johnny', 'Judy'];
      resolve(users);
    }, 1000);
  });
}

async function wrapper() {
  function getUsers() {
    return new Promise((resolve) => {
      setTimeout(() => {
        const users = ['Joey', 'Sheena', 'Johnny', 'Judy'];
        resolve(users);
      }, 1000);
    });
  }
  const users = await getUsers();
}

const getUsers = async () => { 
  try {
    const users = await new Promise((resolve, reject) => {
      setTimeout(function() {
        if (Math.round(Math.random()) === 1) {
          const users = ['Joey', 'Sheena', 'Johnny', 'Judy'];
          resolve(users);
        } else {
          reject('There was a problem');
        }
      }, 1000);
    });
    console.log(users);
  }
  catch (err) {
    console.log(err);
  }
}
getUsers();

const fetchUsers = async () => {
  try {
    const apiTestUrl = 'https://jsonplaceholder.typicode.com/users';
    const res = await fetch(apiTestUrl);
    if (!res.ok) throw new Error(`${res.status} Path not found`);
    const data = await res.json();
    console.log(data);
  } catch(err) {
    console.error(err.toString());
  }
}
fetchUsers();

const usersProm = new Promise((resolve) => {
  let users = ['Joey', 'Sheena', 'Johnny', 'Judy'];
  resolve(users);
});
usersProm.then((users) => console.log(users));

const res = fetch('https://jsonplaceholder.typicode.com/users');

const user = sessionStorage.getItem('user');

let isLoading = true;
const apiTestUrl = 'https://jsonplaceholder.typicode.com/users';
fetch(apiTestUrl)
  .then((res) => res.json())
  .then((data) => console.log(data))
  .catch((err) => console.error(err.toString()))
  .finally(() => isLoading = false);

const fetchData = async () => {
  let isLoading = true;
  try {
    const url = 'https://jsonplaceholder.typicode.com/users';
    const res = await fetch(url);
    const data = await res.json();
    console.log(data);
  } catch(err) {
    console.error(err.toString());
  }
  isLoading = false;
}

const fetchData = async () => {
  try {
    const url = 'https://jsonplaceholder.typicode.com/users';
    const res = await fetch(url);
    if (res.ok) {
      const data = await res.json();
      console.log(data);
    } else {
      throw new Error('API call unsuccessful');
    }
  }
  catch (err) {
    console.error(err.toString());
  }
}

const prom1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Resolved after 3 secs'), 3000)
});
const prom2 = new Promise((resolve, reject) => {
  setTimeout(() => reject('Rejected after 1 sec'), 1000);
});
const prom3 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Resolved after 2 secs'), 2000)
});
Promise.any([prom1, prom2, prom3])
  .then((values) => console.log(values))
  .catch((err) => console.error('Error: ' + err));

const prom1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Resolved after 3 secs'), 3000)
});
const prom2 = new Promise((resolve, reject) => {
  setTimeout(() => reject('Rejected after 1 sec'), 1000);
});
const prom3 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Resolved after 2 secs'), 2000)
});
Promise.race([prom1, prom2, prom3])
  .then((values) => console.log(values))
  .catch((err) => console.error('Error: ' + err));

• The Promise.all() method returns a single Promise that resolves when all of the promises passed as an iterable have resolved or when the iterable contains no promises. 
• If any of the underlying promises reject, then Promise.all rejects, returning the first reject message. It does not wait for the rest of the promises to complete.
• There is no implied ordering in the execution of the array of Promises given, so there must be no dependency in any Promise on the order of execution of the Promises.
• Results are returned in an array.

const p1 = 'p1 Not an actual Promise';
const p2 = Promise.resolve('p2 Immediately resolved'); 
const p3 = new Promise((resolve) => {
  setTimeout(resolve, 2000, 'p3 Resolved after 2 secs')
});
Promise.all([p1, p2, p3])
.then((values) => console.log(values))
.catch((err) => console.error('Error: ' + err));
// ["p1 Not an actual Promise", "p2 Immediately resolved", "p3 Resolved after 2 secs"]

const p1 = 'p1 Not an actual Promise.';
const p2 = Promise.reject('p2 There was a problem'); 
const p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 2000, 'p3 Resolved after 2 secs')
});
Promise.all([p1, p2, p3])
.then((values) => console.log(values))
.catch((err) => console.error('Error: ' + err));
// Error: p2 There was a problem

const p1 = 'p1 Not an actual Promise.';
const p2 = Promise.reject('p2 There was a problem'); 
const p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 2000, 'p3 Resolved after 2 secs')
});
Promise.allSettled([p1, p2, p3])
.then((values) => console.log(values));

// [{status: "fulfilled", value: "p1 Not an actual Promise."}
{status: "rejected", reason: "p2 There was a problem"}
{status: "fulfilled", value: "p3 Resolved after 2 secs"}]

• You can iterate over the result:

.then((results) => results.forEach((res) => if (res.status === "fulfilled") console.log(res.value)));

• Ecma International sets the ECMAScript standards which are adopted into the JavaScript programming language.
• In addition there are a number of web APIs, collectively called the Browser Object Model (BOM), which are supported by all the major web browsers. Most of these standards are set by the W3C and WHATWG organizations, not ECMA International.
• Web APIs are part of the browser's global scope and are attached to the Window object.
• The DOM (Document Object Model), which represents a web page, is a subset of the BOM and one of the Web APIs.
• When calling properties and methods on the global scope, the window object is assumed if not provided. So window.document and document both call the window's document object.

• Float: console.log('The price is %f on sale.', 2.99); returns The price is 2.99 on sale.
• Integer: console.log('The price is %i dollars.', 2.99); Truncates decimals. Returns The price is 2 dollars.
• Object: console.log('Item object %o', { description: 'cup', price: 2.99 }); Inserts an object which you can inspect.

• In web applications most storage is done in a database.
• Small amounts of data can be stored in a cookie, session, or localStorage.
• Cookies are generated on the server side using methods from web frameworks like NodeJS Express. They are passed back and forth between a server and browser in the HTTP request and response objects.
• Session and LocalStorage can be managed by JS and the Web Storage API.
• Data stored in Sessions are persisted until the browser window is closed.
• Data stored in LocalStorage persists even after the browser window is closed.

• SessionStorage is a global read-only property of the browser's Window object for the current origin.
• SessionStorage is similar to localStorage except the data is cleared when the page session ends.
• A page session lasts as long as the browser is open, and survives over page reloads and restores. If you open another browser tab on the same URL a separate session is created. It is destroyed when that tab is closed. Note session cookies do not create separate instances for multiple tabs.

• Session data is stored in a string of key value pairs. You can stringify objects and arrays into JSON format before storing with JSON.stringify(JS) and convert it back to JS with JSON.parse('JSON string').

let userObj = { name: 'Joey', age: 22, active: true };
sessionStorage.setItem('user', JSON.stringify(userObj));
let userObj = JSON.parse(sessionStorage.getItem('user')) || {}; // set empty obj as default.