JavaScript Intermediate

• A typed array is a special kind of array in JavaScript that provides a way to work with raw binary data efficiently.

1.ArrayBuffer

• • A low-level object that represents a fixed-size chunk of memory.
  • It does not allow direct access to its contents.

  const buffer = new ArrayBuffer(16); // Creates a buffer with 16 bytes
  console.log(buffer.byteLength); // 16

2.TypedArray Views

• • Typed arrays provide views over an ArrayBuffer, allowing structured access to its binary data.
  • Int8Array
  • Uint8Array
  • Uint8ClampedArray
  • Int16Array
  • Uint16Array
  • Int32Array
  • Uint32Array
  • Float32Array
  • Float64Array

3.Creating a Typed Array

• const intArray = new Int16Array(4);
  // Creates an Int16Array with 4 elements (8 bytes total)
  intArray[0] = 10;
  console.log(intArray); // Int16Array(4) [10, 0, 0, 0]
  
  // Creating a Typed Array from an Existing Array
  const floatArray = new Float32Array([1.1, 2.2, 3.3]);
  console.log(floatArray); // Float32Array(3) [1.1, 2.2, 3.3]

4.DataView

• • Allows working with multiple data types in the same buffer.

  • Provides fine-grained control over endianness.

    const buffer = new ArrayBuffer(8);
    const view = new DataView(buffer);
    view.setInt16(0, 300, true); // Store 300 at byte offset 0 (little-endian)
    console.log(view.getInt16(0, true)); // 300

1.Iterators

• an iterator is an object which defines a sequence and potentially a return value upon its termination.

• value: The next value in the sequence.

• done: A boolean indicating if the sequence is complete (true or false).

• lowest level primitive iterator

  const iterator = {
    data: [10, 20, 30],
    index: 0,
    next() {
      return {
        value: this.data[this.index++],              
        done: this.index >= this.data.length 
      };
    }
  };
  
  console.log(iterator.next()); // { value: 10, done: false }
  console.log(iterator.next()); // { value: 20, done: false }
  console.log(iterator.next()); // { value: 30, done: true }
  
  // let next;
  // do {
  //  next = iterator.next();
  //  console.log(next.value);
  // } while (!next.done);

2.generator functions

• A generator function is defined using function*, and it yields values one by one when next() is called.

  function* myGenerator() {
    yield 1;
    yield 2;
    yield 3;
  }
  
  const iterator = myGenerator();
  console.log(iterator.next()); // { value: 1, done: false }
  console.log(iterator.next()); // { value: 2, done: false }
  console.log(iterator.next()); // { value: 3, done: false }
  console.log(iterator.next()); // { value: undefined, done: true }
  
  // another example
  function* makeRangeIterator(start = 0, end = Infinity, step = 1) {
  let iterationCount = 0;
  for (let i = start; i < end; i += step) {
    iterationCount++;
    yield i;
  }
  return iterationCount;
  }
  
  const iterator = makeRangeIterator();
  console.log(iterator.next()); // { value: 0, done: false }
  console.log(iterator.next()); // { value: 1, done: false }
  console.log(iterator.next()); // { value: 2, done: false }
  console.log(iterator.next()); // { value: 3, done: false }

3.Iterables

• String, Array, TypedArray, Map and Set are all built-in iterables, because their prototype objects all have a Symbol.iterator method.

• User-defined iterables

  const myIterable = {
    *[Symbol.iterator]() {
        yield 1;
        yield 2;
        yield 3;
    },
  };
  
  // User-defined iterables can be used in for...of loops or the spread syntax.
  for (const value of myIterable) {
    console.log(value);
  }
  // 1
  // 2
  // 3
  
  [...myIterable]; // [1, 2, 3]
  
  // Syntaxes expecting iterables
  for (const value of ["a", "b", "c"]) {
    console.log(value);
  }
  // "a"
  // "b"
  // "c"
  
  [..."abc"];
  // ["a", "b", "c"]
  
  function* gen() {
    yield* ["a", "b", "c"];
  }
  
  gen().next();
  // { value: "a", done: false }
  
  [a, b, c] = new Set(["a", "b", "c"]);
  a;
  // "a"

