├── .vscode └── settings.json ├── README.md └── src ├── array ├── replaceSpace.js └── shuffle.js ├── interview-questions-in-javascript ├── 1.5.js ├── 1.6.js ├── 2.3.js ├── 3.1.js ├── 3.2.js ├── 4.1.js └── 4.2.js └── recursive ├── fibonacci.js ├── gcd.js └── string.js /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | // Place your settings in this file to overwrite default and user settings. 2 | { 3 | "editor.tabSize": 2, 4 | "editor.renderWhitespace": "all" 5 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Technical-Interview-Questions-In-JavaScript 2 | This is just my private note for interview. If you found this repo by googling, please check below awesome links instead. 3 | 4 | * https://github.com/MaximAbramchuck/awesome-interview-questions#javascript 5 | * https://github.com/kennymkchan/interview-questions-in-javascript 6 | * https://github.com/careercup/CtCI-6th-Edition-JavaScript-ES2015 7 | 8 | ## Simple way to run JavaScript in IDE without Web Browser 9 | 10 | ```bash 11 | Install vscode 12 | Install Code Runner Extension #https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner 13 | Run Code Runner 14 | ``` 15 | 16 | # JavaScript 17 | - Single threaded and synchronous execution 18 | - Object Based Programming and Functional Programming 19 | - Dynamic Typing 20 | 21 | ## Terms 22 | 23 | **Vanilla JavaScript** : Vanilla often refers to pure or plain. So in terms of programming languages, it means either without the use of 3rd party libraries or without the use of frameworks. 24 | 25 | **Syntax parser** : A program that reads your code and determines what it does and if its grammar is valid. 26 | 27 | **Lexical Environment** : Where something sits physically in the code you write. 28 | ‘Lexical’ means ‘having to do with words or grammar’. A lexical environment exists in programming languages in which where you write something is important. 29 | 30 | **Variable Environment** : Where the variables live and how they relate to each other in memory. 31 | 32 | **Operator Precedence** : Which operator function get called first. 33 | 34 | **Associativity** : What order operator functions get called in - left to right or right to left 35 | 36 | **Coercion** : Converting a value from one time to another. This happens quite often in JavaScript because it's dynamically typed. 37 | 38 | **Mutate** : to change something (**Immutable** : it cannot be changed) 39 | 40 | **Syntactic Sugar** : A feature that only changes how you type something, but nothing changes under the hood 41 | 42 | **First Class Functions** : everything you can do with other types you can do with functions 43 | 44 | **Whitespace** : Invisible characters that create literal 'space' in your written code (Carriage returns, tabs, spaces) 45 | 46 | **Polyfill** : code that adds a feature which the engine may lack. 47 | 48 | **Method Chaining** : Calling one method after another, and each method affects the parent object. So, obj.method1().method2() where both method end up with a 'this' variable pointing at 'obj' 49 | 50 | ## Hoisting 51 | 52 | setup memory space for variables and functions. Hoisting is the concept in which Javascript, by default, moves all declarations to the top 53 | of the current scope. As such, a variable can be used before it has been declared. Note that Javascript only hoists declarations and not initializations. 54 | 55 | ## Execution Context 56 | 57 | A wrapper to help manage the code that is running. 58 | There are lots of lexical environments. Which one is currently running is managed via execution contexts. It can contain things beyond what you’ve write in your code. 59 | 60 | By browser, an execution contexts is created at the global level, and there are Global Object (window object in case of browser), 'this' and outer environment. (in case of global execution context, it is null) 61 | 62 | Execution Context consists of two phase: 63 | 64 | * Creation Phase 65 | - global object, this, outer environment 66 | - setup memory space for variables and functions (hoisting) 67 | 68 | * Execution Phase 69 | - Run the code line by line. 70 | 71 | Execution Stack : stack of execution contexts 72 | 73 | ```javascript 74 | //b execution contexts 75 | function b() { 76 | var myVar; 77 | console.log(myVar); 78 | } 79 | 80 | //a execution contexts 81 | function a() { 82 | var myVar = 2; 83 | console.log(myVar); 84 | b(); 85 | } 86 | 87 | //global execution contexts 88 | var myVar = 1; 89 | console.log(myVar); 90 | a(); 91 | console.log(myVar); 92 | 93 | //1 94 | //2 95 | //undefined 96 | //1 97 | ``` 98 | 99 | ## Scope Chain 100 | 101 | Every execution context has a references to its outer environments. 102 | 103 | ```javascript 104 | function b() { 105 | console.log(myVar); 106 | } 107 | 108 | function a() { 109 | var myVar = 2; 110 | b(); 111 | } 112 | 113 | var myVar = 1; 114 | a(); 115 | //1 - because b is physically, lexically global 116 | ``` 117 | 118 | ```javascript 119 | function a() { 120 | function b() { 121 | console.log(myVar); //2 122 | } 123 | var myVar = 2; 124 | b(); 125 | } 126 | 127 | var myVar = 1; 128 | a(); 129 | ``` 130 | 131 | ```javascript 132 | function a() { 133 | function b() { 134 | console.log(myVar); //1 135 | } 136 | b(); 137 | } 138 | 139 | var myVar = 1; 140 | a(); 141 | ``` 142 | 143 | ## Scope 144 | where a variable is available in your code 145 | - Global Scope, Local Scope 146 | - JavaScript uses function-level scope. 147 | - let keyword enable to use block-level scope. 148 | 149 | ## Existence and Boolean 150 | 151 | undefined, null, '', 0 is false 152 | 153 | Boolean(0) is false 154 | Boolean('0') is true 155 | 156 | ## Function Statement and Function Expressions 157 | 158 | ```javascript 159 | //function statement 160 | function greet() { 161 | console.log('hi'); 162 | } 163 | 164 | //function expression 165 | anonymousGreet(); // Uncaught TypeError: undefined is not a function, 166 | // because function expressions are not hoisted. 167 | 168 | var anonymousGreet = function(){ 169 | console.log('hi'); 170 | } 171 | ``` 172 | ## Call by Value, References 173 | 174 | - Call by value : Primitive Types (undefined, null, boolean, number, string, symbol) 175 | - Call by references : Object 176 | 177 | ```javascript 178 | // by value (primitives) 179 | var a = 3; 180 | var b; 181 | 182 | b = a; 183 | a = 2; 184 | 185 | console.log(a); // 2 186 | console.log(b); // 3 187 | 188 | // by reference (all objects (including functions)) 189 | var c = { greeting: 'hi' }; 190 | var d; 191 | 192 | d = c; 193 | c.greeting = 'hello'; // mutate 194 | 195 | console.log(c); // hello 196 | console.log(d); // hello 197 | 198 | // by reference (even as parameters) 199 | function changeGreeting(obj) { 200 | obj.greeting = 'Hola'; // mutate 201 | } 202 | 203 | changeGreeting(d); 204 | console.log(c); // Hola 205 | console.log(d); // Hola 206 | 207 | // equals operator sets up new memory space (new address) 208 | c = { greeting: 'howdy' }; 209 | console.log(c); // Howdy 210 | console.log(d); // Hola 211 | ``` 212 | 213 | ## this 214 | 215 | ```javascript 216 | console.log(this); //Global Execution Context : Window Object 217 | 218 | function a(){ 219 | console.log(this); //also Window Object 220 | } 221 | 222 | var b = function() { 223 | console.log(this); //also Window Object 224 | }; 225 | a(); 226 | 227 | var c = { 228 | name: 'The c object', 229 | log: function() { 230 | var self = this; //this can cover whole project 231 | 232 | this.name = 'Updated c object'; 233 | console.log(this); //c object 234 | 235 | var setname = function(newname) { 236 | this.name = newname; //Window.name has been created (!?) internal function of object 237 | } 238 | setname('Updated again! the c object'); 239 | } 240 | }; 241 | 242 | c.log(); 243 | ``` 244 | 245 | ## Array 246 | 247 | Array can hold anything. 248 | 249 | ```javascript 250 | var arr = [ 251 | 1, 252 | false, 253 | { 254 | name:'Tony', 255 | address: '111 Main St.' 256 | }, 257 | function(name) { 258 | var greeting = 'Hello '; 259 | console.log(greeting + name); 260 | }, 261 | "hello" 262 | ]; 263 | 264 | console.log(arr); 265 | arr[3](arr[2].name); 266 | ``` 267 | 268 | ## arguments and spread 269 | 270 | The parameters you pass to a function in general. Javascript gives you a keyword of the same name which contains them all. 271 | 272 | ```javascript 273 | function greet(firstname, lastname, language, ...others) { 274 | 275 | language = language || 'en'; 276 | 277 | if (arguments.length === 0) { 278 | console.log('Missing paramenters!'); 279 | } 280 | 281 | console.log(firstname); 282 | console.log(lastname); 283 | console.log(language); 284 | console.log(arguments); //array-like : italic [] 285 | } 286 | 287 | greet(); 288 | ``` 289 | 290 | ## Function Overloading 291 | 292 | Javascript does not allow function overloading like other language such as Java, C++ 293 | 294 | ```javascript 295 | function greet(firstname, lastname, language) { 296 | language = language || 'en'; 297 | 298 | if(language === 'en') { 299 | console.log('Hello, ' + firstname + '' + lastname); 300 | } else if(language === 'es') { 301 | console.log('Hola, ' + firstname + '' + lastname); 302 | } 303 | } 304 | 305 | function greetEnglish(firstname, lastname) { 306 | greet(firstname, lastname, 'en'); 307 | } 308 | function greetSpanish(firstname, lastname) { 309 | greet(firstname, lastname, 'es'); 310 | } 311 | 312 | greetEnglish('John', 'Doe'); 313 | greetSpanish('John', 'Doe'); 314 | 315 | ``` 316 | 317 | ## Automatic Semicolon Insertion 318 | 319 | ```javascript 320 | function getPerson() { 321 | return 322 | { 323 | firstname: 'Tony' 324 | } 325 | } 326 | 327 | console.log(getPerson()); //undefined because 'return;', watch out! 328 | ``` 329 | 330 | ## Immediately Invoked Function Expressions (IIFE) 331 | 332 | It is useful for safety because it wraps all its code in an immediately invoked function. 333 | It's something that you can imitate in your own code to make sure you aren't colliding with other code when you are creating something reusable. 334 | 335 | ```javascript 336 | var greeting = function(name) { 337 | return 'Hello ' + name; 338 | }('John'); 339 | 340 | console.log(greeting); //greeting contains return value from IIFE 341 | 342 | var firstname = 'John'; 343 | 344 | (function(name) { 345 | var greeting = 'Inside IIFE: Hello'; 346 | console.log(greeting + ' ' + name); 347 | }(firstname)); 348 | /*wrapped in parentheses, so the the javascript engine understands that 349 | I don't mean this to be my kind of normal function statement. to trick the syntax parser.*/ 350 | 351 | (3*4); //valid expression 352 | ``` 353 | 354 | ## Closure 355 | 356 | - Inner function can access to variables in the parent function scope. 357 | - Closure is a function defined inside another function (called the parent function), and has access to variables that are declared and defined in the parent function scope. 358 | - Everytime you call a function, it gets its own execution context, and any functions created inside of it will point to that execution context. 359 | - Useful in hiding the implementation of functionality while still revealing the interface. (encapsulation) 360 | - Function Factory, Function Currying 361 | 362 | ```javascript 363 | function parent(){ 364 | var title = 'hello'; 365 | function child(){ 366 | alert(title); 367 | } 368 | child(); 369 | } 370 | parent(); 371 | ``` 372 | 373 | ```javascript 374 | function parent(){ 375 | var title = 'hello'; 376 | return function(){ 377 | alert(title); 378 | } 379 | } 380 | var child = parent(); 381 | child(); 382 | ``` 383 | 384 | ```javascript 385 | function buildFunctions() { 386 | var arr = []; 387 | for(var i = 0; i < 3; i++) { 388 | arr.push(function() { 389 | console.log(i); 390 | }); 391 | } 392 | return arr; 393 | } 394 | 395 | var fs = buildFunctions(); 396 | fs[0](); //3 397 | fs[1](); //3 398 | fs[2](); //3 399 | ``` 400 | 401 | ```javascript 402 | function buildFunctions() { 403 | var arr = []; 404 | for(var i = 0; i < 3; i++) { 405 | //let j = i; es6 way 406 | arr.push( 407 | (function(j) { 408 | return function() { 409 | console.log(j); 410 | } 411 | })(i); 412 | ); 413 | } 414 | return arr; 415 | } 416 | 417 | var fs = buildFunctions(); 418 | fs[0](); //3 419 | fs[1](); //3 420 | fs[2](); //3 421 | ``` 422 | 423 | ```javascript 424 | function makeGreeting(language) { 425 | return function(firstname, lastname) { 426 | if (language === 'en') { 427 | console.log('Hello ' + firstname + ' ' + lastname); 428 | } 429 | 430 | if (language === 'es') { 431 | console.log('Hola ' + firstname + ' ' + lastname); 432 | } 433 | } 434 | } 435 | 436 | var greetEnglish = makeGreeting('en'); 437 | var greetSpanish = makeGreeting('es'); 438 | 439 | greetEnglish('John', 'Doe'); //Created a function that is using 'en' value always. 440 | greetSpanish('John', 'Doe'); 441 | ``` 442 | 443 | ## Closure and Callback 444 | 445 | ```javascript 446 | function sayHiLater() { 447 | var greeting = 'Hi!'; 448 | 449 | setTimeout(function(){ 450 | console.log(greeting); //greeting is closured 451 | }, 3000); 452 | } 453 | 454 | sayHiLater(); 455 | 456 | //jQuery uses function expressions and first-class functions! 457 | $('button').click(function() { 458 | 459 | }); 460 | ``` 461 | 462 | ## Closure and IIFE 463 | 464 | ```javascript 465 | const generate = (function() { 466 | let num = 1; 467 | return function() { 468 | return num++; 469 | } 470 | })(); 471 | 472 | console.log(generate()); 473 | console.log(generate()); 474 | console.log(generate()); 475 | console.log(generate()); 476 | 477 | /* 478 | 1. The variable 'generate' is assigned the return value of a self-invoking function. 479 | 2. The self-invoking function only runs once. It sets the num to 1, and returns a function expression. 480 | 3. This way 'generate' becomes a function. The wonderful part is that it can access the 'num' in the parent scope. 481 | 4. This is called a JavaScript closure. It makes it possible for a function to have "private" variables. 482 | 5. The counter is protected by the scope of the anonymous function, and can only be changed using the 'generate' 483 | */ 484 | })(); 485 | 486 | ``` 487 | 488 | ## call() apply() bind() 489 | - To change what this keyword is. 490 | - function currying : creating a copy of a function but with some preset parameters. 491 | - function borrowing : var args = Array.prototype.slice.call(arguments); 492 | 493 | ```javascript 494 | function.call(person, 'en', 'es'); 495 | function.apply(person, ['en', 'es']); 496 | ``` 497 | 498 | ```javascript 499 | //function currying 500 | function multiply(a, b) { 501 | return a*b; 502 | } 503 | 504 | var multipleByTwo = multiply.bind(this, 2); 505 | multipleByTwo(4); 506 | ``` 507 | 508 | ## Functional Programming 509 | 510 | - underscore.js 511 | - lodash 512 | 513 | ```javascript 514 | //underscore.js 515 | var arr6 = _.map(arr1, item => item * 3); 516 | var arr7 = _.filter([2,3,4,5,6,7], item => item % 2 === 0); 517 | ``` 518 | 519 | ## Object-Oriented JavaScript and Prototypal Inheritance 520 | 521 | * Classical Inheritance 522 | - Java, C# way of inheritance 523 | - Verbose 524 | 525 | * Prototypal Inheritance 526 | - Simple, flexible, extensible, easy to understand 527 | 528 | ## Prototype 529 | 530 | All objects that including functions have a prototype property. 531 | 532 | **Prototype Chain** 533 | 534 | ```javascript 535 | var person = { 536 | firstname: 'Default', 537 | lastname: 'Default', 538 | getFullname: function() { 539 | console.log(this); //john when call john.getFullname(); 540 | return this.firstname + ' ' + this.lastname; 541 | } 542 | } 543 | 544 | var john = { 545 | firstname: 'John', 546 | lastname: 'Doe' 547 | } 548 | 549 | var jane = { 550 | firstname: 'Jane' 551 | } 552 | 553 | //don't do this EVER! for demo purposes only!! 554 | john.__proto__ = person; 555 | console.log(john.getFullname()); //John Doe 556 | 557 | jane.__proto__ = person; 558 | console.log(jane.getFullname()); //Jane Default 559 | 560 | ``` 561 | 562 | **Base Object (Object {})** : the very bottom of the prototype chain. Everything eventually leads to the base object. 563 | 564 | **Empty Function** : any function you create in JavaScript will have this proto. 565 | 566 | ```javascript 567 | var a = {}; 568 | var b = function() {}; 569 | var c = []; 570 | 571 | a.__proto__.toString(); 572 | b.__proto__.apply(); 573 | c.__proto__.length 574 | ``` 575 | 576 | ### Reflection and Extend 577 | 578 | Reflection : An object can look at itself, listing and changing its properties and methods. 579 | 580 | ```javascript 581 | var person = { 582 | firstname: 'Default', 583 | lastname: 'Default', 584 | getFullName: function() { 585 | console.log(this); //john when call john.getFullname(); 586 | return this.firstname + ' ' + this.lastname; 587 | } 588 | } 589 | 590 | var john = { 591 | firstname: 'John', 592 | lastname: 'Doe' 593 | } 594 | 595 | john.__proto__ = person; 596 | 597 | for (var prop in john) { 598 | if (john.hasOwnProperty(prop) { 599 | console.log(prop + ': ' + john[prop]); 600 | } // this does not print getFullName 601 | } 602 | 603 | var jane = { 604 | address: '111 Main St.', 605 | getFormalFullName: function() { 606 | return this.lastname + ', ' + this.firstname; 607 | } 608 | } 609 | 610 | var jim = { 611 | getFirstname : function() { 612 | return firstname; 613 | } 614 | } 615 | 616 | _.extend(john, jane, jim); 617 | console.log(john); 618 | 619 | ``` 620 | 621 | ## Function Constructor and 'new' and 'prototype' 622 | 623 | A normal function that is used to construct object. 624 | The 'this' variable points a new empty object, and that object is returned from the function automatically. 625 | 626 | The prototype property on a function is not the prototype of the function (__proto__) 627 | 628 | ```javascript 629 | function Person(firstname, lastname) { 630 | console.log(this); // Person {} 631 | this.firstname = firstname; 632 | this.lastname = lastname; 633 | console.log('This function is invoked'); 634 | 635 | //return { greeting: 'i got in the way'}; 636 | } 637 | 638 | Person.prototype.getFullName = function() { 639 | return this.firstname + ' ' + this.lastname; 640 | } 641 | 642 | //John points to Person.prototype as its prototype as its __proto__, and so does Jane. 643 | 644 | // function takes up memory space. By adding prototype method, 645 | // it only takes one space even though thousand object uses it. 646 | 647 | var john = new Person('John', 'Doe'); 648 | console.log(john); 649 | var jane = new Person('Jane', 'Doe'); 650 | console.log(jane); 651 | 652 | var dan = Person('Dan', 'Doe'); 653 | console.log(dan); 654 | //pros of function constructer 655 | //so we always use Capital Letter 656 | ``` 657 | 658 | ## Built-in function constructor 659 | 660 | ```javascript 661 | String.prototype.isLengthGreaterThan = function(limit) { 662 | return this.length > limit; 663 | } 664 | 665 | Number.prototype.isPositive = function() { 666 | return this > 0; 667 | } 668 | 669 | console.log('test'.isLengthGreaterThan(3)); //true 670 | console.log(3.isPositive()); //error 671 | console.log(new Number(3).isPositive()); // true 672 | 673 | var a = 3; 674 | var b = new Number(3); 675 | 676 | a == b //true 677 | a === b //false - dangerous to use built-in function constructor 678 | 679 | Array.prototype.myCustomFeature = 'cool!'; 680 | 681 | var arr = ['John', 'Jane', 'Jim']; 682 | 683 | for(var prop in arr) { //dangerous 684 | console.log(prop + ': ' + arr[prop]); 685 | } 686 | ``` 687 | 688 | ## Object.create and Pure Prototypal Inheritance 689 | 690 | ```javascript 691 | // this is called polyfill 692 | if(!Object.create) { 693 | Object.create = function(o) { 694 | function F() {} 695 | F.prototype = o; 696 | return new F(); 697 | } 698 | } 699 | 700 | var person = { 701 | firstname: 'Default', 702 | lastname: 'Default', 703 | greet: function() { 704 | return 'Hi ' + this.firstname; 705 | } 706 | } 707 | 708 | var john = Object.create(person); 709 | john.firstname = 'John'; 710 | john.lastname = 'Doe'; 711 | console.log(john); 712 | 713 | ``` 714 | 715 | ## ES6 and Classes 716 | 717 | This is just syntactic sugar, same as prototypal inheritance. 718 | 719 | ```javascript 720 | class Person { 721 | constructor(firstname, lastname) { 722 | this.firstname = firstname; 723 | this.lastname = lastname; 724 | } 725 | 726 | great() { 727 | return 'Hi ' + firstname; 728 | } 729 | } 730 | 731 | var john = new Person('John', 'Doe'); 732 | 733 | class InformalPerson extends Person { 734 | constructor(firstname, lastname) { 735 | super(firstname, lastname); 736 | } 737 | 738 | greet() { 739 | return 'Yo ' + firstname; 740 | } 741 | } 742 | ``` 743 | 744 | ## typeof, instanceof 745 | 746 | ```javascript 747 | var a = 3; 748 | console.log(typeof a); // number (lower case) 749 | 750 | var b = "Hello"; 751 | console.log(typeof b); // string (lower case) 752 | 753 | var c = {}; 754 | console.log(typeof c); // object 755 | 756 | var d = []; 757 | console.log(typeof d); // object - weird 758 | console.log(Object.prototype.toString.call(d)); // [object Array] better! 759 | 760 | function Person(name) { 761 | this.name = name; 762 | } 763 | 764 | var e = new Person('Jane'); 765 | console.log(typeof e); //object 766 | console.log(e instanceof Person); // true 767 | 768 | console.log(typeof undefined); // undefined - makes sense 769 | console.log(typeof null); // object - a bug since, like, forever... 770 | 771 | var z = function() { }; 772 | console.log(typeof z); // function 773 | ``` 774 | 775 | ## Strict Mode 776 | 777 | use strict : it prevents developers from using undeclared variables. 778 | 779 | ```javascript 780 | function logNewPerson() { 781 | "use strict"; 782 | 783 | var person2; 784 | persom2 = {}; 785 | console.log(persom2); // Error 786 | } 787 | 788 | var person; 789 | persom = {}; 790 | console.log(persom); // Object {} without 'use strict'; 791 | logNewPerson(); 792 | ``` 793 | # Etc 794 | 795 | ## document vs window 796 | 797 | The window is the actual global object. 798 | The screen is the screen, it contains properties about the user's display. 799 | The document is where the DOM is. 800 | 801 | ## prototype vs __ proto __ 802 | 803 | ## preventDefault vs stopPropagation 804 | 805 | ## Event Bubbling 806 | 807 | When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors. 808 | 809 | ```html 810 |
EM
, the handler on DIV
runs.
812 |