├── ES6 New.md └── README.md /ES6 New.md: -------------------------------------------------------------------------------- 1 | **Q. JavaScript — What are ES6 Tag Functions?** 2 | 3 | [JS BIN](https://jsbin.com/sumigog/edit?js,console) 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # JS-Essential-Interview ★ 2 | Essential JS Interview Questions, that will come handy durning JS Interviews. 👋 3 | 4 | > Here JS BIN Comprises of code snippets, of the following Questions, along with explanation as comments. 📖 5 | 6 | **Question 1** 7 | 8 | What is a potential pitfall with using typeof bar === "object" to determine if bar is an object? How can this pitfall be avoided? 9 | 10 | [JS BIN](https://jsbin.com/qeyenuh/edit?js,console). 11 | 12 | ## 13 | 14 | **Question 2** 15 | 16 | What will the code below output to the console and why? 17 | 18 | ```js (function(){ 19 | var a = b = 3; 20 | })(); 21 | 22 | console.log("a defined? " + (typeof a !== 'undefined')); 23 | console.log("b defined? " + (typeof b !== 'undefined')); 24 | ``` 25 | [JS BIN](https://jsbin.com/qacaruh/edit?js,console). 26 | 27 | ## 28 | 29 | **Question 3** 30 | 31 | What will the code below output to the console and why? 32 | 33 | ```js 34 | 35 | var myObject = { 36 | foo: "bar", 37 | func: function() { 38 | var self = this; 39 | console.log("outer func: this.foo = " + this.foo); 40 | console.log("outer func: self.foo = " + self.foo); 41 | (function() { 42 | console.log("inner func: this.foo = " + this.foo); 43 | console.log("inner func: self.foo = " + self.foo); 44 | }()); 45 | } 46 | }; 47 | myObject.func(); 48 | 49 | ``` 50 | 51 | [JS BIN](https://jsbin.com/xaxefud/1/edit?js,console) 52 | 53 | ## 54 | 55 | **Question 4** 56 | 57 | What is the significance of, and reason for, wrapping the entire content of a JavaScript source file in a function block? 58 | 59 | ```js 60 | /* 61 | 62 | This is an increasingly common practice, employed by many popular JavaScript libraries (jQuery, Node.js, etc.). This 63 | technique creates a closure around the entire contents of the file which, perhaps most importantly, creates a private 64 | namespace and thereby helps avoid potential name clashes between different JavaScript modules and libraries. 65 | 66 | 67 | Another feature of this technique is to allow for an easily referenceable (presumably shorter) alias for a global 68 | variable. This is often used, for example, in jQuery plugins. jQuery allows you to disable the $ reference to the jQuery 69 | namespace, using jQuery.noConflict(). If this has been done, your code can still use $ employing this closure technique, 70 | as follows: 71 | 72 | (function($) { jQuery plugin code referencing $ } )(jQuery); 73 | 74 | */ 75 | 76 | ``` 77 | 78 | ## 79 | 80 | **Question 5** 81 | 82 | What is the significance, and what are the benefits, of including 'use strict' at the beginning of a JavaScript source file? 83 | 84 | ```js 85 | /* 86 | 87 | Makes debugging easier - Code errors that would otherwise have been ignored or would have failed silently will now generate errors or throw exceptions, 88 | 89 | Prevents accidental globals - Without strict mode, assigning a value to an undeclared variable automatically creates a global variable with that name. This is one of the most common errors in JavaScript. In strict mode, attempting to do so throws an error. 90 | 91 | Eliminates this coercion - Without strict mode, a reference to a this value of null or undefined is automatically coerced to the global. This can cause many headfakes and pull-out-your-hair kind of bugs. In strict mode, referencing a a this value of null or undefined throws an error. 92 | 93 | Disallows duplicate parameter values - Strict mode throws an error when it detects a duplicate named argument for a function (e.g., function foo(val1, val2, val1){}), thereby catching what is almost certainly a bug in your code that you might otherwise have wasted lots of time tracking down. 94 | 95 | Throws error on invalid usage of delete - The delete operator (used to remove properties from objects) cannot be used on non-configurable properties of the object. Non-strict code will fail silently when an attempt is made to delete a non-configurable property, whereas strict mode will throw an error in such a case. 96 | 97 | 98 | */ 99 | 100 | ``` 101 | 102 | ## 103 | 104 | **Question 6** 105 | 106 | Consider the two functions below. Will they both return the same thing? Why or why not? 107 | 108 | ```js 109 | 110 | function foo1() 111 | { 112 | return { 113 | bar: "hello" 114 | }; 115 | } 116 | 117 | function foo2() 118 | { 119 | return 120 | { 121 | bar: "hello" 122 | }; 123 | } 124 | 125 | ``` 126 | 127 | [JS BIN](https://jsbin.com/tajimor/1/edit?js,console) 128 | 129 | ## 130 | 131 | **Question 7** 132 | 133 | What is NaN? What is its type? How can you reliably test if a value is equal to NaN? 134 | 135 | ```js 136 | 137 | /* 138 | 139 | The NaN property represents a value that is “not a number”. This special value results from an operation that could not be performed either because one of the operands was non-numeric (e.g., "abc" / 4), or because the result of the operation is non-numeric. 140 | 141 | While this seems straightforward enough, there are a couple of somewhat surprising characteristics of NaN that can result in hair-pulling bugs if one is not aware of them. 142 | 143 | For one thing, although NaN means “not a number”, its type is, believe it or not, Number: 144 | 145 | */ 146 | 147 | console.log(typeof NaN === "number"); // logs "true" 148 | 149 | /* 150 | 151 | Additionally, NaN compared to anything – even itself! – is false: 152 | 153 | */ 154 | 155 | console.log(NaN === NaN); // logs "false" 156 | 157 | /* 158 | 159 | A semi-reliable way to test whether a number is equal to NaN is with the built-in function isNaN(), but even using isNaN() is an imperfect solution. 160 | 161 | A better solution would either be to use value !== value, which would only produce true if the value is equal to NaN. Also, ES6 offers a new Number.isNaN() function, which is a different and more reliable than the old global isNaN() function. 162 | 163 | */ 164 | 165 | 166 | ``` 167 | 168 | ## 169 | 170 | **Question 8** 171 | 172 | What will the code below output? Explain your answer. 173 | 174 | ```js 175 | 176 | console.log(0.1 + 0.2); 177 | console.log(0.1 + 0.2 == 0.3); 178 | 179 | ``` 180 | 181 | [JS BIN](https://jsbin.com/tepiguj/1/edit?js,console) 182 | 183 | ## 184 | 185 | **Question 9** 186 | 187 | In what order will the numbers 1-4 be logged to the console when the code below is executed? Why? 188 | 189 | ```js 190 | 191 | (function() { 192 | console.log(1); 193 | setTimeout(function(){console.log(2)}, 1000); 194 | setTimeout(function(){console.log(3)}, 0); 195 | console.log(4); 196 | })(); 197 | 198 | ``` 199 | 200 | [JS BIN](https://jsbin.com/boyuruw/1/edit?js,console) 201 | 202 | ## 203 | 204 | **Question 10** 205 | 206 | Write a simple function (less than 160 characters) that returns a boolean indicating whether or not a string is a palindrome. 207 | 208 | [JS BIN](https://jsbin.com/edit?js,console) 209 | 210 | ## 211 | 212 | **Question 11** 213 | 214 | Write a sum method which will work properly when invoked using either syntax below. 215 | 216 | ```js 217 | 218 | console.log(sum(2,3)); // Outputs 5 219 | console.log(sum(2)(3)); // Outputs 5 220 | 221 | ``` 222 | 223 | [JS BIN](https://jsbin.com/piwuvog/3/edit?js,console) 224 | 225 | ## 226 | 227 | **Question 12** 228 | 229 | Consider the following code snippet: 230 | 231 | ```js 232 | 233 | for (var i = 0; i < 5; i++) { 234 | var btn = document.createElement('button'); 235 | btn.appendChild(document.createTextNode('Button ' + i)); 236 | btn.addEventListener('click', function(){ console.log(i); }); 237 | document.body.appendChild(btn); 238 | } 239 | 240 | ``` 241 | 242 | (a) What gets logged to the console when the user clicks on “Button 4” and why? 243 | 244 | (b) Provide one or more alternate implementations that will work as expected. 245 | 246 | 247 | [JS BIN](https://jsbin.com/gupecin/1/edit?js,console) 248 | 249 | ## 250 | 251 | **Question 13** 252 | 253 | Assuming d is an “empty” object in scope, say: 254 | 255 | ```js 256 | var d = {}; 257 | 258 | ``` 259 | 260 | …what is accomplished using the following code? 261 | 262 | ```js 263 | [ 'zebra', 'horse' ].forEach(function(k) { 264 | d[k] = undefined; 265 | }); 266 | 267 | ``` 268 | 269 | ```js 270 | /* 271 | The snippet of code shown above sets two properties on the object d. Ideally, any lookup performed on a JavaScript object with an unset key evaluates to undefined. But running this code marks those properties as “own properties” of the object. 272 | 273 | This is a useful strategy for ensuring that an object has a given set of properties. Passing this object to Object.keys will return an array with those set keys as well (even if their values are undefined). 274 | 275 | */ 276 | 277 | ``` 278 | 279 | ## 280 | 281 | **Question 14** 282 | 283 | What will the code below output to the console and why? 284 | 285 | ```js 286 | var arr1 = "john".split(''); 287 | var arr2 = arr1.reverse(); 288 | var arr3 = "jones".split(''); 289 | arr2.push(arr3); 290 | console.log("array 1: length=" + arr1.length + " last=" + arr1.slice(-1)); 291 | console.log("array 2: length=" + arr2.length + " last=" + arr2.slice(-1)); 292 | 293 | ``` 294 | [JS BIN](https://jsbin.com/fejulit/edit?js,console) 295 | 296 | ## 297 | 298 | **Question 15** 299 | 300 | What will the code below output to the console and why ? 301 | 302 | ```js 303 | 304 | console.log(1 + "2" + "2"); 305 | console.log(1 + +"2" + "2"); 306 | console.log(1 + -"1" + "2"); 307 | console.log(+"1" + "1" + "2"); 308 | console.log( "A" - "B" + "2"); 309 | console.log( "A" - "B" + 2); 310 | 311 | ``` 312 | 313 | [JS BIN](https://jsbin.com/cucaqay/1/edit?js,console) 314 | 315 | ## 316 | 317 | **Question 16** 318 | 319 | What is a “closure” in JavaScript? Provide an example. 320 | 321 | ```js 322 | /* 323 | A closure is an inner function that has access to the variables in the outer (enclosing) function’s scope chain. The closure has access to variables in three scopes; specifically: (1) variable in its own scope, (2) variables in the enclosing function’s scope, and (3) global variables. 324 | 325 | */ 326 | 327 | ``` 328 | 329 | [JS BIN](https://jsbin.com/jadoxud/1/edit?js,console) 330 | 331 | ## 332 | 333 | **Question 17** 334 | 335 | What will be the output of the following code: 336 | 337 | ```js 338 | 339 | for (var i = 0; i < 5; i++) { 340 | setTimeout(function() { console.log(i); }, i * 1000 ); 341 | } 342 | 343 | ``` 344 | 345 | Explain your answer. How could the use of closures help here? 346 | 347 | [JS BIN](https://jsbin.com/kovezox/1/edit?js,console) 348 | 349 | 350 | ## 351 | 352 | **Question 18** 353 | 354 | What would the following lines of code output to the console? 355 | 356 | ```js 357 | 358 | console.log("0 || 1 = "+(0 || 1)); 359 | console.log("1 || 2 = "+(1 || 2)); 360 | console.log("0 && 1 = "+(0 && 1)); 361 | console.log("1 && 2 = "+(1 && 2)); 362 | 363 | ``` 364 | 365 | [JS BIN](https://jsbin.com/xanifer/1/edit?js,console) 366 | 367 | ## 368 | 369 | **Question 19** 370 | 371 | What will be the output when the following code is executed? Explain. 372 | 373 | ```js 374 | 375 | console.log(false == '0') 376 | console.log(false === '0') 377 | 378 | ``` 379 | 380 | ```js 381 | 382 | /* 383 | 384 | The code will output: 385 | 386 | console.log(false == '0') // true 387 | console.log(false === '0') // false 388 | 389 | In JavaScript, there are two sets of equality operators. The triple-equal operator === behaves like any traditional equality operator would: evaluates to true if the two expressions on either of its sides have the same type and the same value. The double-equal operator, however, tries to coerce the values before comparing them. It is therefore generally good practice to use the === rather than ==. The same holds true for !== vs !=. 390 | 391 | */ 392 | 393 | ``` 394 | 395 | ## 396 | 397 | **Question 20** 398 | 399 | What is the output out of the following code? Explain your answer. 400 | 401 | 402 | ```js 403 | 404 | var a={}, 405 | b={key:'b'}, 406 | c={key:'c'}; 407 | 408 | a[b]=123; 409 | a[c]=456; 410 | 411 | console.log(a[b]); 412 | 413 | ``` 414 | 415 | [JS BIN](https://jsbin.com/nanepic/2/edit?js,console) 416 | 417 | ## 418 | 419 | **Question 21** 420 | 421 | What will the following code output to the console: 422 | 423 | ```js 424 | 425 | console.log((function f(n){return ((n > 1) ? n * f(n-1) : n)})(10)); 426 | 427 | ``` 428 | 429 | Explain your answer. 430 | 431 | ```js 432 | 433 | /* 434 | 435 | The code will output the value of 10 factorial (i.e., 10!, or 3,628,800). 436 | 437 | Here’s why: 438 | 439 | The named function f() calls itself recursively, until it gets down to calling f(1) which simply returns 1. Here, therefore, is what this does: 440 | 441 | f(1): returns n, which is 1 442 | f(2): returns 2 * f(1), which is 2 443 | f(3): returns 3 * f(2), which is 6 444 | f(4): returns 4 * f(3), which is 24 445 | f(5): returns 5 * f(4), which is 120 446 | f(6): returns 6 * f(5), which is 720 447 | f(7): returns 7 * f(6), which is 5040 448 | f(8): returns 8 * f(7), which is 40320 449 | f(9): returns 9 * f(8), which is 362880 450 | f(10): returns 10 * f(9), which is 3628800 451 | 452 | 453 | */ 454 | ``` 455 | 456 | ## 457 | 458 | **Question 22** 459 | 460 | Consider the code snippet below. What will the console output be and why? 461 | 462 | ```js 463 | 464 | (function(x) { 465 | return (function(y) { 466 | console.log(x); 467 | })(2) 468 | })(1); 469 | 470 | ``` 471 | 472 | [JS BIN](https://jsbin.com/bilaguk/1/edit?js,console) 473 | 474 | ## 475 | 476 | **Question 23** 477 | 478 | What will the following code output to the console and why: 479 | 480 | ```js 481 | 482 | var hero = { 483 | _name: 'John Doe', 484 | getSecretIdentity: function (){ 485 | return this._name; 486 | } 487 | }; 488 | 489 | var stoleSecretIdentity = hero.getSecretIdentity; 490 | 491 | console.log(stoleSecretIdentity()); 492 | console.log(hero.getSecretIdentity()); 493 | 494 | ``` 495 | 496 | What is the issue with this code and how can it be fixed? 497 | 498 | [JS BIN](https://jsbin.com/maxepew/edit?js,console). 499 | 500 | ## 501 | 502 | **Question 24** 503 | 504 | Create a function that, given a DOM Element on the page, will visit the element itself and all of its descendents (not just its immediate children). For each element visited, the function should pass that element to a provided callback function. 505 | 506 | The arguments to the function should be: 507 | 508 | * a DOM element 509 | * a callback function (that takes a DOM element as its argument) 510 | 511 | [JS BIN](https://jsbin.com/yadakob/1/edit?js,console) 512 | 513 | ## 514 | 515 | **Question 25** 516 | 517 | Testing your this knowledge in JavaScript: What is the output of the following code? 518 | 519 | ```js 520 | 521 | var length = 10; 522 | function fn() { 523 | console.log(this.length); 524 | } 525 | 526 | var obj = { 527 | length: 5, 528 | method: function(fn) { 529 | fn(); 530 | arguments[0](); 531 | } 532 | }; 533 | 534 | obj.method(fn, 1); 535 | 536 | ``` 537 | 538 | [JS BIN](https://jsbin.com/paxutuz/edit?js,console) 539 | 540 | ## 541 | 542 | **Question 26** 543 | 544 | Consider the following code. What will the output be, and why? 545 | 546 | ```js 547 | 548 | (function () { 549 | try { 550 | throw new Error(); 551 | } catch (x) { 552 | var x = 1, y = 2; 553 | console.log(x); 554 | } 555 | console.log(x); 556 | console.log(y); 557 | })(); 558 | 559 | ``` 560 | 561 | [JS BIN](https://jsbin.com/zivavup/1/edit?js,console) 562 | 563 | ## 564 | 565 | **Question 27** 566 | 567 | What will be the output of this code? 568 | 569 | ```js 570 | 571 | var x = 21; 572 | var girl = function () { 573 | console.log(x); 574 | var x = 20; 575 | }; 576 | girl (); 577 | 578 | 579 | 580 | 581 | */ 582 | 583 | ``` 584 | 585 | 586 | ```js 587 | 588 | /* 589 | 590 | Neither 21, nor 20, the result is undefined 591 | 592 | It’s because JavaScript initialization is not hoisted. 593 | 594 | (Why doesn’t it show the global value of 21? The reason is that when the function is executed, it checks that there’s a local x variable present but doesn’t yet declare it, so it won’t look for global one.) 595 | 596 | */ 597 | 598 | ``` 599 | 600 | ## 601 | 602 | **Question 28** 603 | 604 | What will this code print? 605 | 606 | ```js 607 | 608 | for (let i = 0; i < 5; i++) { 609 | setTimeout(function() { console.log(i); }, i * 1000 ); 610 | } 611 | 612 | ``` 613 | 614 | ```It will print 0 1 2 3 4, because we use let instead of var here. The variable i is only seen in the for loop’s block scope.``` 615 | 616 | ## 617 | 618 | **Question 29** 619 | 620 | What do the following lines output, and why? 621 | 622 | ```js 623 | 624 | console.log(1 < 2 < 3); 625 | console.log(3 > 2 > 1); 626 | 627 | ``` 628 | 629 | ```js 630 | 631 | /* 632 | 633 | The first statement returns true which is as expected. 634 | 635 | The second returns false because of how the engine works regarding operator associativity for < and >. It compares left to right, so 3 > 2 > 1 JavaScript translates to true > 1. true has value 1, so it then compares 1 > 1, which is false. 636 | 637 | */ 638 | 639 | ``` 640 | 641 | ## 642 | 643 | **Question 30** 644 | 645 | Imagine you have this code: 646 | 647 | ```js 648 | 649 | var a = [1, 2, 3]; 650 | 651 | ``` 652 | 653 | a) Will this result in a crash? 654 | 655 | ```js 656 | 657 | a[10] = 99; 658 | 659 | ``` 660 | 661 | b) What will this output? 662 | 663 | ```js 664 | 665 | console.log(a[6]); 666 | 667 | ``` 668 | 669 | [JS BIN](https://jsbin.com/vonizof/1/edit?js,console) 670 | 671 | 672 | ## 673 | 674 | **Question 31** 675 | 676 | What is the value of typeof undefined == typeof NULL? 677 | 678 | ``` 679 | The expression will be evaluated to true, since NULL will be treated as any other undefined variable. 680 | 681 | Note: JavaScript is case-sensitive and here we are using NULL instead of null 682 | ``` 683 | 684 | ## 685 | 686 | **Question 32** 687 | 688 | What would following code return? 689 | 690 | ```js 691 | console.log(typeof typeof 1); 692 | ``` 693 | 694 | ``` typeof 1 will return "number" and typeof "number" will return string. ``` 695 | 696 | ## 697 | 698 | **Question 33** 699 | 700 | What will the following code output and why? 701 | 702 | ```js 703 | var b = 1; 704 | function outer(){ 705 | var b = 2 706 | function inner(){ 707 | b++; 708 | var b = 3; 709 | console.log(b) 710 | } 711 | inner(); 712 | } 713 | outer(); 714 | ``` 715 | 716 | [JS BIN](https://jsbin.com/cicojey/1/edit?js,console) 717 | 718 | 719 | **Question 34** 720 | 721 | What will be the output of the code below? 722 | 723 | ```js 724 | 725 | var y = 1; 726 | if (function f(){}) { 727 | y += typeof f; 728 | } 729 | console.log(y); 730 | 731 | 732 | ``` 733 | 734 | [JS BIN](https://jsbin.com/modoru/1/edit?js,console) 735 | 736 | 737 | **Question 35** 738 | 739 | What is the drawback of creating true private methods in JavaScript? 740 | 741 | ``` 742 | 743 | One of the drawbacks of creating true private methods in JavaScript is that they are very memory-inefficient, as a new copy of the method would be created for each instance. 744 | 745 | ``` 746 | 747 | [JS BIN](https://jsbin.com/fuciced/edit?js,console) 748 | 749 | 750 | **Question 36** 751 | 752 | Write a mul function which will produce the following outputs when invoked? 753 | 754 | ```js 755 | 756 | console.log(mul(2)(3)(4)); // output : 24 757 | console.log(mul(4)(3)(4)); // output : 48 758 | 759 | ``` 760 | 761 | 762 | [JS BIN](https://jsbin.com/yotadih/1/edit?js,console) 763 | 764 | 765 | **Question 37** 766 | 767 | What will be the output of the code below? 768 | 769 | ```js 770 | 771 | var bar = true; 772 | console.log(bar + 0); 773 | console.log(bar + "xyz"); 774 | console.log(bar + true); 775 | console.log(bar + false); 776 | 777 | ``` 778 | 779 | [JS BIN](https://jsbin.com/tojiyuv/1/edit?js,console) 780 | 781 | 782 | **Question 38** 783 | 784 | What is the difference between the function declarations below? 785 | 786 | ```js 787 | 788 | var foo = function(){ 789 | // Some code 790 | }; 791 | 792 | function bar(){ 793 | // Some code 794 | }; 795 | 796 | ``` 797 | 798 | *The main difference is the function foo is defined at run-time whereas function bar is defined at parse time. * 799 | 800 | 801 | **Question 39** 802 | 803 | What will be the output of code below? 804 | 805 | ```js 806 | var salary = "1000$"; 807 | 808 | (function () { 809 | console.log("Original salary was " + salary); 810 | 811 | var salary = "5000$"; 812 | 813 | console.log("My New Salary " + salary); 814 | })(); 815 | 816 | ``` 817 | 818 | [JS BIN](https://jsbin.com/sizeqes/1/edit?js,console) 819 | 820 | 821 | 822 | --------------------------------------------------------------------------------