4.Advanced generator

• Generators compute their yielded values on demand, which allows them to efficiently represent sequences that are expensive to compute.

• The next() method also accepts a value, which can be used to modify the internal state of the generator.

• A value passed to next() will be received by yield.

  // The fibonacci generator using next(x) to restart the sequence:
  function* fibonacci() {
    let current = 0;
    let next = 1;
    while (true) {
      const reset = yield current;
      [current, next] = [next, next + current];
      if (reset) {
        current = 0;
        next = 1;
      }
    }
  }
  
  const sequence = fibonacci();
  console.log(sequence.next().value); // 0
  console.log(sequence.next().value); // 1
  console.log(sequence.next().value); // 1
  console.log(sequence.next().value); // 2
  console.log(sequence.next().value); // 3
  console.log(sequence.next().value); // 5
  console.log(sequence.next().value); // 8
  console.log(sequence.next(true).value); // 0
  console.log(sequence.next().value); // 1
  console.log(sequence.next().value); // 1
  console.log(sequence.next().value); // 2

1.Date and time formatting

• TheIntl.DateTimeFormatobject is useful for formatting date and time.

  // July 17, 2014 00:00:00 UTC:
  const july172014 = new Date("2014-07-17");
  
  const options = {
    year: "2-digit",
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
    timeZoneName: "short",
  };
  const americanDateTime = new Intl.DateTimeFormat("en-US", options).format;
  
  // Local timezone vary depending on your settings
  // In CEST, logs: 07/17/14, 02:00 AM GMT+2
  // In PDT, logs: 07/16/14, 05:00 PM GMT-7
  
  console.log(americanDateTime(july172014));

2.Number formatting

• TheIntl.NumberFormatobject is useful for formatting numbers, for example currencies.

  const gasPrice = new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
    minimumFractionDigits: 3,
  });
  
  console.log(gasPrice.format(5.259)); // $5.259
  const hanDecimalRMBInChina = new Intl.NumberFormat("zh-CN-u-nu-hanidec", {
    style: "currency",
    currency: "CNY",
  });
  console.log(hanDecimalRMBInChina.format(1314.25)); // ￥ 一,三一四.二五

3.Collation

• The Intl.Collator object is useful for comparing and sorting strings.

  const names = ["Hochberg", "Hönigswald", "Holzman"];
  const germanPhonebook = new Intl.Collator("de-DE-u-co-phonebk");
  
  // as if sorting ["Hochberg", "Hoenigswald", "Holzman"]:
  console.log(names.sort(germanPhonebook.compare).join(", "));
  // "Hochberg, Hönigswald, Holzman"
  
  // Some German words conjugate with extra umlauts,
  // so in dictionaries it's sensible to order ignoring umlauts.
  const germanDictionary = new Intl.Collator("de-DE-u-co-dict");
  
  // as if sorting ["Hochberg", "Honigswald", "Holzman"]:
  console.log(names.sort(germanDictionary.compare).join(", "));
  // "Hochberg, Holzman, Hönigswald"

1.Proxy

• Proxy allows you to create a wrapper around an object and intercept or redefine fundamental operations like property access, assignment, and method calls.

  • Data validation

  • Property access control

  • Traps for debugging/logging

  • Objects are reference(address) to actual object.

  • so what proxy do is:actual object --> proxy layer --> proxy object

  • To make a proxy we need a target and a handler.

