└── README.md /README.md: -------------------------------------------------------------------------------- 1 | # JS Developer (Angular) interview 2 | 3 | ## Getting Started 4 | 5 | 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. 6 | 7 | ## Table of contents 8 | 9 | * [Javascript](https://github.com/vladborsh/js-developer-interview#javascript) 10 | * [Typescript](https://github.com/vladborsh/js-developer-interview#typescript) 11 | * [Angular](https://github.com/vladborsh/js-developer-interview#angular) 12 | * [Exercises](https://github.com/vladborsh/js-developer-interview#exercises) 13 | * [Links](https://github.com/vladborsh/js-developer-interview#links) 14 | 15 | ## Interview questions 16 | 17 | ### Javascript 18 | 19 | #### Type conversion 20 | 21 | * What javascript types do you know? 22 | * What types of conversion do you know? 23 | * How works ``` Object + number```? 24 | * How works ``` undefined + string```? 25 | * How works ``` if (new Boolean(false))```? 26 | * How works ``` if ( { a: 4 } )```? 27 | * How convert number to string? 28 | 29 | #### Event 30 | 31 | * What event stages do you know? 32 | * What is target? 33 | * ``` stopPropagation``` vs ```stopImmediatePropagation``` differences 34 | * How throw event? 35 | * How catch event? 36 | * How catch event on capturing stage? 37 | * How change colors on multiple div's on mouse click? What is delegation? 38 | 39 | #### OOP in javascript 40 | 41 | * How wroks pototype inheritance? 42 | * What is ```__proto__``` propetry and how we get it? Why we haven't write new properties to ```__proto__``` directly? 43 | * How we make prototype inheritance in javascript? 44 | * What we will get in instance of B class (extends A class) if we will change some variable in A.prototype? 45 | * What we will get in instance of B class (extends A class) if we will change some variable that related to A class? 46 | * (**Bonus**) Make polyfill for ```Object.create()``` 47 | 48 | #### Context 49 | 50 | * What way to pass the context in funciton do you know? 51 | * In which stage function get the context variable "this"? 52 | * What is lexical environment? 53 | * (**Bonus**) Make polyfill for ```bind()``` 54 | 55 | #### Closures 56 | 57 | * What is closure? some examples... 58 | * How implement conter with closure? 59 | * How implement module with closure? 60 | * How save context with closure? (bonus for setTimeout example) 61 | 62 | #### Promises 63 | 64 | * What stages of promise do you know? 65 | * How chain promise? 66 | * What returns onFullfiled function? 67 | * What returns catch if we chain it to promise invocation? 68 | * How works finally? 69 | * (**Bonus**) make polyfill for ```Promise.all``` 70 | 71 | ### Typescript 72 | 73 | * Why we have to use let and const instead of var? 74 | * Why we have to use arrow functions? 75 | * What interfaces are compiled into? 76 | * What are the decorators under the hood? 77 | * (**Bonus**) How create own decorator? Examples... 78 | 79 | ### Angular 80 | 81 | #### Components 82 | 83 | * How componennts can communicate with each other? 84 | * Components lifecycle hooks order 85 | * How works view encapsulation? What types of view encapsulation do you know? 86 | * How we can detect click on component? 87 | * What is host listener and host binding? 88 | * (**Bonus**) Ways to change child components styles 89 | 90 | #### Change detenction 91 | 92 | * What is zones? How it works? 93 | * How works change detection in angular? 94 | * What approaches do you know to disable change detection in components? 95 | * What approaches do you know to enable change detection in components again? 96 | * (**Bonus**) What event in zone triggers change detection? 97 | 98 | #### RxJS 99 | 100 | * What is cold and hot observables? 101 | * What are the differences between the subject and the observable? 102 | * Subject types? 103 | * What operator on observable do you know? 104 | * ```flatMap``` and ```map``` differences? 105 | * ```flatMap``` and ```switchMap``` differences? 106 | * Ways to unsubcribe of observable? 107 | * (**Bonus**) How works ```takeWhile``` and ```takeUntil```? 108 | 109 | #### DI & Modules 110 | 111 | * How define new service and pass it to component? 112 | * What in dependency injection and dependency tree? 113 | * How works providers on module and providers on compoennts? 114 | * How we can prevent injector creation for lazyloaded module? 115 | * How implement lazyloading? 116 | * (**Bonus**) How implement ```forRoot``` method and why we need it? 117 | 118 | #### Pipes 119 | 120 | * Why we need pipes? 121 | * How implement custom pipe? 122 | * What is pure and impure pipes? 123 | * (**Bonus**) How implement statefull pipe? 124 | 125 | #### Forms 126 | 127 | * How implement template driven forms? 128 | * How implement reactive forms? 129 | * How create custom validator? 130 | * How create dependent (from other control) custom validator? 131 | 132 | #### Routing 133 | 134 | * What is routing outlet? 135 | * Why we need child routes? 136 | * Why we need active route? 137 | * Why we need guards and how implement custom guard? 138 | 139 | ### Testing 140 | 141 | * How test component? 142 | * What is ```TestBed```? 143 | * How mock http service and test it? 144 | * (**Bonus**) What is spy? Did you ever use it? 145 | 146 | ### Exercises 147 | 148 | Try to solve it without tips 149 | 150 | * Sort words by number inside: ```'ads2aa 5qw asd1aa' => 'asd1aa ads2aa 5qw'``` 151 | ``` javascript 152 | function sortWords(str) { 153 | var arr = str.split(' '); 154 | return arr.sort( (a,b) => { 155 | var num1 = +a.replace(/[^0-9]/g, '') 156 | var num2 = +b.replace(/[^0-9]/g, '') 157 | return num1-num2 158 | }).join(' ') 159 | } 160 | ``` 161 | 162 | * Find and collect anagramms: ```['adsaa', 'asaad', 'gqw', 'qwg'] => [ [ 'adsaa', 'asaad' ], [ 'gqw', 'qwg' ] ]``` 163 | ``` javascript 164 | function findAnagramms(arr) { 165 | var cache = {}; 166 | var result = []; 167 | for (var i = 0; i < arr.length; i++) { 168 | var sorted = arr[i].split('').sort().join(''); 169 | if (!cache[sorted]) { 170 | cache[sorted] = []; 171 | } 172 | cache[sorted].push(arr[i]); 173 | } 174 | for (var key in cache) { 175 | result.push(cache[key]); 176 | } 177 | return result; 178 | } 179 | ``` 180 | 181 | * Make funny object from string: ```'a.b.c.d' => { a : { b : { c : { d: null } } } } ``` 182 | ``` javascript 183 | function objectizer(str) { 184 | return str.split('.').reduceRight( (total, a) => { 185 | return { [a]: total } 186 | }, null); 187 | } 188 | ``` 189 | 190 | * fibonacci 191 | ``` javascript 192 | function fibo(num) { 193 | function fibo_run(prev, next, count) { 194 | return count > 0 ? fibo_run(next, prev+next, --count) : next; 195 | } 196 | return fibo_run(0, 1, num-1); 197 | } 198 | ``` 199 | 200 | 201 | * Find monotone sequence: ``` 202 | [2,3,4] => true; 203 | [4,3,1,1] => true; 204 | [2,5,1] => false; 205 | [1,2,3,0] => false; 206 | [1,2,2,2,1] => false``` 207 | ``` javascript 208 | function mono(arr) { 209 | var status; 210 | var prevStatus; 211 | for (var i = 0; i 0) 215 | continue; 216 | } 217 | status = (arr[i] - arr[i+1] > 0) 218 | if (prevStatus == status) { 219 | continue; 220 | } else { 221 | return false; 222 | } 223 | } 224 | return true; 225 | } 226 | ``` 227 | 228 | * Validate brackets: ``` 229 | '()()()' => true; 230 | '(())()' => true; 231 | ')()' => false; 232 | '(()' => false;``` 233 | ``` javascript 234 | function bracketsValidate(str) { 235 | var counter = 0; 236 | for ( var i = 0; i < arr.length; i++) { 237 | if ( arr[i] == ')' ) counter--; 238 | if ( arr[i] == '(' ) counter++; 239 | if ( counter < 0) return false; 240 | } 241 | return counter == 0; 242 | } 243 | ``` 244 | 245 | * Compress word: ```'aaavvdeeemmmg' => 'a3v2de3m3g'``` 246 | ``` javascript 247 | function compressWord(str) { 248 | var result = ''; 249 | var counter = 1; 250 | for ( var i = 0; i < str.length; i++) { 251 | if (result.length == 0) { 252 | result = result.concat(str[i]) 253 | continue; 254 | } 255 | if (result[result.length-1] != str[i]) { 256 | if (counter > 1) { 257 | result = result.concat(counter) 258 | counter = 1; 259 | } 260 | result = result.concat(str[i]) 261 | } else { 262 | counter++; 263 | } 264 | } 265 | return result; 266 | } 267 | ``` 268 | 269 | * Currying: ```add(4)(3)(1) => 8``` 270 | ``` javascript 271 | function add(a) { 272 | function addFunc(b) { 273 | a += b; 274 | return addFunc; 275 | } 276 | addFunc.valueOf = function() { 277 | return a; 278 | } 279 | return addFunc 280 | } 281 | ``` 282 | 283 | * Create increment function for array (behave like number): ``` 284 | [4,5,3].increment() => [4, 5, 4]; 285 | [4,5,9].increment() => [4, 6, 0]``` 286 | ``` javascript 287 | Array.prototype.increment = function() { 288 | var incremented = false; 289 | this.reverse().forEach( (item,i) => { 290 | if ( item < 9 && !incremented ) { 291 | this[i] = ++item; incremented = true; 292 | } else if (item == 9) { 293 | this[i] = 0; 294 | } 295 | }); 296 | if (this[this.length-1] == 0) this.push(1); 297 | return this.reverse().slice() 298 | } 299 | ``` 300 | 301 | * Create polyfill for ```Promise.all``` 302 | 303 | * Create polyfill for ```Object.create``` 304 | 305 | * Create polyfill for ```bind``` 306 | 307 | ## Links 308 | 309 | * [Javascript.info](https://javascript.info/first-steps) - From the basics to advanced topics with simple, but detailed explanations 310 | * [JavaScript Design Patterns](https://addyosmani.com/resources/essentialjsdesignpatterns/book/) - 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. 311 | * [Rangle's Angular Training Book](https://angular-2-training-book.rangle.io/handout/why_angular_2.html) - This book will cover the most important Angular topics 312 | --------------------------------------------------------------------------------