JavaScript Learning Notes

const fish = ["Lion", /* empty */, "Angel"];
console.log(fish);
// [ 'Lion', <1 empty item>, 'Angel' ]

const fish = ["Lion", /* empty */, "Angel"];
fish.map(x => console.log(x));
// Lion
// Angel

// Only the last comma is ignored.
const myList = ["home", /* empty */, "school", /* empty */,];

0, 117, 123456789123456789n             (decimal, base 10)
015, 0001, 0o777777777777n              (octal, base 8)
0x1123, 0x00111, 0x123456789ABCDEFn     (hexadecimal, "hex" or base 16)
0b11, 0b0011, 0b11101001010101010101n   (binary, base 2)

3.1415926
.123456789
-.123456789 // -0.123456789
3.1E+12
.1e-23

const unusualPropertyNames = {
  '': 'An empty string',
  '!': 'Bang!'
}
console.log(unusualPropertyNames.'');   // SyntaxError: Unexpected string
console.log(unusualPropertyNames.!);    // SyntaxError: Unexpected token !

console.log(unusualPropertyNames[""]); // An empty string
console.log(unusualPropertyNames["!"]); // Bang!

const obj = {
  // __proto__
  __proto__: theProtoObj,
  // Shorthand for 'handler: handler'
  handler,
  // Methods
  toString() {
    // Super calls
    return "d " + super.toString();
  },
  // Computed (dynamic) property names
  ["prop_" + (() => 42)()]: 42,
};

if (condition1) {
  statement1;
} else if (condition2) {
  statement2;
} else if (conditionN) {
  statementN;
} else {
  statementLast;
}

switch (expression) {
  case label1:
    statements1;
    break;
  case label2:
    statements2;
    break;
  // …
  default:
    statementsDefault;
}

throw "Error2"; // String type
throw 42; // Number type
throw true; // Boolean type
throw {
  toString() {
    return "I'm an object!";
  },
};
throw new Error("Whoops!");

try {
  throw new Error("Whoops!");
} catch (e) {
  console.error(`${e.name}: ${e.message}`);
}

try {
  foo.bar();
} catch (e) {
  if (e instanceof EvalError) {
    console.error(`${e.name}: ${e.message}`);
  } else if (e instanceof RangeError) {
    console.error(`${e.name}: ${e.message}`);
  }
  // etc.
  else {
    // If none of our cases matched leave the Error unhandled
    throw e;
  }
}

openMyFile();
try {
  writeMyFile(theData); // This may throw an error
} catch (e) {
  handleError(e); // If an error occurred, handle it
} finally {
  closeMyFile(); // Always close the resource
}

function f() {
  try {
    console.log(0);
    throw "bogus";
  } catch (e) {
    console.log(1);
    // This return statement is suspended
    // until finally block has completed
    return true;
    console.log(2); // not reachable
  } finally {
    console.log(3);
    return false; // overwrites the previous "return"
    console.log(4); // not reachable
  }
  // "return false" is executed now
  console.log(5); // not reachable
}
console.log(f()); // 0, 1, 3, false

function f() {
  try {
    throw "bogus";
  } catch (e) {
    console.log('caught inner "bogus"');
    // This throw statement is suspended until
    // finally block has completed
    throw e;
  } finally {
    return false; // overwrites the previous "throw"
  }
  // "return false" is executed now
}

try {
  console.log(f());
} catch (e) {
  // this is never reached!
  // while f() executes, the `finally` block returns false,
  // which overwrites the `throw` inside the above `catch`
  console.log('caught outer "bogus"');
}

// Logs:
// caught inner "bogus"
// false

class CustomError extends Error {
  constructor(foo = "bar", ...params) {
    // Pass remaining arguments (including vendor specific ones) to parent constructor
    super(...params);

    // Maintains proper stack trace for where our error was thrown (only available on V8)
    if (Error.captureStackTrace) {
      Error.captureStackTrace(this, CustomError);
    }

    this.name = "CustomError";
    // Custom debugging information
    this.foo = foo;
    this.date = new Date();
  }
}