• const handler = {
    get(target, name) {
      return name in target ? target[name] : 42;
      },
  };
  
  const p = new Proxy({}, handler);
  p.a = 1;
  
  console.log(p.a, p.b); // 1, 42
  
  // another example
  const target = {
    message: "Hello"
  };
  
  const handler = {
    get: function(obj, prop) {
      return prop in obj ? obj[prop] : "Property not found";
    }
  };
  
  const proxy = new Proxy(target, handler);
  console.log(proxy.message); // Output: Hello
  console.log(proxy.nonExistent); // Output: Property not found

  const p1 = {
    type: "human",
    name: "nayak",
    age: 25
  }
  
  // p1.age = -10 // which should be invalid
  
  // to handle this issue lets make a proxy
  const p1Proxy = new Proxy(p1, {
    get(target, prop) {
      if (prop in target) return target[prop];
      return false;
    },
    set(target, prop, value) {
      if (!(prop in target)) throw new Error(`${prop} doesn't exists!`);
      switch(prop) {
        case 'name':
          if (typeof value !== 'string') {
            throw new Error(`${prop} must be a string!`);
          }
          break;
        case 'age':
          if (typeof value !== 'number'){
            throw new Error(`${prop} must be a number!`);
          }
          if ( value < 18) {
            throw new Error(`${prop} must be greater than 18.`);
          }
      }
      target[prop] = value
    }
  });
  
  // for get
  console.log(p1Proxy.name);
  console.log(p1Proxy.age);
  
  // for set
  p1Proxy.name = "Pratyush"
  p1Proxy.age = 32
  
  console.log(p1Proxy.name);
  console.log(p1Proxy.age);

2.Reflection

• Reflect is a built-in object that provides methods for interceptable JavaScript operations.

• The methods are the same as those of the proxy handler’s.

  const p1 = {
    type: "human",
    name: "nayak",
    age: 25
  }
  
  // p1.age = -10 // which should be invalid
  
  // to handle this issue lets make a proxy
  const p1Proxy = new Proxy(p1, {
    get(target, prop) {
      // if (prop in target) return target[prop]; 
      // this might be create some bug internally so,
      // use reflect instead of the above line of code
      if (prop in target) return Reflect.get(target, prop);
      return false;
    },
    set(target, prop, value) {
      if (!(prop in target)) {
        throw new Error(`${prop} doesn't exists!`);
      }
      switch(prop) {
        case 'name':
          if (typeof value !== 'string') {
            throw new Error(`${prop} must be a string!`);
          }
          break;
        case 'age':
          if (typeof value !== 'number') {
            throw new Error(`${prop} must be a number!`);
          }
          if ( value < 18) {
            throw new Error(`${prop} must be greater than 18.`);
          }
        }
      // target[prop] = value // this might be create some bug internally so,
      // use reflect instead of the above line of code
      Reflect.set(target, prop, value);
    }
  });
  
  // for get
  console.log(p1Proxy.name);
  console.log(p1Proxy.age);
  
  // for set
  p1Proxy.name = "Pratyush"
  p1Proxy.age = 42
  
  console.log(p1Proxy.name);
  console.log(p1Proxy.age);

3.Terminology

• The following terms are used when talking about the functionality of proxies.
• handler
  • Placeholder object which contains traps.
• traps
  • The methods that provide property access.
  • (This is analogous to the concept of traps in operating systems.)
• target
  • Object which the proxy virtualizes. It is often used as storage backend for the proxy.
  • Invariants (semantics that remain unchanged) regarding object non-extensibility or non-configurable properties are verified against the target.
• invariants

  • Semantics that remain unchanged when implementing custom operations are called invariants.

  • If you violate the invariants of a handler, a TypeError will be thrown.

// Example of Handler/Trap methods in Proxy with their equivalents in JavaScript
// getPrototypeOf() handler
// Equivalent to: Object.getPrototypeOf(), Reflect.getPrototypeOf(), __proto__, 
// Object.prototype.isPrototypeOf(), instanceof
const handlerGetPrototype = {
  getPrototypeOf: (target) => {
    // Custom logic
    return Object.getPrototypeOf(target);
    // Equivalent to Reflect.getPrototypeOf(target)
  }
};

// setPrototypeOf() handler
// Equivalent to: Object.setPrototypeOf(), Reflect.setPrototypeOf()
const handlerSetPrototype = {
  setPrototypeOf: (target, prototype) => {
    // Custom logic
    return Object.setPrototypeOf(target, prototype); 
    // Equivalent to Reflect.setPrototypeOf(target, prototype)
  }
};

