Measuring Performance of Algorithm

Asymptotic performance of an algorithm refers to defining expression or curve that describes execution time of an algorithm. It only consider significant part of the expression, for example f(n), g(n²).  If I have an algorithm which has 4 + n(n + 5) instructions then we consider g(n²) as asymptotic performance of the algorithm, we simply consider highest order in the expression.

Refer following for example of f(n)

  var printListItem = function(list){
    for (var i = 0; i < list.length; i++) {
      console.log(list[i]);
  }

Refer following for example of f(n²)

var combination = function(list1, list2){
    list1.forEach((item1)=>{
      list2.forEach((item2)=>{
        console.log(item1  + ' ' + item2)
      });
    });
  }

Refer following for example of f(log(n))

  var binarySearchRecursiveStyle = function(sortedList, item, start, end){
    var length = 1+end-start;
    var mid = length/2;
    
    if (sortedList[mid]) {
      return true;
    }
    
    else if (sortedList[mid] > item) {
      if (startIndex === mid-1) {
       return sortedList[mid-1] === item
      }
      
      return binarySearch(sortedList, item, startIndex, mid-1);
    }
    else{
      return binarySearch(sortedList, item, mid, endIndex)
    }
   
    return false;
  }

Refer following for curve representing f(n²), f(n), f(log(n))

Big Theta
This represents actual performance of an algorithm, refer above for f(n), f(n²) etc

Big O
This represent performance in the worst case. Take example of the following code. It may be possible that we have to loop to the end of the list and not find the item, in which case we can represent performance as f(n). This is what is referred as Big O

    

  var contains = function(list, item){
    for (var i = 0; i < list.length; i++) {
      if (list[i]==item) {
        return true;
      }
     }
    return false;
  }

Big Omega
This represents performance in best case. In the same example above the best case could be the situation in which we find the item at the first place in which case the performance will be f(1). This is referred as Big Omega.

Amortized complexity
There are some algorithm where you have to do some house keeping at certain intervals. For example List in c#, here you don't define the size, it grows dynamically. Once it reaches array limit it creates a new array with double the size of original array and copy each item from the original array to new array.

List -
Add - O(1), This has amortized complexity of resizing (and copying.)
Remove - O(n) This may need to replace all, if first element is being removed.
Go To Index - O(1)
Find - O(n)

Linked List
Add/Remove/Merge O(1)
Find - O(n)
Go To Index - O(n)

Dictionary
When we store an object in a dictionary, it’ll call the GetHashCode method on the key of the object to calculate the hash. The hash is then adjusted to the size of the array to calculate the index into the array to store the object. Later, when we lookup an object by its key, GetHashCode method is used again to calculate the hash and the index. Key should be unique
Add/Remove/Find O(1)

HashSet
It represent set of values. Here every value should be unique which is determined by the value returned from GetHashCode .
Add/Remove/Contains O(1)

Stack

Last In First Out

Pop O(1)

Contains O(n)

Push O(1) This has amortized complexity of resizing (and copying.)

Queue

First In First Out

Pop O(1)

Contains O(n)

Push O(1) This has amortized complexity of resizing (and copying.)

Angular 2 Adding http service

Angular provides @angular/http npm package to perform http request. HttpClient is available as injectable class with all the methods to perform http request. This is from HttpClientModule.

Once you have module imported you should be able to user Http class for performing  http request. In theory you can inject this (http: HttpClient ) in your component class, but to have better separation of concern you should create injectable service and let that handle http call.

As you can see from the http api documentation , it returns Observable<Response>. You should be able to use all Observable Instance Methods on this. Refer this for list of methods which can be used on  Observable. Some of the common filter, map, catch, forEach, groupBy, merge, retry, toPromose.

Since this is based on observable, the actual http call will not happen until it has any subscriber.

Refer following for a simple service which call an http endpoint.

  
import { Observable } from 'rxjs';
import { retry } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class MyService {
  constructor(private http: HttpClient) { }
  public getData(): Observable {
    return this.http.get('someurl').map((data) => { return data.json() });
  }
}

js object property descriptor

javascript properties has descriptors called property descriptors. You can access property descriptors like this

  
 var person ={
  name: {lastName:'xyz', firstName:'abc'},
  age: 15
 }
 console.log(Object.getOwnPropertyDescriptor(person,'name'));

This should return

  
 {
  value: object, //this could be value for primitives type property
  writable: true, 
  enumerable: true, 
  configurable: true
 }

You can update these descriptors by using Object.defineProperty

   
 Object.defineProperty(person,'age',{value:5});

Updating writable property descriptor to false will make this property read only

   
 Object.defineProperty(person,'age',{writable:false});

After doing this you won't be able to update property value

  
 person.age = 11; // This will throw error as it cannot assign to read only age property

In the following case we are making name property to be read only, but you can still update any of the property of name object as you not changing name property reference

  
 Object.defineProperty(person,'name',{writable:false});
 person.name.lastName = 'xyza'

If you want to prevent this to happen you can use

  
 Object.freeze(person.name);

After this you wont be able to update lastName

  
 person.name.lastName = 'xyzab' // This will throw error as it cannot assign to read only age property

Updating configurable to false will prevent from redefining the property. You will not be able to change enumerable/configurable property descriptor. You will also not be able to delete the property.

  
 Object.defineProperty(person,'age',{configurable:false}); 

Following will throw error

  
 Object.defineProperty(person,'name',{enumerable:false}); //cannot redefine property age
 Object.defineProperty(person,'name',{configurable:false}); //cannot redefine property age
 delete person.age //cannot delete property age

You will still be able to change writable descriptor

  
 Object.defineProperty(person,'age',{writable:false}); 

Updating enumerable to false will prevent this property to be enumerated

    
 Object.defineProperty(person,'age',{enumerable:false}); 

After executing above line you wont be able to see age property in any of the below code

   
 for (var propertyName in person){
    console.log(propertyName + ": " + person[propertyName])
 }
 console.log(Object.keys(person))

  console.log(JSON.stringify(person))  

javascript prototype

A function's prototype is the object instance that will become prototype for all objects created using this function as a constructor. For example when you define following function a prototype property is created on Foo, which you should be able to access Foo.prototype and it will be initialized object (like {}) with no property.

 
 function Foo(){
   console.log("js will create prototype property on Foo which will be initialized as empty object {} ");
 }

You can add property to the prototype object of Foo Foo.prototype.myFirstName = "Sam" Now when you create object using constructor function then constructor function prototype will become object prototype

 
 var foo = new Foo();
 var bar = new Foo();
 Foo.prototype.myLastName = "Adam"

So following should return true

 
 console.log(bar.__proto__=== Foo.prototype);
 console.log(foo.__proto__=== Foo.prototype);

You can add more properties to Foo prototype

 
 Foo.prototype.age = 5

Now lets say you update functions prototype like this. Here you changing pointer of Foo.prototype where as in the above case pointer was same, you just added new property to that object.

 
 Foo.prototype = {myName: "Tom"}

Doing so will change return value of following to false as bar and foo prototype is still pointing to prototype object which was there on Foo when foo and bar was created.

 
 console.log(bar.__proto__=== Foo.prototype);
 console.log(foo.__proto__=== Foo.prototype);

So now when you create new Foo object this will get new prototype

 
 var baz = new Foo();
 console.log(baz.__proto__=== Foo.prototype);

There is a chain of prototype. Following will return true

 
 console.log(bar.__proto__.__proto__=== Object.prototype);
 console.log(bar.__proto__.__proto__.__proto__=== null);

When you try to access foo.myFirstName, javascript looks first if myFirstName is property of foo or not, if not then it looks in the prototypal chain and return it. So in the above case foo.hasOwnProperty('age') will return false where as foo.__proto__.hasOwnProperty('age') will return true. Also you can check by looking at all the keys Object.keys(foo

). When you create an object with new keyword following happens

  
 function Foo(name){
  var someInteger = 1;
  this.name = name;
  return 5;
 }
 var foo = new Foo('John');

A function without a return statement will return a default value. In the case of a constructor called with the new keyword, the default value is the value of its "this" parameter. For all other functions, the default return value is undefined. So in the above case foo will be assigned like this

 
  Foo {
   name: 'john'
  }

foo object will not see someInteger and its return value Function prototype (Foo.prototype) object is passed to the __proto__ property of the object so this will return true

 
  console.log(foo.__proto__=== Foo.prototype); //will return true

When you create an object by Object.create() only prototype is set

 
 var foo = Object.create(Foo.prototype);
 console.log(foo.__proto__=== Foo.prototype); //will return true
 console.log(typeof foo.name1 === 'undefined'); //will return true
 console.log((foo.name1 === undefined ); //will return true

When you create an object by object literal {} then Object prototype is set prototype of the object

  
 var foo = {firstName: 'John', lastName: 'singh'};
 console.log(foo.__proto__ ===Object.prototype); //will return true

Angular - Observables

Observables is an ES7 feature which means you need to make use of an external library to use it today. RxJS is a good one. This is not angular 2 specific feature, though angular cli does add this to the dependencies. Observables gives you all the features of promises and more. A Promise handles a single event when an async operation completes or fails, whereas Observable is like a Stream and allows to pass zero or more events where the callback is called for each event. For example FormControl valueChanges returns Observable, so I can write a code like this which will write to console every time value is changed.

   
   let sub =  this.name.valueChanges.pipe(debounceTime(1000))subscribe(
      (newValue: string) => {
       console.log(newValue);
       if (newValue.length === 5) {
        sub.unsubscribe();
       }
      });

In the following example we are making an http call and I am expecting number, then I apply pipe, which gives me option to transform data before passing to the subscriber. This will be helpful if I would like to transform data before sending to subscriber or may be convert error to standard format. Keep in mind observable are deferred execution, so unless it has a subscriber it (along with operators in pipes) will not be executed

   import { Observable, BehaviorSubject, throwError, combineLatest, forkJoin } from 'rxjs';
   import { retry, catchError, tap, map, filter, finalize,  delay,debounceTime } from 'rxjs/operators';
   import { HttpClient } from '@angular/common/http'; 

   this.http.get(url).pipe(
        retry(3),
        map(obj=>{return obj *2;}),
        tap(obj => {console.log(obj)}),
        catchError((err)=>{return throwError(err);})
      ).subscribe(
        (value)=>{console.log(value)},
        (err)=>{console.log(err)},
        ()=>{console.log('done')}
      );

combineLatest
once all input observables have produced at least one value it returns Observable and after that it returns Observable everytime it produces a new value.
forkJoin
It require all the observables to be completed and then returns single value that is an array of the last values produced by the input observables

Observable also has the advantage over Promise to be cancelable. One of the example will be for type ahead, if user has changed the text which will result in new http call, we can cancel subscription to the previous one. In case of promise, the callback call will happen either in success or failure scenario. Promises doesn't have option of Lazy loading where as observable will not be executed until someone subscribe to it. You also have option on retry and retryWhen in observable.

If you subscribe to an observable or event in JavaScript, you should unsubscribe at a certain point to release memory in the system, otherwise it will lead to memory leak. Here are few of the case where you should explicitly unsubscribe
1. Form value change as shown in the example above
2. Router to be on safe side, though angular claim to clean it up.
3. Infinite observable
 Observable.interval(1000).subscribe(console.log(''))
 Observable.fromEvent(this.element.nativeElement, 'click').subscribe(console.log('hi'));

For the following case you don't need to unsubscribe
1. aysnc pipe - When the component gets destroyed, the async pipe unsubscribes automatically.
2. Finite Observable - When you have a finite sequence, usually you don’t need to unsubscribe, for example when using the HTTP service or the timer observable

Angular 2 - Forms & Validation

Template Based form 

For this you need to import FormsModule. As soon as you import FormsModule, ngForm directive becomes active on all <form> tags. You can export it into a local template variable (#myForm="ngForm"). This will give access to aggregate form value (myForm.value), child controls (myForm.controls['control's name attribute']) and validity status (myForm.controls['formElement'].valid or myForm.valid) as well as user interaction properties like dirty (myForm.controls['formElement'].dirty), touched(myForm.controls['formElement'].touched) etc.

Angular provides ngSubmit ((ngSubmit)="saveMe(myForm.value)") directive which prevents form to be submitted to server

For binding you can use ngModel. If you need two way binding then use [()]. () Html to component direction, [] component to html

[(ngModel)]="somePropertyDefinedInComponent" ngModel require name attribute

In theory you should be able to use input event and then assign any of the component's property to the value of the input element. Most likely you will not do this as angular provides shot cut methods as described earlier.

(input)="somePropertyDefinedInComponent=$event.target.value"

ngModelGroup - If you want to group certain properties nested within property then you use ngModelGroup="property under which all elements will be nested"

Model based form or reactive form

In template based approach all the logic resides in html, so complex scenarios (like cross field validation etc.) may not be easy to achieve and also you cannot unit test your code. So for this case you can use reactive form for which you need to import ReactiveFormsModule. In your component you create FormGroup and add all form controls to it

   myFormGroup = new FormGroup({

      name: new FormControl('', [Validators.required, Validators.pattern('[a-zA-Z].*')]),
      address: new FormArray([
        new FormGroup({
          city: new FormControl(),
          state: new FormControl(),
        })
      ]),
      cityVisited: new FormArray([
        new FormControl()
      ])
    })

In the template, bind form formGroup attribute to the FormGroup object created in the component and input elements you need to bind it the FormControl property of component

     <form [formGroup]="myFormGroup" 

     formControlName="name" or [formControl]="myFormGroup.controls.name"

     <div *ngFor="let item of myFormGroup.controls.address.controls; let i=index">

         <input  [formControl]="item.controls.state" />

     </div>

     <div *ngFor="let item of myFormGroup.controls.cityVisited.controls; let i=index">

         <input  [formControl]="item" />

     </div>

FormGroup tracks the value and validity state of a group of FormControl instances.

Custom Validation
Create a function which takes FormControl as a parameter and returns object (property usually with the validator name and value as any value which you may want to show). If the function returns null then its valid otherwise its invalid. You can also create directive  and implements Validator. You can call updateValueAndValidity() on specific controller to trigger its validation.

Angular 2 Directive

Directive change appearance or behavior of the element. Component is an element and directive is attribute. It is defined similar as component, in place of @Component you use @Directive. Also notice selector is wrapped with [] which indicates its an attribute.

@Directive({
selector: "[my-directive]",
})

Within directive you can get reference of the element like this

private el: HTMLElement;
        @Input("modal-trigger") modalId: string; //you need to wrap modal-trigger in "" as it has - which is not allowed in variable name

        constructor(ref: ElementRef) {
               this.el = ref.nativeElement;
        }

Now finally you can add this directive to any of the element
<some-element my-directive="some-data-to-be-passed">