try {
  throw new CustomError("baz", "bazMessage");
} catch (e) {
  console.error(e.name); // CustomError
  console.error(e.foo); // baz
  console.error(e.message); // bazMessage
  console.error(e.stack); // stacktrace
}

// similar to the Java and C for loop.
for (initialization; condition; afterthought)
  statement

for (let i = 0; i < 3; i++) {
  console.log(i);
}
// 0
// 1
// 2

for (variable in object)
  statement

const car = { make: "Ford", model: "Mustang" };
for (const p in car) {
  console.log(`car.${p} = ${car[p]}`);
}
// car.make = Ford
// car.model = Mustang

const nums = [3, 4, 5];
nums.foo = 'bar';
for (const idx in nums) {
  console.log(`nums[${idx}] = ${nums[idx]}`);
}
// nums[0] = 3
// nums[1] = 4
// nums[2] = 5
// nums[foo] = bar

for (variable of object)
  statement

const nums = [3, 4, 5];
nums.foo = 'bar';
for (const num of nums) {
  console.log(num);
}
// 3
// 4
// 5

const obj = { foo: 1, bar: 2 };

for (const [key, val] of Object.entries(obj)) {
  console.log(key, val);
}
// "foo" 1
// "bar" 2

while (condition)
  statement

let i = 0;
while (i < 3) {
  console.log(i);
  i++;
}
// 0
// 1
// 2

do
  // statement is always executed once before the condition is checked.
  statement
while (condition);

let i = 0;
do {
  console.log(i);
  i++;
} while(i < 3)
// 0
// 1
// 2

label:
  statement

break;
break label;

let x = 0;
let z = 0;
labelCancelLoops: while (true) {
  console.log("Outer loops:", x);
  x += 1;
  z = 1;
  while (true) {
    console.log("Inner loops:", z);
    z += 1;
    if (z === 10 && x === 10) {
      break labelCancelLoops;
    } else if (z === 10) {
      break;
    }
  }
}

continue;
continue label;

let i = 0;
let j = 10;
checkiandj: while (i < 4) {
  console.log(i);
  i += 1;
  checkj: while (j > 4) {
    console.log(j);
    j -= 1;
    if (j % 2 === 0) {
      continue checkj;
    }
    console.log(j, "is odd.");
  }
  console.log("i =", i);
  console.log("j =", j);
}

function square(number) {
  return number * number;
}

const sum = new Function('a', 'b', 'console.log(a + b)');
sum(2, 6); // 8

const car = {
  make: "Ford",
  model: "Mustang",
  greet() { console.log(`${this.make}, ${this.model}`) }
};
car.greet(); // Ford, Mustang

console.log(square(5)); // 25

function square(n) {
  return n * n;
}

console.log(square(5)); // ReferenceError: Cannot access 'square' before initialization
const square = function (n) {
  return n * n;
};

const foo = function bar() {
  // statements go here

  // bar()
  // arguments.callee()
  // foo()
};

function outside(x) {
  function inside(y) {
    return x + y;
  }
  return inside;
}

const fnInside = outside(3); // Think of it like: give me a function that adds 3 to whatever you give it
console.log(fnInside(5)); // 8
console.log(outside(3)(5)); // 8

function outside() {
  const x = 5;
  function inside(x) {
    return x * 2;
  }
  return inside;
}

console.log(outside()(10)); // 20 (instead of 10)

const funcs = [];
for (var i = 0; i < 3; i++) { // var-based index
  funcs.push(function () { console.log(i); });
  // solution: using the scope chaining to override the outer variable.
  // funcs.push(function (i) { return function () { console.log(i); } }(i));
}
for(const func of funcs) {
  func();
}
// 3
// 3
// 3

const funcs = [];
for (let i = 0; i < 3; i++) { // let-based index
  funcs.push(function () { console.log(i); });
}
for(const func of funcs) {
  func();
}
// 0
// 1
// 2