// isExtensible() handler
// Equivalent to: Object.isExtensible(), Reflect.isExtensible()
const handlerIsExtensible = {
  isExtensible: (target) => {
    // Custom logic
    return Object.isExtensible(target); 
    // Equivalent to Reflect.isExtensible(target)
  }
};

// preventExtensions() handler
// Equivalent to: Object.preventExtensions(), Reflect.preventExtensions()
const handlerPreventExtensions = {
  preventExtensions: (target) => {
    // Custom logic
    return Object.preventExtensions(target); 
    // Equivalent to Reflect.preventExtensions(target)
  }
};

// getOwnPropertyDescriptor() handler
// Equivalent to:
// Object.getOwnPropertyDescriptor(), Reflect.getOwnPropertyDescriptor()
const handlerGetOwnPropertyDescriptor = {
  getOwnPropertyDescriptor: (target, prop) => {
    // Custom logic
    return Object.getOwnPropertyDescriptor(target, prop); 
    // Equivalent to Reflect.getOwnPropertyDescriptor(target, prop)
  }
};

// defineProperty() handler
// Equivalent to: Object.defineProperty(), Reflect.defineProperty()
const handlerDefineProperty = {
  defineProperty: (target, prop, descriptor) => {
    // Custom logic
    return Object.defineProperty(target, prop, descriptor); 
    // Equivalent to Reflect.defineProperty(target, prop, descriptor)
  }
};

// has() handler (property query)
// Equivalent to: foo in proxy, foo in Object.create(proxy), Reflect.has()
const handlerHas = {
  has: (target, prop) => {
    // Custom logic
    return prop in target; 
    // Equivalent to Reflect.has(target, prop)
  }
};

// get() handler (property access)
// Equivalent to: proxy[foo], proxy.bar, Object.create(proxy)[foo], Reflect.get()
const handlerGet = {
  get: (target, prop) => {
    // Custom logic
    return prop in target ? target[prop] : 
    undefined; // Equivalent to Reflect.get(target, prop)
  }
};

// set() handler (property assignment)
// Equivalent to:
// proxy[foo]=bar, proxy.foo=bar, Object.create(proxy)[foo]=bar, Reflect.set()
const handlerSet = {
  set: (target, prop, value) => {
      // Custom logic
      target[prop] = value; // Equivalent to Reflect.set(target, prop, value)
      return true; 
      // Indicating that the assignment was successful
  }
};

// deleteProperty() handler (property deletion)
// Equivalent to: delete proxy[foo], delete proxy.foo, Reflect.deleteProperty()
const handlerDeleteProperty = {
  deleteProperty: (target, prop) => {
    // Custom logic
    delete target[prop]; 
    // Equivalent to Reflect.deleteProperty(target, prop)
    return true;
  }
};

// ownKeys() handler
// Equivalent to: Object.getOwnPropertyNames(), Object.getOwnPropertySymbols(), 
// Object.keys(), Reflect.ownKeys()
const handlerOwnKeys = {
  ownKeys: (target) => {
    // Custom logic
    return [...Object.getOwnPropertyNames(target), ...Object.getOwnPropertySymbols(target)]; 
    // Equivalent to Reflect.ownKeys(target)
  }
};

// apply() handler (Function call)
// Equivalent to: proxy(..args), Function.prototype.apply(),
//  Function.prototype.call(), Reflect.apply()
const handlerApply = {
  apply: (target, thisArg, argumentsList) => {
    // Custom logic
    return target.apply(thisArg, argumentsList); 
    // Equivalent to Reflect.apply(target, thisArg, argumentsList)
  }
};

// construct() handler (Object construction)
// Equivalent to: new proxy(...args), Reflect.construct()
const handlerConstruct = {
  construct: (target, argumentsList, newTarget) => {
    // Custom logic
    return new target(...argumentsList); 
    // Equivalent to Reflect.construct(target, argumentsList, newTarget)
  }
};

4.Revocable Proxy

