ernestlv

/* it is in both A & B */
/* merge common objects using expression: { ...map[b.key], ...b } */
function intersection(arrA, arrB) {
  const mapA = arrA.reduce((res, a) => ({ ...res, [a.key]:a }), {});
  return arrB.reduce((res, b) => (b.key in mapA) ? [ ...res, { ...mapA[b.key], ...b } ] : res, []);
}

ernestlv

/* it is either in A or B */
function union(arrA, arrB) {
  const mapA = arrA.reduce((res, a) => ({ ...res, [a.key]:a }), {});
  const inter = arrB.reduce((res, b) => (b.key in mapA) ? [ ...res, { ...mapA[b.key], ...b } ] : res, []);
  const mapInter = inter.reduce((res, i) => ({ ...res, [i.key]:i }), {});
  const diffA = arrA.reduce((res, a) => !(a.key in mapInter) ? [ ...res, a ] : res, []);
  const diffB = arrB.reduce((res, b) => !(b.key in mapInter) ? [ ...res, b ] : res, []);
  return [ ...diffA, ...inter, ...diffB ];
}

ernestlv

const obj = {};
Object.defineProperty(obj, "x", { value: 42, writable: false });

// or

const obj2 = {
  get x() {
    return 42;
  },
};

ernestlv

/* sloppy mode */
/* It always return an object. Boxes "this" in a primitive object if a primitive value is provided or the global object otherwise */
function fun() {
  return this;
}

fun.call(2) // Number(2)
fun.bind(true)() //Boolean(true)
fun.call(null) //window object
func.apply(undefined) //window object

ernestlv

/* sloppy mode */
function test(a) { 
   arguments[0] = 'a';  //local arguments synch up with argument variable
   console.log(a, arguments[0], test.arguments[0]); 
}
test(1,2); // prints a, a, 1

/*strict mode */
function test2(a) { 
  "use strict"; 

ernestlv

/* sloppy mode */
function test(arg) {
   alert(eval("var arg = 1; arg")+" "+arg); //arg in eval changes arg in func context. if you declare arg suing let it will lock in eval context.
}
test(3); //prints 1 1

/* strict mode */
function test(arg) {
   "use strict"
   alert(eval("var arg = 1; arg")+" "+arg); //arg in eval does not change arg in func context

ernestlv

import { DebugElement } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { By } from "@angular/platform-browser"; // predicates for browser environment
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  beforeEach(() => TestBed.configureTestingModule({
    imports: [ReactiveFormsModule],
    declarations: [AppComponent]

ernestlv

const Main = () => {

  useEffect(() => { // runs after Main component is rendered
     async function init() {
      console.log('fetching suggestions ...');
      let response;

      try {
        response = await fetch('https://pokeapi.co/api/v2/pokemon/');
        response = await response.json();

ernestlv

import React from 'react';

interface SectionalProps {
  title:string;
  list:Array<{key:string, value:string}>;
  onClick:( value: string ) => void;
}

export const Sectional:React.FC<SectionalProps> = ( { tile, list, onClick } ) => { //props is passed by react as an object

ernestlv

import { useState } from 'react'; // hook

const Root = () => { // functional component
  const [ state, setState ] = useState(0); // local state for Root component
  const click = () => {
    setState( state + 1 ); // re-render Main component
  }

  console.log("render Main:", state);
  return ( // jsx