function seq() {
  console.log(arguments.length);
  for (const arg of arguments) {
    console.log(arg);
  }
}
seq(0, 1, 2);
// 3
// 0
// 1
// 2

// function multiply(a, b) {
//   b = typeof b !== "undefined" ? b : 1;
//   return a * b;
// }
// With default parameters, a manual check in the function body is no longer necessary.
function multiply(a, b = 1) {
  return a * b;
}
console.log(multiply(5)); // 5

function multiply(multiplier, ...theArgs) {
  return theArgs.map((x) => multiplier * x);
}
const arr = multiply(2, 1, 2, 3);
console.log(arr); // [2, 4, 6]

console.log(1 === 1);
// Expected output: true

console.log('hello' === 'hello');
// Expected output: true

console.log('1' === 1);
// Expected output: false

console.log(0 === false);
// Expected output: false

console.log(1 == 1);
// Expected output: true

console.log('hello' == 'hello');
// Expected output: true

console.log('1' == 1);
// Expected output: true

console.log(0 == false);
// Expected output: true

console.log(1 !== 1);
// Expected output: false

console.log('hello' !== 'hello');
// Expected output: false

console.log('1' !== 1);
// Expected output: true

console.log(0 !== false);
// Expected output: true

console.log(1 != 1);
// Expected output: false

console.log('hello' != 'hello');
// Expected output: false

console.log('1' != 1);
// Expected output: false

console.log(0 != false);
// Expected output: false

Before: 1110 0110 1111 1010 0000 0000 0000 0110 0000 0000 0001
After:                 1010 0000 0000 0000 0110 0000 0000 0001

const a1 = true && true; // t && t returns true
const a2 = true && false; // t && f returns false
const a3 = false && true; // f && t returns false
const a4 = false && 3 === 4; // f && f returns false
const a5 = "Cat" && "Dog"; // t && t returns Dog
const a6 = false && "Cat"; // f && t returns false
const a7 = "Cat" && false; // t && f returns false

const o1 = true || true; // t || t returns true
const o2 = false || true; // f || t returns true
const o3 = true || false; // t || f returns true
const o4 = false || 3 === 4; // f || f returns false
const o5 = "Cat" || "Dog"; // t || t returns Cat
const o6 = false || "Cat"; // f || t returns Cat
const o7 = "Cat" || false; // t || f returns Cat

const foo = null ?? 'default string';
console.log(foo);
// Expected output: "default string"

const baz = 0 ?? 42;
console.log(baz);
// Expected output: 0

delete object.property
delete object[property]

const car = { make: "Ford", model: "Mustang" };
delete car.make;
console.log(car); // { model: "Mustang" }

const nums = [0, 1, 2, 3];
delete nums[1];
console.log(nums); // [ 0, <1 empty slot>, 2, 3 ]

typeof new Function("5 + 2"); // "function"
typeof "round"; // "string"
typeof 1; // "number"
typeof ["Apple", "Mango", "Orange"]; // "object"
typeof new Date(); // "object"
typeof true; // "boolean"
typeof {}; // "boolean"
typeof /ab+c/; // "object"
typeof undefined; // "undefined"
typeof null; // "object"

const output = void 1;
console.log(output);
// Expected output: undefined

void console.log('expression evaluated');
// Expected output: "expression evaluated"

void (function iife() {
  console.log('iife is executed');
})();
// Expected output: "iife is executed"

void function test() {
  console.log('test function executed');
};
try {
  test();
} catch (e) {
  console.log('test function is not defined');
  // Expected output: "test function is not defined"
}

// Arrays
const trees = ["redwood", "bay", "cedar", "oak", "maple"];
0 in trees; // returns true
3 in trees; // returns true
6 in trees; // returns false
"bay" in trees; // returns false
// (you must specify the index number, not the value at that index)
"length" in trees; // returns true (length is an Array property)

// built-in objects
"PI" in Math; // returns true
const myString = new String("coral");
"length" in myString; // returns true