• The Proxy.revocable() method is used to create a revocable Proxy object.

• A background on modules

  • Modules in JavaScript are reusable pieces of code that can be exported and imported into other files or scripts.
  • With modules, you avoid polluting the global namespace and can break up your code into smaller, manageable parts.

• Introducing an example

  • This math.js file exports the add function, which can be imported and used in other scripts.

    // math.js
    export function add(x, y) {
        return x + y;
    }

• Basic example structure

  • Exporting: You export functions, objects, or values from the module.
  • Importing: Other scripts import the exported functions or values to use them.

• Exporting module features

  • Named exports: Allows exporting multiple values.

    export function subtract(x, y) { return x - y; }
    export const pi = 3.14;

  • Default exports: Only one default export per module.

    export default function multiply(x, y) { return x * y; }

• Importing features into your script

  • Named import:

    import { add, subtract } from './math.js';

  • Default import:

    import multiply from './math.js';

• Importing modules using import maps

  • You can use an import map to map module names to specific URLs or paths.

    import { name as squareName, draw } from "./shapes/square.js";
    import { name as circleName } from "https://example.com/shapes/circle.js";
    // and
    <script type="importmap">
    {
      "imports": {
      "shapes": "./shapes/square.js",
      "shapes/square": "./modules/shapes/square.js",
      "https://example.com/shapes/square.js": "./shapes/square.js",
      "https://example.com/shapes/": "/shapes/square/",
      "../shapes/square": "./shapes/square.js"
      }
    }
    </script>

• Loading non-JavaScript resources

  • Modules can import non-JavaScript resources, like JSON or CSS, using the import statement.

    import colors from "./colors.json" with { type: "json" };
    import styles from "./styles.css" with { type: "css" };

• Applying the module to your HTML

  • Use <script> tags withtype="module" to load JavaScript modules in HTML.

    <script type="module" src="main.js"></script>
    // directly into the HTML file.
    
    <script type="module">
    /* JavaScript module code here */
    </script>

• Other differences between modules and classic scripts

  • Strict mode: Modules are always in strict mode.
  • Scope: Variables and functions in modules are scoped to the module itself.
  • Defer: Modules are deferred by default, meaning they don’t block the HTML parsing.

• Default exports versus named exports

  • Default exports are used when you want to export a single value (function, class, object).
  • Named exports allow exporting multiple values.

• Avoiding naming conflicts

  • Using named exports helps to avoid conflicts since the imported names must match exactly.
  • For default exports, you can rename them upon import.

• Renaming imports and exports

  • You can rename imports and exports to avoid conflicts:

    export { add as addition };
    import { addition } from './math.js';

• Creating a module object

  • A module object is created for every module, containing the exports.

  • You can import the entire module as an object:

    import * as math from './math.js';
    console.log(math.add(2, 3));

• Modules and classes

  • Modules work seamlessly with classes, and classes can be exported and imported just like functions.

    export class Calculator {
      add(x, y) { return x + y; }
    }

• Aggregating modules

  • You can create an aggregate module that imports several others and then exports them together:

    export * from './math.js';
    export * from './geometry.js';

• Dynamic module loading

  • Use import() for dynamically loading modules at runtime.

    import('./math.js').then(module => {
      console.log(module.add(1, 2));
    });

• Top level await

  • Top-level await allows you to use await directly in the top level of modules (without needing an async function).

    const data = await fetchData();

• Import declarations are hoisted

  • Import statements are hoisted to the top of the module,
  • meaning they are evaluated before the rest of the script runs.

• Cyclic imports

  • Be mindful of cyclic imports, which occur when two modules import each other.
  • This can lead to issues like incomplete or undefined exports.

• Authoring “isomorphic” modules

  • Isomorphic modulesare modules that can run both on the client-side and server-side (Node.js).
  • They need to handle environments appropriately usingtypeof window !== undefined for the client-side.

• Troubleshooting

  • Common issues in modules include:
    • Incorrect file paths or module resolution errors.
    • Forgetting to export/import functions or objects.
    • Using default and named exports incorrectly.