JS Developer (Angular) interview

Getting Started

This guide gives you a few tips on learning and education. Read the question, google, go to the next, repeat. There are no guarantees that you will receive the same questions in your interview. But I hope that this list will simplify it.

Table of contents

• Javascript
• Typescript
• Angular
• Exercises
• Links

Interview questions

Javascript

Type conversion

• What javascript types do you know?
• What types of conversion do you know?
• How works Object + number?
• How works undefined + string?
• How works if (new Boolean(false))?
• How works if ( { a: 4 } )?
• How convert number to string?

Event

• What event stages do you know?
• What is target?
• stopPropagation vs stopImmediatePropagation differences
• How throw event?
• How catch event?
• How catch event on capturing stage?
• How change colors on multiple div's on mouse click? What is delegation?

OOP in javascript

• How wroks pototype inheritance?
• What is __proto__ propetry and how we get it? Why we haven't write new properties to __proto__ directly?
• How we make prototype inheritance in javascript?
• What we will get in instance of B class (extends A class) if we will change some variable in A.prototype?
• What we will get in instance of B class (extends A class) if we will change some variable that related to A class?
• (Bonus) Make polyfill for Object.create()

Context

• What way to pass the context in funciton do you know?
• In which stage function get the context variable "this"?
• What is lexical environment?
• (Bonus) Make polyfill for bind()

Closures

• What is closure? some examples...
• How implement conter with closure?
• How implement module with closure?
• How save context with closure? (bonus for setTimeout example)

Promises

• What stages of promise do you know?
• How chain promise?
• What returns onFullfiled function?
• What returns catch if we chain it to promise invocation?
• How works finally?
• (Bonus) make polyfill for Promise.all

Typescript

• Why we have to use let and const instead of var?
• Why we have to use arrow functions?
• What interfaces are compiled into?
• What are the decorators under the hood?
• (Bonus) How create own decorator? Examples...

Angular

Components

• How componennts can communicate with each other?
• Components lifecycle hooks order
• How works view encapsulation? What types of view encapsulation do you know?
• How we can detect click on component?
• What is host listener and host binding?
• (Bonus) Ways to change child components styles

Change detenction

• What is zones? How it works?
• How works change detection in angular?
• What approaches do you know to disable change detection in components?
• What approaches do you know to enable change detection in components again?
• (Bonus) What event in zone triggers change detection?

RxJS

• What is cold and hot observables?
• What are the differences between the subject and the observable?
• Subject types?
• What operator on observable do you know?
• flatMap and map differences?
• flatMap and switchMap differences?
• Ways to unsubcribe of observable?
• (Bonus) How works takeWhile and takeUntil?

DI & Modules

• How define new service and pass it to component?
• What in dependency injection and dependency tree?
• How works providers on module and providers on compoennts?
• How we can prevent injector creation for lazyloaded module?
• How implement lazyloading?
• (Bonus) How implement forRoot method and why we need it?

Pipes

• Why we need pipes?
• How implement custom pipe?
• What is pure and impure pipes?
• (Bonus) How implement statefull pipe?

Forms

• How implement template driven forms?
• How implement reactive forms?
• How create custom validator?
• How create dependent (from other control) custom validator?

Routing

• What is routing outlet?
• Why we need child routes?
• Why we need active route?
• Why we need guards and how implement custom guard?

Testing

• How test component?
• What is TestBed?
• How mock http service and test it?
• (Bonus) What is spy? Did you ever use it?

Exercises

Try to solve it without tips

• Sort words by number inside: 'ads2aa 5qw asd1aa' => 'asd1aa ads2aa 5qw'

function sortWords(str) {
  var arr = str.split(' ');
  return arr.sort( (a,b) => {
    var num1 = +a.replace(/[^0-9]/g, '')
    var num2 = +b.replace(/[^0-9]/g, '')
    return num1-num2
  }).join(' ')
}

• Find and collect anagramms: ['adsaa', 'asaad', 'gqw', 'qwg'] => [ [ 'adsaa', 'asaad' ], [ 'gqw', 'qwg' ] ]

function findAnagramms(arr) {
  var cache = {};
  var result = [];
  for (var i = 0; i < arr.length; i++) {
    var sorted = arr[i].split('').sort().join('');
    if (!cache[sorted]) {
      cache[sorted] = [];
    }
    cache[sorted].push(arr[i]);
  }
  for (var key in cache) {
    result.push(cache[key]);
  }
  return result;
}

• Make funny object from string: 'a.b.c.d' => { a : { b : { c : { d: null } } } }

function objectizer(str) {
  return str.split('.').reduceRight( (total, a) => {
    return { [a]: total }
  }, null);
}

• fibonacci

function fibo(num) {
  function fibo_run(prev, next, count) {
    return count > 0 ? fibo_run(next, prev+next, --count) : next;
  }
  return fibo_run(0, 1, num-1);
}

• Find monotone sequence: [2,3,4] => true; [4,3,1,1] => true; [2,5,1] => false; [1,2,3,0] => false; [1,2,2,2,1] => false

function mono(arr) {
  var status;
  var prevStatus;
  for (var i = 0; i<arr.length-1; i++) {
    if (arr[i] == arr[i+1]) continue;
    if (prevStatus === undefined) {
      prevStatus = ((arr[i] - arr[i+1]) > 0)
      continue;
    }
    status = (arr[i] - arr[i+1] > 0)
    if (prevStatus == status) {
      continue;
    } else {
      return false;
    }
  }
  return true;
}

• Validate brackets: '()()()' => true; '(())()' => true; ')()' => false; '(()' => false;

function bracketsValidate(str) {
  var counter = 0;
  for ( var i = 0; i < arr.length; i++) {
    if ( arr[i] == ')' ) counter--;
    if ( arr[i] == '(' ) counter++;
    if ( counter < 0) return false;
  }
  return counter == 0;
}

• Compress word: 'aaavvdeeemmmg' => 'a3v2de3m3g'

function compressWord(str) {
  var result = '';
  var counter = 1;
  for ( var i = 0; i < str.length; i++) {
    if (result.length == 0) {
      result = result.concat(str[i])
      continue;
    }
    if (result[result.length-1] != str[i]) {
      if (counter > 1) {
        result = result.concat(counter)
        counter = 1;
      }
      result = result.concat(str[i])
    } else {
      counter++;
    }
  }
  return result;
}

• Currying: add(4)(3)(1) => 8

function add(a) {
  function addFunc(b) {
    a += b;
    return addFunc;
  }
  addFunc.valueOf = function() {
    return a;
  }
  return addFunc
}

• Create increment function for array (behave like number): [4,5,3].increment() => [4, 5, 4]; [4,5,9].increment() => [4, 6, 0]

Array.prototype.increment = function() { 
  var incremented = false; 
  this.reverse().forEach( (item,i) => { 
    if ( item < 9 && !incremented ) { 
      this[i] = ++item; incremented = true; 
    } else if (item == 9) {
      this[i] = 0;
    }
  });
  if (this[this.length-1] == 0) this.push(1); 
  return this.reverse().slice()  
}

• Create polyfill for Promise.all

• Create polyfill for Object.create

• Create polyfill for bind

Links

• Javascript.info - From the basics to advanced topics with simple, but detailed explanations
• JavaScript Design Patterns - This book is targeted at professional developers wishing to improve their knowledge of design patterns and how they can be applied to the JavaScript programming language.
• Rangle's Angular Training Book - This book will cover the most important Angular topics