// Custom objects
const mycar = { make: "Honda", model: "Accord", year: 1998 };
"make" in mycar; // returns true
"model" in mycar; // returns true

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}
const auto = new Car('Honda', 'Accord', 1998);

console.log(auto instanceof Car);
// Expected output: true

console.log(auto instanceof Object);
// Expected output: true

const a = 1;
const b = 2;
const c = 3;

// default precedence
a + b * c; // 7
// evaluated by default like this
a + (b * c); // 7

// now overriding precedence
// addition before multiplication
(a + b) * c; // 9

// which is equivalent to
a * c + b * c; // 9

// An IIFE (Immediately Invoked Function Expression)
(function () {
  // code
})();

// an arrow function expression body
const f = () => ({ a: 1 });

// a property accessor dot `.` may be ambiguous with a decimal point
(1).toString(); // "1"

const nums = []; // same as: const nums = new Array(); OR const nums = new Array(0);
nums[0] = 0;
nums[2] = 2;
nums.size = function () { return this.length; }; // a user-defined extension method
console.log(nums); // Array(3) [ 0, <1 empty slot>, 2 ]
console.log(nums.length, nums.size()); // 3 3
nums.length = 2;
console.log(nums); // Array [ 0, <1 empty slot> ]

const colors = ["red", /* empty */, "green", "blue"];
// Unassigned values are not iterated in a forEach loop.
colors.forEach((color) => console.log(color));
// red
// green
// blue

let myArray = ["1", "2", "3"];
myArray = myArray.concat("a", "b", "c");
// myArray is now ["1", "2", "3", "a", "b", "c"]

const arr1 = [0, 1, 2, [3, 4]];

console.log(arr1.flat());
// expected output: Array [0, 1, 2, 3, 4]

const arr2 = [0, 1, [2, [3, [4, 5]]]];

console.log(arr2.flat());
// expected output: Array [0, 1, 2, Array [3, Array [4, 5]]]

console.log(arr2.flat(2));
// expected output: Array [0, 1, 2, 3, Array [4, 5]]

console.log(arr2.flat(Infinity));
// expected output: Array [0, 1, 2, 3, 4, 5]

const a1 = ["a", "b", "c"];
const a2 = a1.map((item) => item.toUpperCase());
console.log(a2); // ['A', 'B', 'C']

const a1 = ["a", "b", "c"];
const a2 = a1.flatMap((item) => [item.toUpperCase(), item.toLowerCase()]);
console.log(a2); // ['A', 'a', 'B', 'b', 'C', 'c']

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  initialValue,
);

console.log(sumWithInitial);
// Expected output: 10

console.log(Array.isArray([1, 3, 5]));
// Expected output: true

console.log(Array.isArray('[]'));
// Expected output: false

console.log(Array.isArray(new Array(5)));
// Expected output: true

console.log(Array.isArray(new Int16Array([15, 33])));
// Expected output: false

const sayings = new Map();
sayings.set("dog", "woof");
sayings.set("cat", "meow");
sayings.set("elephant", "toot");
sayings.size; // 3
sayings.get("dog"); // woof
sayings.get("fox"); // undefined
sayings.has("bird"); // false
sayings.delete("dog");
sayings.has("dog"); // false

for (const [key, value] of sayings) {
  console.log(`${key} goes ${value}`);
}
// "cat goes meow"
// "elephant goes toot"

sayings.clear();
sayings.size; // 0

const mySet = new Set();
mySet.add(1);
mySet.add("some text");
mySet.add("foo");

mySet.has(1); // true
mySet.delete("foo");
mySet.size; // 2

for (const item of mySet) {
  console.log(item);
}
// 1
// "some text"

const parent = {
  value: 2,
  method() {
    return this.value + 1;
  },
};

console.log(parent.method()); // 3
// When calling parent.method in this case, 'this' refers to parent

// child is an object that inherits from parent
const child = {
  __proto__: parent,
};
console.log(child.method()); // 3
// When child.method is called, 'this' refers to child.
// So when child inherits the method of parent,
// The property 'value' is sought on child. However, since child
// doesn't have an own property called 'value', the property is
// found on the [[Prototype]], which is parent.value.

child.value = 4; // assign the value 4 to the property 'value' on child.
// This shadows the 'value' property on parent.
// The child object now looks like:
// { value: 4, __proto__: { value: 2, method: [Function] } }
console.log(child.method()); // 5
// Since child now has the 'value' property, 'this.value' means
// child.value instead

const example = {};
example.prop = "exists";

// `hasOwn` will only return true for direct properties:
Object.hasOwn(example, "prop"); // true
Object.hasOwn(example, "toString"); // false
Object.hasOwn(example, "hasOwnProperty"); // false

// A constructor function, with good reason, to use a capital initial letter
function Box(value) {
  this.value = value;
}

// Properties all boxes created from the Box() constructor
// will have
Box.prototype.getValue = function () {
  return this.value;
};

const boxes = [new Box(1), new Box(2), new Box(3)];

// class are syntax sugar over constructor functions.
class Box {
  constructor(value) {
    this.value = value;
  }

  // Methods are created on Box.prototype
  getValue() {
    return this.value;
  }
}

// without constructor
const boxPrototype = {
  getValue() {
    return this.value;
  },
};

const boxes = [
  { value: 1, __proto__: boxPrototype },
  { value: 2, __proto__: boxPrototype },
  { value: 3, __proto__: boxPrototype },
];

function Base() {}
function Derived() {}
// Set the `[[Prototype]]` of `Derived.prototype`
// to `Base.prototype`
Object.setPrototypeOf(Derived.prototype, Base.prototype);

const obj = new Derived();
// obj ---> Derived.prototype ---> Base.prototype ---> Object.prototype ---> null

// It is equivalent to using the `extends` syntax in class terms.
class Base {}
class Derived extends Base {}

const obj = new Derived();
// obj ---> Derived.prototype ---> Base.prototype ---> Object.prototype ---> null

{ get prop() { /* … */ } }
{ get [expression]() { /* … */ } }

{ set prop(val) { /* … */ } }
{ set [expression](val) { /* … */ } }

const myHonda = {
  color: "red",
  wheels: 4,
  engine: { cylinders: 4, size: 2.2 },
};

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

const myCar = new Car("Eagle", "Talon TSi", 1993);

class Car {
  constructor (make, model, year) {
    this.make = make;
    this.model = model;
    this.year = year;
  }
}

const myCar = new Car("Eagle", "Talon TSi", 1993);

// Animal properties and method encapsulation
const Animal = {
  type: "Invertebrates", // Default value of properties
  displayType() {
    // Method which will display type of Animal
    console.log(this.type);
  },
};

// Create new animal type called animal1
const animal1 = Object.create(Animal);
animal1.displayType(); // Logs: Invertebrates

// Create new animal type called fish
const fish = Object.create(Animal);
fish.type = "Fishes";
fish.displayType(); // Logs: Fishes

// callback hell
fetch("https://httpbin.org/headers")
  .then(response => {
    response.json()
      .then(data => {
        console.log(data['headers']['User-Agent']);
      });
  })
  .catch(error => console.log(error))
  .finally(() => console.log("finally"));

// promise chaining
fetch("https://httpbin.org/headers")
  .then(response => response.json())
  .then(headers => console.log(headers['headers']['User-Agent']))
  .catch(error => console.log(error))
  .finally(() => console.log("finally"));

// async and await
async function fetchRquestHeaders() {
  try {
    const response = await fetch("https://httpbin.org/headers");
    const headers = await response.json();
    console.log(headers['headers']['User-Agent']);
  } catch (error) {
    console.log(error);
  } finally {
    console.log("finally");
  }
}

new Promise(executor)

async function setAlarm(person, delay) {
  try {
    const message = await alarm(person, delay);
    console.log(message);
  }
  catch (error) {
    console.log(error.message);
  }
}

setAlarm("Jon", 500); // Wake up, Jon!
setAlarm("Jon", -50); // Alarm delay must not be negative