diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..1edcd0d --- /dev/null +++ b/LICENSE @@ -0,0 +1,29 @@ +BSD 3-Clause License + +Copyright (c) 2017, Nishant Kumar +All rights reserved. + +Redistribution and use in source and binary forms, with or without +modification, are permitted provided that the following conditions are met: + +* Redistributions of source code must retain the above copyright notice, this + list of conditions and the following disclaimer. + +* Redistributions in binary form must reproduce the above copyright notice, + this list of conditions and the following disclaimer in the documentation + and/or other materials provided with the distribution. + +* Neither the name of the copyright holder nor the names of its + contributors may be used to endorse or promote products derived from + this software without specific prior written permission. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" +AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE +IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE +DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE +FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL +DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR +SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER +CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, +OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. diff --git a/Nishant_resume.js b/Nishant_resume.js deleted file mode 100644 index 50d65cc..0000000 --- a/Nishant_resume.js +++ /dev/null @@ -1,117 +0,0 @@ -/** - * The Curriculum vitae of Nishant Kumar - * - * Hi there, I am Nishant. I am UI Engineering Lead, JavaScript Engineer, - * Mozila Tech Contributor, CodeMentor Front-end Expert, Writer from India. - */ - -(function() { - 'use strict'; - - /* - About Me - */ - var me = { - name: 'Nishant Kumar', - job: 'UI Engineering Lead', - organization: 'Big Parser', - status: 'Not availble for Hire full time', - location: 'India', - experience: '5 years', - skills: { - 'scripting-language' :['javascript'] - 'frameworks': ['angular.js','backbone.js','sails.js'], - 'library' : ['jQuery'] - 'tools': ['Gulp', 'Grunt', 'bower','yoman','Git'], - 'testing': ['jasmine', 'protractor'], - 'backend': ['node.js', 'express.js'], - 'dataBase': ['mongoDb', 'SQL'], - 'uncategorized' : ['C','C#','HTML','CSS', 'HTML5','JSON'] - } - }; - - /* - Contact Details - */ - var me_contact = { - 'email' : 'nihantanu@gmail.com', - 'skypeId' : 'mfsi_nishantk', - 'linkedIn' :'http://in.linkedin.com/in/nishantkumar1' - 'gitHub' : 'github.com/nishant8BITS' - 'stackOverFlow' : 'http://stackoverflow.com/users/430803/nishant' - 'codementor': 'codementor.io/nihantanu' - } - - /* - Education - */ - var education = { - 'post-Graduate': { - 'college': 'Birla Institute of Technology and Science, Pilani', - 'Major' : 'Software System', - 'Year' :'2016' - }, - 'graduation' : { - 'college': 'ICFAI University, Dehradun', - 'Major' : 'Computer Science & Engineering', - 'Year' :'2011' - } - } - - /** - * Nice things people have said about me. - */ - - /** - * Nishant is a very smart and thoughtful person as an engineer. He truly cares - * about helping others and values the learning experience for young software - * engineers. He is very patient - a key trait as an engineer. Nishant will help - * guide you through problems and help you understand software engineering - * concepts. Hands down I would hire Nishant to be on a team that will not only - * help a business but help other engineers grow as well. - * -Gary Tsai, Software Engineer - */ - - /** - * Nishant is a quick learner and he has very deep understanding on UI stack. He - * also is a good mentor and help other to understand the technology stack. One - * good thing I observed while working with him is he always focus on insist on - * highest standard in his code/solution as well as idea. Keep it up. - * -Apurv Gupta (WDE II at Amazon) - */ - - /** - * Nishant is one of the best person I'm working with. Along with his strong - * technical understanding of how things work, he also keeps on motivating to team - * and helps them to participate effectively & maintaining their productivity to - * better work towards achieving a goal. He always prefers to have full stack - * knowledge of the product & leads a team with great enthusiasm. He can deliver - * end to end any product he is working on. - * -Yash Shah (SRE at Linkedin) - */ - - /** - * I have been working with Nishant since last one year on a cloud-based product, - * He is one of the vibrant contributor in the team and always been dedicated to - * his work. He has very good level of knowledge when it comes to overall front-end - * architecture solutions and specifically on frameworks like backbone & angular. - * -Mohiuddin Parekh ( Founder & CEO at Decojent) - */ - - /** - * I first met Nishant 3 months ago when I told him I was looking for help with - * AngularJS and asked him to mentor me. One of the first things I noticed was that - * he had a great learning attitude, because he told me that he was looking forward - * to learning from me, something I wasn’t expecting from a mentor! He is fun, - * sweet, generous and has a great sense of humor. We have quickly become friends - * and I think we have spent more time hanging out on Telegram (instant messaging) - * and Skype than we have coding. I had never written my own AngularJS directive - * before so I asked him if he could write one for me for an autocomplete feature. - * I was impressed with his work and because of it I was then able to write my own - * directives. We have spent a lot of time chatting and I think there is so much - * more he can do that I have not yet seen. I can see he also has a passion for - * startups. - * -Jenny Swift (Software Engineer) - */ - -})(); diff --git a/coding.md b/coding.md new file mode 100644 index 0000000..e299444 --- /dev/null +++ b/coding.md @@ -0,0 +1,1356 @@ + +# Coding Questions + +## Hoisting + +### 1. console.log(employeeId); + +1. Some Value +2. Undefined +3. Type Error +4. ReferenceError: employeeId is not defined + +Answer: 4) ReferenceError: employeeId is not defined + +### 2. What would be the output of following code? + +```javascript +console.log(employeeId); +var employeeId = '19000'; +``` + +1. Some Value +2. undefined +3. Type Error +4. ReferenceError: employeeId is not defined + +Answer: 2) undefined + +### 3. What would be the output of following code? + +```javascript +var employeeId = '1234abe'; +(function(){ + console.log(employeeId); + var employeeId = '122345'; +})(); +``` + +1. '122345' +2. undefined +3. Type Error +4. ReferenceError: employeeId is not defined + +Answer: 2) undefined + +### 4. What would be the output of following code? + +```javascript +var employeeId = '1234abe'; +(function() { + console.log(employeeId); + var employeeId = '122345'; + (function() { + var employeeId = 'abc1234'; + }()); +}()); +``` + +1. '122345' +2. undefined +3. '1234abe' +4. ReferenceError: employeeId is not defined + +Answer: 2) undefined + +### 5. What would be the output of following code? + +```javascript +(function() { + console.log(typeof displayFunc); + var displayFunc = function(){ + console.log("Hi I am inside displayFunc"); + } +}()); +``` + +1. undefined +2. function +3. 'Hi I am inside displayFunc' +4. ReferenceError: displayFunc is not defined + +Answer: 1) undefined + +### 6. What would be the output of following code? + +```javascript +var employeeId = 'abc123'; +function foo(){ + employeeId = '123bcd'; + return; +} +foo(); +console.log(employeeId); +``` + +1. undefined +2. '123bcd' +3. 'abc123' +4. ReferenceError: employeeId is not defined + +Answer: 2) '123bcd' + +### 7. What would be the output of following code? + +```javascript +var employeeId = 'abc123'; + +function foo() { + employeeId = '123bcd'; + return; + + function employeeId() {} +} +foo(); +console.log(employeeId); +``` + +1. undefined +2. '123bcd' +3. 'abc123' +4. ReferenceError: employeeId is not defined + +Answer: 3) 'abc123' + +### 8. What would be the output of following code? + +```javascript +var employeeId = 'abc123'; + +function foo() { + employeeId(); + return; + + function employeeId() { + console.log(typeof employeeId); + } +} +foo(); +``` + +1. undefined +2. function +3. string +4. ReferenceError: employeeId is not defined + +Answer: 2) 'function' + +### 9. What would be the output of following code? + +```javascript +function foo() { + employeeId(); + var product = 'Car'; + return; + + function employeeId() { + console.log(product); + } +} +foo(); +``` + +1. undefined +2. Type Error +3. 'Car' +4. ReferenceError: product is not defined + +Answer: 1) undefined + +### 10. What would be the output of following code? + +```javascript +(function foo() { + bar(); + + function bar() { + abc(); + console.log(typeof abc); + } + + function abc() { + console.log(typeof bar); + } +}()); +``` + +1. undefined undefined +2. Type Error +3. function function +4. ReferenceError: bar is not defined + +Answer: 3) function function + +## Object + +### 1. What would be the output of following code ? + +```javascript +(function() { + 'use strict'; + + var person = { + name: 'John' + }; + person.salary = '10000$'; + person['country'] = 'USA'; + + Object.defineProperty(person, 'phoneNo', { + value: '8888888888', + enumerable: true + }) + + console.log(Object.keys(person)); +})(); +``` +1. Type Error +2. undefined +3. ["name", "salary", "country", "phoneNo"] +4. ["name", "salary", "country"] + +Answer: 3) ["name", "salary", "country", "phoneNo"] + +### 2. What would be the output of following code ? + +```javascript +(function() { + 'use strict'; + + var person = { + name: 'John' + }; + person.salary = '10000$'; + person['country'] = 'USA'; + + Object.defineProperty(person, 'phoneNo', { + value: '8888888888', + enumerable: false + }) + + console.log(Object.keys(person)); +})(); +``` +1. Type Error +2. undefined +3. ["name", "salary", "country", "phoneNo"] +4. ["name", "salary", "country"] + +Answer: 4) ["name", "salary", "country"] + +### 3. What would be the output of following code ? + +```javascript +(function() { + var objA = { + foo: 'foo', + bar: 'bar' + }; + var objB = { + foo: 'foo', + bar: 'bar' + }; + console.log(objA == objB); + console.log(objA === objB); +}()); +``` +1. false true +2. false false +3. true false +4. true true + +Answer: 2) false false + +### 4. What would be the output of following code ? + +```javascript +(function() { + var objA = new Object({foo: "foo"}); + var objB = new Object({foo: "foo"}); + console.log(objA == objB); + console.log(objA === objB); +}()); +``` +1. false true +2. false false +3. true false +4. true true + +Answer: 2) false false + +### 5. What would be the output of following code ? + +```javascript +(function() { + var objA = Object.create({ + foo: 'foo' + }); + var objB = Object.create({ + foo: 'foo' + }); + console.log(objA == objB); + console.log(objA === objB); +}()); +``` +1. false true +2. false false +3. true false +4. true true + +Answer: 2) false false + +### 6. What would be the output of following code ? + +```javascript +(function() { + var objA = Object.create({ + foo: 'foo' + }); + var objB = Object.create(objA); + console.log(objA == objB); + console.log(objA === objB); +}()); +``` +1. false true +2. false false +3. true false +4. true true + +Answer: 2) false false + +### 7. What would be the output of following code ? + +```javascript +(function() { + var objA = Object.create({ + foo: 'foo' + }); + var objB = Object.create(objA); + console.log(objA.toString() == objB.toString()); + console.log(objA.toString() === objB.toString()); +}()); +``` +1. false true +2. false false +3. true false +4. true true + +Answer: 4) true true + +### 8. What would be the output of following code ? + +```javascript +(function() { + var objA = Object.create({ + foo: 'foo' + }); + var objB = objA; + console.log(objA == objB); + console.log(objA === objB); + console.log(objA.toString() == objB.toString()); + console.log(objA.toString() === objB.toString()); +}()); +``` +1. true true true false +2. true false true true +3. true true true true +4. true true false false + +Answer: 3) true true true true + +### 9. What would be the output of following code ? + +```javascript +(function() { + var objA = Object.create({ + foo: 'foo' + }); + var objB = objA; + objB.foo = 'bar'; + console.log(objA.foo); + console.log(objB.foo); +}()); +``` +1. foo bar +2. bar bar +3. foo foo +4. bar foo + +Answer: 2) bar bar + +### 10. What would be the output of following code ? + +```javascript +(function() { + var objA = Object.create({ + foo: 'foo' + }); + var objB = objA; + objB.foo = 'bar'; + + delete objA.foo; + console.log(objA.foo); + console.log(objB.foo); +}()); +``` +1. foo bar +2. bar bar +3. foo foo +4. bar foo + +Answer: 3) foo foo + +### 11. What would be the output of following code ? + +```javascript +(function() { + var objA = { + foo: 'foo' + }; + var objB = objA; + objB.foo = 'bar'; + + delete objA.foo; + console.log(objA.foo); + console.log(objB.foo); +}()); +``` +1. foo bar +2. undefined undefined +3. foo foo +4. undefined bar + +Answer: 2) undefined undefined + +## Array + +### 1. What would be the output of following code? + +```javascript +(function() { + var array = new Array('100'); + console.log(array); + console.log(array.length); +}()); +``` + +1. undefined undefined +2. [undefined × 100] 100 +3. ["100"] 1 +4. ReferenceError: array is not defined + +Answer: 3) ["100"] 1 + +### 2. What would be the output of following code? + +```javascript +(function() { + var array1 = []; + var array2 = new Array(100); + var array3 = new Array(['1',2,'3',4,5.6]); + console.log(array1); + console.log(array2); + console.log(array3); + console.log(array3.length); +}()); +``` + +1. [] [] [Array[5]] 1 +2. [] [undefined × 100] Array[5] 5 +3. [] [] ['1',2,'3',4,5.6] 5 +4. [] [] [Array[5]] 5 + +Answer: 1) [] [] [Array[5]] 1 + +### 3. What would be the output of following code? + +```javascript +(function () { + var array = new Array('a', 'b', 'c', 'd', 'e'); + array[10] = 'f'; + delete array[10]; + console.log(array.length); +}()); +``` + +1. 11 +2. 5 +3. 6 +4. undefined + +Answer: 1) 11 + +### 4. What would be the output of following code? + +```javascript +(function(){ + var animal = ['cow','horse']; + animal.push('cat'); + animal.push('dog','rat','goat'); + console.log(animal.length); +})(); +``` + +1. 4 +2. 5 +3. 6 +4. undefined + +Answer: 3) 6 + +### 5. What would be the output of following code? + +```javascript +(function(){ + var animal = ['cow','horse']; + animal.push('cat'); + animal.unshift('dog','rat','goat'); + console.log(animal); +})(); +``` + +1. [ 'dog', 'rat', 'goat', 'cow', 'horse', 'cat' ] +2. [ 'cow', 'horse', 'cat', 'dog', 'rat', 'goat' ] +3. Type Error +4. undefined + +Answer: 1) [ 'dog', 'rat', 'goat', 'cow', 'horse', 'cat' ] + +### 6. What would be the output of following code? + +```javascript +(function(){ + var array = [1,2,3,4,5]; + console.log(array.indexOf(2)); + console.log([{name: 'John'},{name : 'John'}].indexOf({name:'John'})); + console.log([[1],[2],[3],[4]].indexOf([3])); + console.log("abcdefgh".indexOf('e')); +})(); +``` + +1. 1 -1 -1 4 +2. 1 0 -1 4 +3. 1 -1 -1 -1 +4. 1 undefined -1 4 + +Answer: 1) 1 -1 -1 4 + +### 7. What would be the output of following code? + +```javascript +(function(){ + var array = [1,2,3,4,5,1,2,3,4,5,6]; + console.log(array.indexOf(2)); + console.log(array.indexOf(2,3)); + console.log(array.indexOf(2,10)); +})(); +``` + +1. 1 -1 -1 +2. 1 6 -1 +3. 1 1 -1 +4. 1 undefined undefined + +Answer: 2) 1 6 -1 + +### 8. What would be the output of following code? + +```javascript +(function(){ + var numbers = [2,3,4,8,9,11,13,12,16]; + var even = numbers.filter(function(element, index){ + return element % 2 === 0; + }); + console.log(even); + + var containsDivisibleby3 = numbers.some(function(element, index){ + return element % 3 === 0; + }); + + console.log(containsDivisibleby3); +})(); +``` + +1. [ 2, 4, 8, 12, 16 ] [ 0, 3, 0, 0, 9, 0, 12] +2. [ 2, 4, 8, 12, 16 ] [ 3, 9, 12] +3. [ 2, 4, 8, 12, 16 ] true +4. [ 2, 4, 8, 12, 16 ] false + +Answer: 3) [ 2, 4, 8, 12, 16 ] true + +### 9. What would be the output of following code? + +```javascript +(function(){ + var containers = [2,0,false,"", '12', true]; + var containers = containers.filter(Boolean); + console.log(containers); + var containers = containers.filter(Number); + console.log(containers); + var containers = containers.filter(String); + console.log(containers); + var containers = containers.filter(Object); + console.log(containers); +})(); +``` + +1. [ 2, '12', true ] + [ 2, '12', true ] + [ 2, '12', true ] + [ 2, '12', true ] +2. [false, true] + [ 2 ] + ['12'] + [ ] +3. [2,0,false,"", '12', true] + [2,0,false,"", '12', true] + [2,0,false,"", '12', true] + [2,0,false,"", '12', true] +4. [ 2, '12', true ] + [ 2, '12', true, false ] + [ 2, '12', true,false ] + [ 2, '12', true,false] + + +Answer: 1) [ 2, '12', true ] + [ 2, '12', true ] + [ 2, '12', true ] + [ 2, '12', true ] + +### 10. What would be the output of following code? + +```javascript +(function(){ + var list = ['foo','bar','john','ritz']; + console.log(list.slice(1)); + console.log(list.slice(1,3)); + console.log(list.slice()); + console.log(list.slice(2,2)); + console.log(list); +})(); +``` + +1. [ 'bar', 'john', 'ritz' ] + [ 'bar', 'john' ] + [ 'foo', 'bar', 'john', 'ritz' ] + [] + [ 'foo', 'bar', 'john', 'ritz' ] +2. [ 'bar', 'john', 'ritz' ] + [ 'bar', 'john','ritz ] + [ 'foo', 'bar', 'john', 'ritz' ] + [] + [ 'foo', 'bar', 'john', 'ritz' ] +3. [ 'john', 'ritz' ] + [ 'bar', 'john' ] + [ 'foo', 'bar', 'john', 'ritz' ] + [] + [ 'foo', 'bar', 'john', 'ritz' ] +4. [ 'foo' ] + [ 'bar', 'john' ] + [ 'foo', 'bar', 'john', 'ritz' ] + [] + [ 'foo', 'bar', 'john', 'ritz' ] + +Answer: 1) [ 'bar', 'john', 'ritz' ] + [ 'bar', 'john' ] + [ 'foo', 'bar', 'john', 'ritz' ] + [] + [ 'foo', 'bar', 'john', 'ritz' ] + +### 11. What would be the output of following code? + +```javascript +(function(){ + var list = ['foo','bar','john']; + console.log(list.splice(1)); + console.log(list.splice(1,2)); + console.log(list); +})(); +``` + +1. [ 'bar', 'john' ] [] [ 'foo' ] +2. [ 'bar', 'john' ] [] [ 'bar', 'john' ] +3. [ 'bar', 'john' ] [ 'bar', 'john' ] [ 'bar', 'john' ] +4. [ 'bar', 'john' ] [] [] + +Answer: 1. [ 'bar', 'john' ] [] [ 'foo' ] + +### 12. What would be the output of following code? + +```javascript +(function(){ + var arrayNumb = [2, 8, 15, 16, 23, 42]; + arrayNumb.sort(); + console.log(arrayNumb); +})(); +``` + +1. [2, 8, 15, 16, 23, 42] +2. [42, 23, 26, 15, 8, 2] +3. [ 15, 16, 2, 23, 42, 8 ] +4. [ 2, 8, 15, 16, 23, 42 ] + +Answer: 3. [ 15, 16, 2, 23, 42, 8 ] + +## Function: + +### 1. What would be the output of following code ? + +```javascript +function funcA(){ + console.log("funcA ", this); + (function innerFuncA1(){ + console.log("innerFunc1", this); + (function innerFunA11(){ + console.log("innerFunA11", this); + })(); + })(); +} + +console.log(funcA()); +``` + +1. funcA Window {...} + innerFunc1 Window {...} + innerFunA11 Window {...} +2. undefined +3. Type Error +4. ReferenceError: this is not defined + +Answer: 1) + +### 2. What would be the output of following code ? + +```javascript +var obj = { + message: "Hello", + innerMessage: !(function() { + console.log(this.message); + })() +}; + +console.log(obj.innerMessage); +``` + +1. ReferenceError: this.message is not defined +2. undefined +3. Type Error +4. undefined true + +Answer: 4) undefined true + +### 3. What would the output of following code ? + +```javascript +var obj = { + message: "Hello", + innerMessage: function() { + console.log(this.message); + } +}; + +console.log(obj.innerMessage()); +``` + +1. Hello +2. undefined +3. Type Error +4. ReferenceError: this.message is not defined + +Answer: 1) Hello + +### 4. What would the output of following code ? + +```javascript +var obj = { + message: 'Hello', + innerMessage: function () { + (function () { + console.log(this.message); + }()); + } +}; +console.log(obj.innerMessage()); +``` + +1. Type Error +2. Hello +3. undefined +4. ReferenceError: this.message is not defined + +Answer: 3) undefined + +### 5. What would the output of following code ? + +```javascript +var obj = { + message: 'Hello', + innerMessage: function () { + var self = this; + (function () { + console.log(self.message); + }()); + } +}; +console.log(obj.innerMessage()); +``` + +1. Type Error +2. 'Hello' +3. undefined +4. ReferenceError: self.message is not defined + +Answer: 2) 'Hello' + +### 6. What would the output of following code ? + +```javascript +function myFunc(){ + console.log(this.message); +} +myFunc.message = "Hi John"; + +console.log(myFunc()); +``` + +1. Type Error +2. 'Hi John' +3. undefined +4. ReferenceError: this.message is not defined + +Answer: 3) undefined + +### 7. What would the output of following code ? + +```javascript +function myFunc(){ + console.log(myFunc.message); +} +myFunc.message = "Hi John"; + +console.log(myFunc()); +``` + +1. Type Error +2. 'Hi John' +3. undefined +4. ReferenceError: this.message is not defined + +Answer: 2) 'Hi John' + +### 8. What would the output of following code ? + +```javascript +function myFunc() { + myFunc.message = 'Hi John'; + console.log(myFunc.message); +} +console.log(myFunc()); +``` + +1. Type Error +2. 'Hi John' +3. undefined +4. ReferenceError: this.message is not defined + +Answer: 2) 'Hi John' + +### 9. What would the output of following code ? + +```javascript +function myFunc(param1,param2) { + console.log(myFunc.length); +} +console.log(myFunc()); +console.log(myFunc("a","b")); +console.log(myFunc("a","b","c","d")); +``` + +1. 2 2 2 +2. 0 2 4 +3. undefined +4. ReferenceError + +Answer: a) 2 2 2 + +### 10. What would the output of following code ? + +```javascript +function myFunc() { + console.log(arguments.length); +} +console.log(myFunc()); +console.log(myFunc("a","b")); +console.log(myFunc("a","b","c","d")); +``` + +1. 2 2 2 +2. 0 2 4 +3. undefined +4. ReferenceError + +Answer: 2) 0 2 4 + +## Object Oriented + +### 1. What would the output of following code ? + +```javascript +function Person(name, age){ + this.name = name || "John"; + this.age = age || 24; + this.displayName = function(){ + console.log(this.name); + } +} + +Person.name = "John"; +Person.displayName = function(){ + console.log(this.name); +} + +var person1 = new Person('John'); + person1.displayName(); + Person.displayName(); +``` + +1. John Person +2. John John +3. John undefined +4. John John + +Answer: 1) John Person + +## Scopes + +### 1. What would the output of following code ? + +```javascript +function passWordMngr() { + var password = '12345678'; + this.userName = 'John'; + return { + pwd: password + }; +} +// Block End +var userInfo = passWordMngr(); +console.log(userInfo.pwd); +console.log(userInfo.userName); +``` + +1. 12345678 Window +2. 12345678 John +3. 12345678 undefined +4. undefined undefined + +Answer: 3) 12345678 undefined + +### 2. What would the output of following code ? + +```javascript +var employeeId = 'aq123'; +function Employee() { + this.employeeId = 'bq1uy'; +} +console.log(Employee.employeeId); +``` + +1. Reference Error +2. aq123 +3. bq1uy +4. undefined + +Answer: 4) undefined + +### 3. What would the output of following code ? + +```javascript +var employeeId = 'aq123'; + +function Employee() { + this.employeeId = 'bq1uy'; +} +console.log(new Employee().employeeId); +Employee.prototype.employeeId = 'kj182'; +Employee.prototype.JobId = '1BJKSJ'; +console.log(new Employee().JobId); +console.log(new Employee().employeeId); +``` + +1. bq1uy 1BJKSJ bq1uy undefined +2. bq1uy 1BJKSJ bq1uy +3. bq1uy 1BJKSJ kj182 +4. undefined 1BJKSJ kj182 + +Answer: 2) bq1uy 1BJKSJ bq1uy + +### 4. What would the output of following code ? + +```javascript +var employeeId = 'aq123'; +(function Employee() { + try { + throw 'foo123'; + } catch (employeeId) { + console.log(employeeId); + } + console.log(employeeId); +}()); +``` + +1. foo123 aq123 +2. foo123 foo123 +3. aq123 aq123 +4. foo123 undefined + +Answer: 1) foo123 aq123 + +## Call, Apply, Bind + +### 1. What would the output of following code ? + +```javascript +(function() { + var greet = 'Hello World'; + var toGreet = [].filter.call(greet, function(element, index) { + return index > 5; + }); + console.log(toGreet); +}()); +``` + +1. Hello World +2. undefined +3. World +4. [ 'W', 'o', 'r', 'l', 'd' ] + +Answer: 4) [ 'W', 'o', 'r', 'l', 'd' ] + +### 2. What would the output of following code ? + +```javascript +(function() { + var fooAccount = { + name: 'John', + amount: 4000, + deductAmount: function(amount) { + this.amount -= amount; + return 'Total amount left in account: ' + this.amount; + } + }; + var barAccount = { + name: 'John', + amount: 6000 + }; + var withdrawAmountBy = function(totalAmount) { + return fooAccount.deductAmount.bind(barAccount, totalAmount); + }; + console.log(withdrawAmountBy(400)()); + console.log(withdrawAmountBy(300)()); +}()); +``` + +1. Total amount left in account: 5600 Total amount left in account: 5300 +2. undefined undefined +3. Total amount left in account: 3600 Total amount left in account: 3300 +4. Total amount left in account: 5600 Total amount left in account: 5600 + +Answer: 1) Total amount left in account: 5600 Total amount left in account: 5300 + +### 3. What would the output of following code ? + +```javascript +(function() { + var fooAccount = { + name: 'John', + amount: 4000, + deductAmount: function(amount) { + this.amount -= amount; + return this.amount; + } + }; + var barAccount = { + name: 'John', + amount: 6000 + }; + var withdrawAmountBy = function(totalAmount) { + return fooAccount.deductAmount.apply(barAccount, [totalAmount]); + }; + console.log(withdrawAmountBy(400)); + console.log(withdrawAmountBy(300)); + console.log(withdrawAmountBy(200)); +}()); +``` + +1. 5600 5300 5100 +2. 3600 3300 3100 +3. 5600 3300 5100 +4. undefined undefined undefined + +Answer: 1) 5600 5300 5100 + +### 4. What would the output of following code ? + +```javascript +(function() { + var fooAccount = { + name: 'John', + amount: 6000, + deductAmount: function(amount) { + this.amount -= amount; + return this.amount; + } + }; + var barAccount = { + name: 'John', + amount: 4000 + }; + var withdrawAmountBy = function(totalAmount) { + return fooAccount.deductAmount.call(barAccount, totalAmount); + }; + console.log(withdrawAmountBy(400)); + console.log(withdrawAmountBy(300)); + console.log(withdrawAmountBy(200)); +}()); +``` + +1. 5600 5300 5100 +2. 3600 3300 3100 +3. 5600 3300 5100 +4. undefined undefined undefined + +Answer: 2) 3600 3300 3100 + +### 5. What would the output of following code ? + +```javascript +(function greetNewCustomer() { + console.log('Hello ' + this.name); +}.bind({ + name: 'John' +})()); +``` + +1. Hello John +2. Reference Error +3. Window +4. undefined + +Answer: 1) Hello John + +### 6. Suggest your question! + +## Callback Function + +### 1. What would the output of following code ? + +```javascript +function getDataFromServer(apiUrl){ + var name = "John"; + return { + then : function(fn){ + fn(name); + } + } +} + +getDataFromServer('www.google.com').then(function(name){ + console.log(name); +}); + +``` + +1. John +2. undefined +3. Reference Error +4. fn is not defined + +Answer: 1) John + +### 2. What would the output of following code ? + +```javascript +(function(){ + var arrayNumb = [2, 8, 15, 16, 23, 42]; + Array.prototype.sort = function(a,b){ + return a - b; + }; + arrayNumb.sort(); + console.log(arrayNumb); +})(); + +(function(){ + var numberArray = [2, 8, 15, 16, 23, 42]; + numberArray.sort(function(a,b){ + if(a == b){ + return 0; + }else{ + return a < b ? -1 : 1; + } + }); + console.log(numberArray); +})(); + +(function(){ + var numberArray = [2, 8, 15, 16, 23, 42]; + numberArray.sort(function(a,b){ + return a-b; + }); + console.log(numberArray); +})(); +``` + +1. [ 2, 8, 15, 16, 23, 42 ] + [ 2, 8, 15, 16, 23, 42 ] + [ 2, 8, 15, 16, 23, 42 ] +2. undefined undefined undefined +3. [42, 23, 16, 15, 8, 2] + [42, 23, 16, 15, 8, 2] + [42, 23, 16, 15, 8, 2] +4. Reference Error + +Answer: 1) [ 2, 8, 15, 16, 23, 42 ] + [ 2, 8, 15, 16, 23, 42 ] + [ 2, 8, 15, 16, 23, 42 ] + + + +## Return Statement + +### 1. What would the output of following code ? + +```javascript +(function(){ + function sayHello(){ + var name = "Hi John"; + return + { + fullName: name + } + } + console.log(sayHello().fullName); +})(); +``` + +1. Hi John +2. undefined +3. Reference Error +4. Uncaught TypeError: Cannot read property 'fullName' of undefined + +Answer: 4) Uncaught TypeError: Cannot read property 'fullName' of undefined + +### 2. What would the output of following code ? + +```javascript +function getNumber(){ + return (2,4,5); +} + +var numb = getNumber(); +console.log(numb); +``` + +1. 5 +2. undefined +3. 2 +4. (2,4,5) + +Answer: 1) 5 + +### 3. What would the output of following code ? + +```javascript +function getNumber(){ + return; +} + +var numb = getNumber(); +console.log(numb); +``` + +1. null +2. undefined +3. "" +4. 0 + +Answer: 2) undefined + +### 4**. What would the output of following code ? + +```javascript +function mul(x){ + return function(y){ + return [x*y, function(z){ + return x*y + z; + }]; + } +} + +console.log(mul(2)(3)[0]); +console.log(mul(2)(3)[1](4)); +``` + +1. 6, 10 +2. undefined undefined +3. Reference Error +4. 10, 6 + +Answer: 1) 6, 10 + +### 5**. What would the output of following code ? + +```javascript +function mul(x) { + return function(y) { + return { + result: x * y, + sum: function(z) { + return x * y + z; + } + }; + }; +} +console.log(mul(2)(3).result); +console.log(mul(2)(3).sum(4)); +``` + +1. 6, 10 +2. undefined undefined +3. Reference Error +4. 10, 6 + +Answer: 1) 6, 10 + +### 6. What would the output of following code ? + +```javascript +function mul(x) { + return function(y) { + return function(z) { + return function(w) { + return function(p) { + return x * y * z * w * p; + }; + }; + }; + }; +} +console.log(mul(2)(3)(4)(5)(6)); +``` + +1. 720 +2. undefined +3. Reference Error +4. Type Error + +Answer: 1) 720 diff --git a/README.md b/trivia.md similarity index 57% rename from README.md rename to trivia.md index fd68472..10c9aa5 100644 --- a/README.md +++ b/trivia.md @@ -1,19 +1,23 @@ ![](coverPage.png) -## This Book will be completed by June 1 2016 and available to buy. If you want me to sent early copy of this book then please add your name and email address in google form here [Google Form](http://goo.gl/forms/QSpxVtvsNb). +# 123-JavaScript-Interview-Questions -[![Join the chat at https://gitter.im/nishant8BITS/123-Essential-JavaScript-Interview-Question](https://badges.gitter.im/nishant8BITS/123-Essential-JavaScript-Interview-Question.svg)](https://gitter.im/nishant8BITS/123-Essential-JavaScript-Interview-Question?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) +This Book will be completed by September 2018 and available to buy. If you want me to sent early copy of this book then please add your name and email address in google form here [Google Form](https://goo.gl/forms/c8ubV1tWBBdz6fJP2). -## Have question for me ? -[Ask me @nishant kumar](http://www.canumeet.com/nishantk/javascript-interview-query-discussion) -# 123-JavaScript-Interview-Question -## 1. Difference between `undefined` and `not defined` in JavaScript -> In JavaScript if you try to use a variable that doesn't exist and has not been declared, then JavaScript will throw an error `var name is not defined` and the script will stop execute thereafter. But If you use `typeof undeclared_variable` then it will return `undefined`. +## Great news! + +Yuri Katkov from [Flashcards.js](http://flashcardsjs.com) became a co-author and the rights holder of the book. He will improve the questions and add some more from his collections of flashcards and will make sure to produce an unbeatable guide for frontend inteviews. + +## Question 1. What's the difference between `undefined` and `not defined` in JavaScript + +### Answer + +In JavaScript if you try to use a variable that doesn't exist and has not been declared, then JavaScript will throw an error `var name is not defined` and the script will stop execute thereafter. But If you use `typeof undeclared_variable` then it will return `undefined`. Before starting further discussion let's understand the difference between declaration and definition. -`var x` is a declaration because you are not defining what value it holds yet, but you are declaring its existence and the need of memory allocation. +`var x` is a declaration because you are not defining what value it holds yet, but you are declaring its existence and the need for memory allocation. ```javascript var x; // declaring x @@ -22,14 +26,14 @@ console.log(x); //output: undefined `var x = 1` is both declaration and definition (also we can say we are doing initialisation), Here declaration and assignment of value happen inline for variable x, In JavaScript every variable declaration and function declaration brings to the top of its current scope in which it's declared then assignment happen in order this term is called `hoisting`. -> A variable that is declared but not define and when we try to access it, It will result `undefined`. +A variable can be declared but not defined. When we try to access it, It will result `undefined`. ```javascript var x; // Declaration if(typeof x === 'undefined') // Will return true ``` -> A variable that neither declared nor defined when we try to reference such variable then It result `not defined`. +A variable can be neither declared nor defined. When we try to reference such variable then the result will be `not defined`. ```javascript console.log(y); // Output: ReferenceError: y is not defined @@ -38,10 +42,8 @@ console.log(y); // Output: ReferenceError: y is not defined ### Ref Link: [http://stackoverflow.com/questions/20822022/javascript-variable-definition-declaration](http://stackoverflow.com/questions/20822022/javascript-variable-definition-declaration) -## Have doubt in this question ?? -[Schedule time to discuss with me @nishantk](http://www.canumeet.com/nishantk/javascript-interview-query-discussion) -## 2. What will be the output of the following code? +## Question 2. What will be the output of the following code? ```javascript var y = 1; @@ -50,75 +52,67 @@ if (function f() {}) { } console.log(y); ``` +### Answer -> Above code would give output `1undefined`. If condition statement evaluate using `eval` so `eval(function f() {})` which return `function f() {}` which is true so inside if statement code execute. `typeof f` return undefined because if statement code execute at run time, so statement inside `if` condition evaluated at run time. +The code above would give the output `1undefined`. inside `if` statement we have `function f(){}`. Here's it's a function expression, not function statement, which is why f is not a variable. +As a reminder, function expression is something like this: ```javascript -var k = 1; -if (1) { - eval(function foo() {}); - k += typeof foo; -} -console.log(k); +var myFunc1 = new function() {} +var myFunc2 = new function whatever() {} // whatever is not a variable here ``` -Above code will also output `1undefined`. - +A function statement is something like this: ```javascript -var k = 1; -if (1) { - function foo() {}; - k += typeof foo; -} -console.log(k); // output 1function +function myFunc3() {} ``` +You can read about [function expressions](https://developer.mozilla.org/en-US/docs/web/JavaScript/Reference/Operators/function) and [function statements](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function) on MDN. -## Have doubt in this question ?? -[Schedule 15 min discussion with me for free @nishantk](http://www.canumeet.com/nishantk/javascript-interview-query-discussion) +## Question 3. What is the drawback of having private methods in a JavaScript object? -## 3. What is the drawback of creating true private in JavaScript? -> One of the drawback of creating a true private method in JavaScript is that they are very memory inefficient because a new copy of the method would be created for each instance. +### Answer + +One of the drawback of creating a private method in JavaScript is that they are very memory inefficient because a new copy of the method would be created for each instance. ```javascript var Employee = function (name, company, salary) { - this.name = name || ""; //Public attribute default value is null - this.company = company || ""; //Public attribute default value is null - this.salary = salary || 5000; //Public attribute default value is null + this.name = name || ""; + this.company = company || ""; + this.salary = salary || 5000; // Private method - var increaseSlary = function () { + var increaseSalary = function () { this.salary = this.salary + 1000; }; - // Public method - this.dispalyIncreasedSalary = function() { - increaseSlary(); - console.log(this.salary); - }; }; -// Create Employee class object +// adding the method to Employee's prototype +Employee.prototype.displayIncreasedSalary = function() { + increaseSalary(); + console.log(this.salary); +}; + +// Creating three Employee objects var emp1 = new Employee("John","Pluto",3000); -// Create Employee class object var emp2 = new Employee("Merry","Pluto",2000); -// Create Employee class object var emp3 = new Employee("Ren","Pluto",2500); ``` -Here each instance variable `emp1`, `emp2`, `emp3` has own copy of increaseSalary private method. +Here each instance variable `emp1`, `emp2`, `emp3` has own copy of increaseSalary private method. However the `displayIncreasedSalary` will only be added once to an object `Employee.prototype`. So as recommendation don't go for a private method unless it's necessary. -## Have doubt in this question ?? -[Schedule 15 min discussion with me for free @nishantk](http://www.canumeet.com/nishantk/javascript-interview-query-discussion) +## Question 4. What is “closure” in javascript? Can you provide an example? + +### Answer -## 4.What is “closure” in javascript? Provide an example? -> A closure is a function defined inside another function (called parent function) and has access to the variable which is declared and defined in parent function scope. +A closure is a function defined inside another function (called parent function) and has access to the variable which is declared and defined in parent function scope. -The closure has access to variable in three scopes: +The closure has access to the variable in three scopes: - Variable declared in his own scope - Variable declared in parent function scope -- Variable declared in global namespace +- Variable declared in the global namespace ```javascript var globalVar = "abc"; @@ -137,11 +131,13 @@ var globalVar = "abc"; "innerArg = " + innerArg + "\n" + "innerFuncVar = " + innerFuncVar + "\n" + "globalVar = " + globalVar); - } // end of scope innerFunction)(5); // Pass 5 as parameter -} // end of scope outerFunction )(7); // Pass 7 as parameter + // end of scope innerFunction + })(5); // Pass 5 as parameter +// end of scope outerFunction +})(7); // Pass 7 as parameter ``` -`innerFunction` is closure which is defined inside `outerFunction` and has access to all variable which is declared and defined in outerFunction scope. In addition to this function defined inside function as closure has access to variable which is declared in `global namespace`. +`innerFunction` is closure which is defined inside `outerFunction` and has access to all variable which is declared and defined in outerFunction scope. In addition to this function defined inside the function as closure has access to the variable which is declared in `global namespace`. Output of above code would be: @@ -153,17 +149,15 @@ innerFuncVar = y globalVar = abc ``` -## Have doubt in this question ?? -[Schedule 15 min discussion with me for free @nishantk](http://www.canumeet.com/nishantk/javascript-interview-query-discussion) - -## 5. Write a mul function which will properly when invoked as below syntax. +## Question 5. Write a mul function which will properly when invoked as below syntax. ```javascript console.log(mul(2)(3)(4)); // output : 24 console.log(mul(4)(3)(4)); // output : 48 ``` +### Answer -> Below is code followed by an explanation how it works: +Below is the code followed by the explanation of how it works: ```javascript function mul (x) { @@ -175,33 +169,35 @@ function mul (x) { } ``` -Here `mul` function accept the first argument and return anonymous function which take the second parameter and return anonymous function which take the third parameter and return multiplication of arguments which is being passed in successive +Here the `mul` function accepts the first argument and returns the anonymous function which takes the second parameter and returns the anonymous function which takes the third parameter and returns the multiplication of arguments which is being passed in successive -In Javascript function defined inside has access to outer function variable and function is the first class object so it can be returned by function as well and passed as argument in another function. +In Javascript function defined inside has access to outer function variable and function is the first class object so it can be returned by the function as well and passed as an argument in another function. - A function is an instance of the Object type - A function can have properties and has a link back to its constructor method -- Function can be stored as variable -- Function can be pass as a parameter to another function -- Function can be returned from function +- A function can be stored as variable +- A function can be pass as a parameter to another function +- A function can be returned from another function -### 6. How to empty an array in JavaScript? +## Question 6. How to empty an array in JavaScript? For instance: ```javascript var arrayList = ['a', 'b', 'c', 'd', 'e', 'f']; ``` -How can we empty above array? +How can we empty the array above? -> There are a couple of ways by which we can empty an array, So let's discuss all the possible way by which we can empty an array. +### Answer -### Method 1 +There are a couple of ways by which we can empty an array, So let's discuss all the possible way by which we can empty an array. + +#### Method 1 ```javascript arrayList = []; ``` -Above code will set the variable `arrayList` to a new empty array. This is recommended if you don't have **references to the original array** `arrayList` anywhere else because It will actually create a new empty array. You should be careful with this way of empty the array, because if you have referenced this array from another variable, then the original reference array will remain unchanged, Only use this way if you have only referenced the array by its original variable `arrayList`. +The code above will set the variable `arrayList` to a new empty array. This is recommended if you don't have **references to the original array** `arrayList` anywhere else because It will actually create a new empty array. You should be careful with this way of empty the array, because if you have referenced this array from another variable, then the original reference array will remain unchanged, Only use this way if you have only referenced the array by its original variable `arrayList`. For Instance: @@ -212,13 +208,13 @@ arrayList = []; // Empty the array console.log(anotherArrayList); // Output ['a', 'b', 'c', 'd', 'e', 'f'] ``` -### Method 2 +#### Method 2 ```javascript arrayList.length = 0; ``` -Above code will clear the existing array by setting its length to 0. This way of empty the array also update all the reference variable which pointing to the original array. This way of empty the array is useful when you want to update all the another reference variable which pointing to `arrayList`. +The code above will clear the existing array by setting its length to 0. This way of emptying an array will also update all the reference variables that point to the original array. For Instance: @@ -229,7 +225,7 @@ arrayList.length = 0; // Empty the array by setting length to 0 console.log(anotherArrayList); // Output [] ``` -### Method 3 +#### Method 3 ```javascript arrayList.splice(0, arrayList.length); @@ -244,7 +240,7 @@ arrayList.splice(0, arrayList.length); // Empty the array by setting length to 0 console.log(anotherArrayList); // Output [] ``` -### Method 4 +#### Method 4 ```javascript while(arrayList.length) { @@ -254,17 +250,18 @@ while(arrayList.length) { Above implementation can also empty the array. But not recommended to use often. -## Have doubt in this question ?? -[Schedule 15 min discussion with me for free @nishantk](http://www.canumeet.com/nishantk/javascript-interview-query-discussion) -### 7. How to check if an object is an array or not? -> The best way to find whether an object is instance of a particular class or not using `toString` method from `Object.prototype` +## Question 7. How to check if an object is an array or not? + +### Answer + +The best way to find whether an object is instance of a particular class or not using `toString` method from `Object.prototype` ```javascript var arrayList = [1 , 2, 3]; ``` -One of the best use cases of type checking of an object is when we do method overloading in JavaScript. For understanding this let say we have a method called `greet` which take one single string and also a list of string, so making our `greet` method workable in both situation we need to know what kind of parameter is being passed, is it single value or list of value? +One of the best use cases of type checking of an object is when we do method overloading in JavaScript. To understand this, let's say we have a method called `greet` which can take a single string and also a list of strings. To make our `greet` method workable in both situation we need to know what kind of parameter is being passed: is it single value or list of values? ```javascript function greet(param) { @@ -276,7 +273,7 @@ function greet(param) { } ``` -However, in above implementation it might not necessary to check type for array, we can check for single value string and put array logic code in else block, let see below code for the same. +However, in the above implementation it might not necessary to check the type of the array, we can check for single value string and put array logic code in else block, let see below code for the same. ```javascript function greet(param) { @@ -288,9 +285,9 @@ However, in above implementation it might not necessary to check type for array, } ``` -Now it's fine we can go with above two implementations, but when we have a situation like a parameter can be `single value`, `array`, and `object` type then we will be in trouble. +Now it's fine we can go with the previous two implementations, but when we have a situation like a parameter can be `single value`, `array`, and `object` type then we will be in trouble. -Coming back to checking type of object, As we mentioned that we can use `Object.prototype.toString` +Coming back to checking the type of an object, As we mentioned that we can use `Object.prototype.toString` ```javascript if(Object.prototype.toString.call(arrayList) === '[object Array]') { @@ -318,10 +315,8 @@ Array.isArray(arrayList); `Array.isArray` is supported by Chrome 5, Firefox 4.0, IE 9, Opera 10.5 and Safari 5 -## Have doubt in this question ?? -[Schedule 15 min discussion with me for free @nishantk](http://www.canumeet.com/nishantk/javascript-interview-query-discussion) -#### 8. What will be the output of the following code? +## Question 8. What will be the output of the following code? ```javascript var output = (function(x) { @@ -332,12 +327,10 @@ var output = (function(x) { console.log(output); ``` -> Above code will output `0` as output. `delete` operator is used to delete a property from an object. Here `x` is not an object it's **local variable**. `delete` operator doesn't affect local variable. +> The code above will output `0` as output. `delete` operator is used to delete a property from an object. Here `x` is not an object it's **local variable**. `delete` operator doesn't affect local variable. -## Have doubt in this question ?? -[Schedule 15 min discussion with me for free @nishantk](http://www.canumeet.com/nishantk/javascript-interview-query-discussion) -#### 9. What will be the output of the following code? +## Question 9. What will be the output of the following code? ```javascript var x = 1; @@ -349,12 +342,10 @@ var output = (function() { console.log(output); ``` -> Above code will output `1` as output. `delete` operator is used to delete property from object. Here `x` is not an object it's **global variable** of type `number`. +> The code above will output `1` as output. `delete` operator is used to delete a property from an object. Here `x` is not an object it's **global variable** of type `number`. -## Have doubt in this question ?? -[Schedule 15 min discussion with me for free @nishantk](http://www.canumeet.com/nishantk/javascript-interview-query-discussion) -#### 10. What will be the output of the following code? +## Question 10. What will be the output of the following code? ```javascript var x = { foo : 1}; @@ -366,12 +357,10 @@ var output = (function() { console.log(output); ``` -> Above code will output `undefined` as output. `delete` operator is used to delete a property from an object. Here `x` is an object which has foo as a property and from self-invoking function we are deleting foo property of object `x` and after deletion we are trying to reference deleted property `foo` which result `undefined`. +> The code above will output `undefined` as output. `delete` operator is used to delete a property from an object. Here `x` is an object which has foo as a property and from a self-invoking function, we are deleting the `foo` property of object `x` and after deletion, we are trying to reference deleted property `foo` which result `undefined`. -## Have doubt in this question ?? -[Schedule 15 min discussion with me for free @nishantk](http://www.canumeet.com/nishantk/javascript-interview-query-discussion) -#### 11. What will be the output of the following code? +## Question 11. What will be the output of the following code? ```javascript var Employee = { @@ -382,14 +371,12 @@ delete emp1.company console.log(emp1.company); ``` -> Above code will output `xyz` as output. Here `emp1` object got company as **prototype** property. delete operator doesn't delete prototype property. +> The code above will output `xyz` as output. Here `emp1` object got company as **prototype** property. delete operator doesn't delete prototype property. `emp1` object doesn't have **company** as its own property. you can test it `console.log(emp1.hasOwnProperty('company')); //output : false` However, we can delete company property directly from `Employee` object using `delete Employee.company` or we can also delete from `emp1` object using `__proto__` property `delete emp1.__proto__.company`. -## Have doubt in this question ?? -[Schedule 15 min discussion with me for free @nishantk](http://www.canumeet.com/nishantk/javascript-interview-query-discussion) -#### 12. What is `undefined x 1` in JavaScript +## Question 12. What is `undefined x 1` in JavaScript ```javascript var trees = ["redwood", "bay", "cedar", "oak", "maple"]; @@ -398,12 +385,11 @@ delete trees[3]; when you run above code and do `console.log(trees);` in chrome developer console then you will get `["redwood", "bay", "cedar", undefined × 1, "maple"]` and when you run above code in Firefox browser console then you will get `["redwood", "bay", "cedar", undefined, "maple"]` so from these it's cleared that chrome has its own way of displaying uninitialized index in array. But when you check `trees[3] === undefined` in both of the browser you will get similar output as `true`. -**Note:** Please remember you need not check for uninitialized index of array in `trees[3] === 'undefined × 1'` it will give an error, Because `'undefined × 1'` this is just way of displaying uninitialized index of array in chrome. +**Note:** Please remember that you need not check for the uninitialized index of the array in `trees[3] === 'undefined × 1'` it will give an error because `'undefined × 1'` this is just way of displaying an uninitialized index of an array in chrome. + -## Have doubt in this question ?? -[Schedule 15 min discussion with me for free @nishantk](http://www.canumeet.com/nishantk/javascript-interview-query-discussion) -#### 13. What will be the output of the following code? +## Question 13. What will be the output of the following code? ```javascript var trees = ["xyz", "xxxx", "test", "ryan", "apple"]; @@ -411,14 +397,13 @@ delete trees[3]; console.log(trees.length); ``` -> Above code will output `5` as output. When we used `delete` operator for deleting an array element then, the array length is not affected from this. This holds even if you deleted all the element of array using `delete` operator. +> The code above will output `5` as output. When we used `delete` operator for deleting an array element then, the array length is not affected by this. This holds even if you deleted all elements of an array using `delete` operator. So when delete operator removes an array element that deleted element is not longer present in array. In place of value at deleted index `undefined x 1` in **chrome** and `undefined` is placed at the index. If you do `console.log(trees)` output `["xyz", "xxxx", "test", undefined × 1, "apple"]` in Chrome and in Firefox `["xyz", "xxxx", "test", undefined, "apple"]`. -## Have doubt in this question ?? -[Schedule 15 min discussion with me for free @nishantk](http://www.canumeet.com/nishantk/javascript-interview-query-discussion) -#### 14. What will be the output of the following code? + +## Question 14. What will be the output of the following code? ```javascript var bar = true; @@ -428,29 +413,32 @@ console.log(bar + true); console.log(bar + false); ``` -> Above code will output `1, "truexyz", 2, 1` as output. General guideline for addition of operator: +> The code above will output `1, "truexyz", 2, 1` as output. General guideline for addition of operator: - Number + Number -> Addition - Boolean + Number -> Addition - Number + String -> Concatenation - String + Boolean -> Concatenation - String + String -> Concatenation - -## Have doubt in this question ?? -[Schedule 15 min discussion with me for free @nishantk](http://www.canumeet.com/nishantk/javascript-interview-query-discussion) -#### 15. What will be the output of the following code? + +## Question 15. What will be the output of the following code? ```javascript var z = 1, y = z = typeof y; console.log(y); ``` -> Above code will output `undefined` as output. According to `associativity` rule operator with the same precedence are processed based on their associativity property of operator. Here associativity of the assignment operator is `Right to Left` so first `typeof y` will evaluate first which is `undefined` and assigned to `z` and then `y` would be assigned the value of z and then `z` would be assign value `1`. +> The code above will output string `"undefined"` as output. According to `associativity` rule operator with the same precedence are processed based on their associativity property of operator. Here associativity of the assignment operator is `Right to Left` so first `typeof y` will evaluate first which is string `"undefined"` and assigned to `z` and then `y` would be assigned the value of z. The overall sequence will look like that: -## Have doubt in this question ?? -[Schedule 15 min discussion with me for free @nishantk](http://www.canumeet.com/nishantk/javascript-interview-query-discussion) +```javascript +var z; +z = 1; +var y; +z = typeof y; +y = z; +``` -#### 16. What will be the output of the following code? +## Question 16. What will be the output of the following code? ```javascript // NFE (Named Function Expression @@ -458,7 +446,7 @@ var foo = function bar() { return 12; }; typeof bar(); ``` -> Above code will output `Reference Error` as output. For making above code work you can re-write above code as follow: +> The code above will output `Reference Error` as output. For making above code work you can re-write above code as follow: **Sample 1** @@ -488,11 +476,7 @@ var foo = function bar() { // bar is undefined here ``` -## Have doubt in this question ?? -[Schedule 15 min discussion with me for free @nishantk](http://www.canumeet.com/nishantk/javascript-interview-query-discussion) - - -#### 17. What is the difference between declaring a function in below format? +## Question 17. What is the difference between declaring a function in the formats listed below? ```javascript var foo = function() { @@ -560,7 +544,7 @@ if(testCondition) {// If testCondition is true then ``` -#### 18. what is function hoisting in JavaScript? +## Question 18. what is function hoisting in JavaScript? **Function Expression** ```javascript @@ -578,7 +562,7 @@ var foo = function foo() { }; ``` -Above code behind the scene look something like below code: +The code above behind the scene look something like below code: ```javascript var foo = undefined; @@ -596,7 +580,7 @@ foo = function foo() { foo(); // Now foo is defined here ``` -#### 19. What will be the output of the following code? +## Question 19. What will be the output of the following code? ```javascript var salary = "1000$"; @@ -610,7 +594,7 @@ var salary = "1000$"; })(); ``` -> Above code will output: `undefined, 5000$`. JavaScript has hoisting concept where newbie gets tricked. In above code, you might be expecting `salary` to retain it values from outer scope until the point that `salary` was re-declared in the inner scope. But due to `hoisting` salary value was `undefined` instead. To understand it better have a look of the following code, here `salary` variable is hoisted and declared at the top in function scope and while doing console.log it's result `undefined` and after that it's been redeclared and assigned `5000$`. +> The code above will output: `undefined, 5000$`. JavaScript has hoisting concept where newbie gets tricked. In above code, you might be expecting `salary` to retain it values from outer scope until the point that `salary` was re-declared in the inner scope. But due to `hoisting` salary value was `undefined` instead. To understand it better have a look of the following code, here `salary` variable is hoisted and declared at the top in function scope and while doing console.log it's result `undefined` and after that it's been redeclared and assigned `5000$`. ```javascript var salary = "1000$"; @@ -625,7 +609,7 @@ var salary = "1000$"; })(); ``` -#### 20. What is the `instanceof` operator in JavaScript? what would be the output of the following code? +## Question 20. What is the `instanceof` operator in JavaScript? what would be the output of the following code? ```javascript function foo() { @@ -673,7 +657,7 @@ So the `new foo() instanceof foo` return `false`; Ref Link: [http://stackoverflow.com/questions/2449254/what-is-the-instanceof-operator-in-javascript](http://stackoverflow.com/questions/2449254/what-is-the-instanceof-operator-in-javascript) -#### 21. If we have JavaScript associative array as below code: +## Question 21. If we have JavaScript associative array as below code: ```javascript var counterArray = { @@ -689,7 +673,7 @@ counterArray["C"] = 1; `Object` has `keys` method which can we used to calculate the length of object. ```javascript -Object.keys(counterArray).length; // Output 2 +Object.keys(counterArray).length; // Output 3 ``` We can also calculate length of object by iterating through the object and by doing a count of own property of object. @@ -708,11 +692,11 @@ function getSize(object) { > We can also add `length` method directly on `Object` see below code. ```javascript -Object.length = function() { +Object.size = function(obj) { var count = 0; - for(key in object) { + for(key in obj) { // hasOwnProperty method check own property of object - if(object.hasOwnProperty(key)) count++; + if(obj.hasOwnProperty(key)) count++; } return count; } @@ -722,8 +706,7 @@ console.log(Object.length(counterArray)); **Bonus**: We can also use `Underscore` (recommended, as it's lightweight) to calculate object length. -## Question 22 -### Difference between `Function`, `Method` and `Constructor` calls in JavaScript. +## Question 22. Difference between `Function`, `Method` and `Constructor` calls in JavaScript. If your are familiar with Object-oriented programming, More likely familiar to thinking of functions, methods, and class constructors as three separate things. But In JavaScript, these are just three different usage patterns of one single construct. functions : The simplest usages of function call: @@ -777,12 +760,8 @@ Unlike function calls and method calls, a constructor call `new Employee('John D The primary role of the constructor function is to initialize the object. -## Have doubt in this question ?? -[Schedule 15 min discussion with me for free @nishantk](http://www.canumeet.com/nishantk/javascript-interview-query-discussion) - -## Question 23 -### What would be the output of the following code? +## Question 23. What would be the output of the following code? ```javascript function User(name) { @@ -795,43 +774,33 @@ console.log(person); The output of above code would be `USA`. Here `new User("xyz")` creates a brand new object and created property `location` on that and `USA` has been assigned to object property location and that has been referenced by the person. -Let say `new User("xyz")` crated a object called `foo` and returned now `foo["location"]` would be assigned value as `USA` and `person` is referencing to `foo["location"]`. +Let say `new User("xyz")` created a object called `foo`. The value `"USA"` will be assigned to `foo["location"]`, but according to [ECMAScript Specification](http://www.ecma-international.org/ecma-262/6.0/#sec-assignment-operators-runtime-semantics-evaluation) , pt 12.14.4 the assignment will itself return the rightmost value: in our case it's `"USA"`. + Then it will be assigned to person. -## Question 24 -### Write a mul function which will output when invoked as below syntax. + To better understand what's going on here, try to execute this code in console, line by line: + ```javascript +function User(name) { + this.name = name || "JsGeeks"; +} + +var person; +var foo = User("xyz"); +foo["location"] = "USA"; +// the console will show you that the result of this is "USA" -```javascript -console.log(mul(2)(3)(4)); // output : 24 -console.log(mul(4)(3)(4)); // output : 48 ``` -Below is code followed by an explanation how it works: -```javascript -function mul (x) { - return function (y) { // anonymous function - return function (z) { // anonymous function - return x * y * z; - }; - }; -} -``` +## Question 24. What are Service Workers and when can you use them? -Here `mul` function accept the first argument and return anonymous function which take the second parameter and return anonymous function which take the third parameter and return multiplication of arguments which is being passed in successive. +It’s a technology that allows your web application to use cached resources first, and provide default experience offline, before getting more data from the network later. This principle is commonly known as Offline First. -In Javascript function defined inside has access to outer function variable and function is a first class object so it can be returned by a function as well and passed as the argument in another function. -- A function is an instance of the Object type -- A function can have properties and has a link back to its constructor method -- Function can be stored as variable -- Function can be pass as a parameter to another function -- Function can be returned from function +Service Workers actively use promises. A Service Worker has to be installed,activated and then it can react on fetch, push and sync events. -## Have doubt in this question ?? -[Schedule 15 min discussion with me for free @nishantk](http://www.canumeet.com/nishantk/javascript-interview-query-discussion) +As of 2017, Service Workers are not supported in IE and Safari. +## Question 25. What is the difference between a method and a function in javascript? -## Question 25 -### What is the difference between a method and a function in javascript? A function is a piece of code that is called by name and function itself not associated with any object and not defined inside any object. It can be passed data to operate on (i.e. parameter) and can optionally return data (the return value). ```javascript @@ -862,7 +831,7 @@ A function can be self-invoking anonymous function or named self-invoking functi In a case of named self-invoking anonymous function or anonymous self-invoking function, there is no need of call function explicitly. -A method is a piece of code that is called by name and that is associated with the object. In most respects it is identical to function call except for some key difference: +A method is a piece of code that is called by name and that is associated with the object. Methods are funtions. In most respects it is identical to function call except for some key difference: - It is implicitly passed for the object for which it was called. - It is able to operate on data that is contained within the class (remembering that an object is an instance of a class- the class is the definition, the object is an instance of that) - Method call is always associated with object @@ -881,12 +850,11 @@ methodObject.display(); Here methodObject is an object and display is a method which is associated with methodObject. -## Have doubt in this question ?? -[Schedule 15 min discussion with me for free @nishantk](http://www.canumeet.com/nishantk/javascript-interview-query-discussion) -## Question 26 -### What is JavaScript Self-Invoking anonymous function or Self-Executing anonymous function. + + +## Question 26. What is JavaScript Self-Invoking anonymous function or Self-Executing anonymous function. A `self-invoking` anonymous function also called `self-executing anonymous function` runs immediately or automatically when we define it and self-invoking anonymous function doesn't have any name at all. Self-Invoking anonymous function syntax: ```javascript @@ -917,12 +885,11 @@ function testCallBack(callback) { } testCallBack(display); // Here display function is being passed as callback ``` -## Have doubt in this question ?? -[Schedule 15 min discussion with me for free @nishantk](http://www.canumeet.com/nishantk/javascript-interview-query-discussion) -## Question 27 -### Describe Singleton Pattern In JavaScript? -The singleton pattern is the most commonly used design pattern and one that you will probably is more than any others. It provides a great way to wrap the code into a logical unit that can be accessed through a single variable. The Singleton design pattern is used when only one instance of an object is needed throughout the lifetime of an application. + + +## Question 27. Describe Singleton Pattern In JavaScript? +The singleton pattern is the most commonly used JavaScript design pattern and one that you will probably be aware of more than any others. It provides a great way to wrap the code into a logical unit that can be accessed through a single variable. The Singleton design pattern is used when only one instance of an object is needed throughout the lifetime of an application. In JavaScript, there is a different way to achieve singleton object than any other object oriented supported language (Java, C++). In JavaScript Singleton pattern have many uses, they can be used for NameSpacing, which reduce the number of global variables in your page (prevent from polluting global space), organizing the code in a consistent manner, which increase the readability and maintainability of your pages. There are two important points in the traditional definition of Singleton pattern: - There should be only one instance allowed for a class and @@ -1022,12 +989,11 @@ console.log(MyNamespace.Singleton.getInstance().publicMethod()); The singleton implemented above is easy to understand. The singleton class maintains a static reference to the lone singleton instance and return that reference from the static getInstance() method. -## Have doubt in this question ?? -[Schedule 15 min discussion with me for free @nishantk](http://www.canumeet.com/nishantk/javascript-interview-query-discussion) -## Question 28 -##### What are the way by which we can create object in JavaScript ? + + +## Question 28. What are the way by which we can create object in JavaScript ? **Method 1:** `Function Based` @@ -1090,8 +1056,7 @@ employee.getName = function(){ ``` **Note:** As a best practices object literal way is used to create object over this method. -## Question 29 -##### Write a function called deepClone which takes an object and creates a object copy of it. +## Question 29. Write a function called deepClone which takes an object and creates a object copy of it. ``` javascript var newObject = deepClone(obj); @@ -1129,8 +1094,7 @@ var personalDetail = { ``` So when we do deep clone then we should copy every property (including the nested object). -## Question 30 -##### Best way to detect `undefined` object property in JavaScript. +## Question 30. Best way to detect `undefined` object property in JavaScript. > Suppose we have given an object `person` @@ -1158,16 +1122,15 @@ if(typeof person.salary === 'undefined'){ console.log("salary is undefined here because we haven't declared"); } ``` -## Question 31 -##### Write a function called `Clone` which takes an object and creates a object copy of it but not copy deep property of object. +## Question 31. Write a function called `Clone` which takes an object and creates a object copy of it but not copy deep property of object. ```javascript - var objectLit = {foo : 'Bar'}; - var cloneObj = Clone(obj); // Clone is the function which you have to write + var objectLit = {foo : 'Bar'}; + var cloneObj = Clone(obj); // Clone is the function which you have to write console.log(cloneObj === Clone(objectLit)); // this should return false console.log(cloneObj == Clone(objectLit)); // this should return true ``` -**solution:** +**solution:** ```javascript function Clone(object){ @@ -1179,37 +1142,22 @@ function Clone(object){ } ``` -## Question 32 -##### Best way to detect `undefined` object property in JavaScript. +## Question 32. What are promises and how they are useful? -> Suppose we have given an object `person` +We use promises for handling asynchronous interactions in a sequential manner. They are especially useful when we need to do an async operation and THEN do another async operation based on the results of the first one. For example, if you want to request the list of all flights and then for each flight you want to request some details about it. The promise represents the future value. It has an internal state (`pending`, `fulfilled` and `rejected`) and works like a state machine. -```javascript -var person = { - name: 'Nishant', - age : 24 -} -``` -here `person` object has `name` and `age` property. Now we are trying to access **salary** property which we haven't declared on person object so while accessing it will return undefined. So how we will ensure whether property is undefined or not before performing some operation over it. +A promise object has `then` method, where you can specify what to do when the promise is fulfilled or rejected. -**Explanation:** +You can chain `then()` blocks, thus avoiding the callback hell. You can handle errors in the `catch()` block. After a promise is set to fulfilled or rejected state, it becomes immutable. -We can use `typeof` operator to check undefined +Also mention that you know about more sophisticated concepts: + - `async/await` which makes the code appear even more linear + - RxJS observables can be viewed as the recyclable promises -```javascript -if(typeof someProperty === 'undefined'){ - console.log('something is undefined here'); -} -``` -Now we are trying to access salary property of person object. +Be sure that you can implement the promise, read [one of the articles on a topic](https://opensourceconnections.com/blog/2014/02/16/a-simple-promise-implementation-in-about-20-lines-of-javascript/), and learn the source code of the [simplest promise implementation](https://gist.github.com/softwaredoug/9044640). -```javascript -if(typeof person.salary === 'undefined'){ - console.log("salary is undefined here because we haven't declared"); -} -``` -## Question 33 -##### How to check whether a key exist in a JavaScript object or not. + +## Question 33. How to check whether a key exist in a JavaScript object or not. >Let say we have `person` object with property **name** and **age** @@ -1223,17 +1171,17 @@ Now we want to check whether `name` property exist in `person` object or not ? In JavaScript object can have own property, in above example name and age is own property of person object. Object also have some of inherited property of base object like toString is inherited property of person object. -So how we will check whether property is own property or inherited property. +So how we will check whether property is own property or inherited property. -Method 1: We can use `in` operator on objet to check own property or inherited property. +Method 1: We can use `in` operator on objet to check own property or inherited property. ```javascript -console.log('name' in person); // checking own property print true +console.log('name' in person); // checking own property print true console.log('salary' in person); // checking undefined property print false ``` `in` operator also look into inherited property if it doesn't find property defined as own property. For instance If I check existence of toString property as we know that we haven't declared this property on person object so `in` operator look into there base property. -Here +Here ```javascript console.log('toString' in person); // Will print true @@ -1246,75 +1194,54 @@ console.log(person.hasOwnProperty('name')); // print true console.log(person.hasOwnProperty('salary')); // print false ``` -## Question 34 -##### Best way to detect `undefined` object property in JavaScript. - -> Suppose we have given an object `person` +## Question 34. What is NaN, why do we need it, and when can it break the page? +`NaN` stands for “not a number.” and it can break your table of numbers when it has an arithmetic operation that is not allowed. Here are some examples of how you can get `NaN`: ```javascript -var person = { - name: 'Nishant', - age : 24 -} +Math.sqrt(-5); +Math.log(-1); +parseFloat("foo"); /* this is common: you get JSON from the server, convert some strings from JSON to a number and end up with NaN in your UI. */ ``` -here `person` object has `name` and `age` property. Now we are trying to access **salary** property which we haven't declared on person object so while accessing it will return undefined. So how we will ensure whether property is undefined or not before performing some operation over it. -**Explanation:** - -We can use `typeof` operator to check undefined +`NaN` is not equal to any number, it’s not less or more than any number, also it's not equal to itself: ```javascript -if(typeof someProperty === 'undefined'){ - console.log('something is undefined here'); -} +NaN !== NaN +NaN < 2 // false +NaN > 2 // false +NaN === 2 // false ``` -Now we are trying to access salary property of person object. -```javascript -if(typeof person.salary === 'undefined'){ - console.log("salary is undefined here because we haven't declared"); -} -``` -## Question 35 -##### How to check whether a key exist in a JavaScript object or not. +To check if the current value of the variable is NaN, you have to use the `isNaN` function. This is why we can often see NaN in the webpages: it requires special check which a lot of developers forget to do. ->Let say we have `person` object with property **name** and **age** +## Question 35. Fix the bug using ES5 only ```javascript -var person = { - name: 'Nishant', - age: 24 +var arr = [10, 32, 65, 2]; +for (var i = 0; i < arr.length; i++) { + setTimeout(function() { + console.log('The index of this number is: ' + i); + }, 3000); } ``` -Now we want to check whether `name` property exist in `person` object or not ? - -In JavaScript object can have own property, in above example name and age is own property of person object. Object also have some of inherited property of base object like toString is inherited property of person object. - -So how we will check whether property is own property or inherited property. +For ES6, you can just replace `var i` with `let i`. -Method 1: We can use `in` operator on objet to check own property or inherited property. +For ES5, you need to create a function scope like here: ```javascript -console.log('name' in person); // checking own property print true -console.log('salary' in person); // checking undefined property print false +var arr = [10, 32, 65, 2]; +for (var i = 0; i < arr.length; i++) { + setTimeout(function(j) { + return function () { + console.log('The index of this number is: ' + j) + }; + }(i), 3000); +} ``` -`in` operator also look into inherited property if it doesn't find property defined as own property. For instance If I check existence of toString property as we know that we haven't declared this property on person object so `in` operator look into there base property. -Here -```javascript -console.log('toString' in person); // Will print true -``` -If we want to test property of object instance not inherited properties then we will use `hasOwnProperty` method of object instance. -```javascript -console.log(person.hasOwnProperty('toString')); // print false -console.log(person.hasOwnProperty('name')); // print true -console.log(person.hasOwnProperty('salary')); // print false -``` - -## Question 36 -##### What is best way to detect an arrays object on JavaScript ? +## Question 36. What is best way to detect an arrays object on JavaScript ? >We always encounter in such situation where we need to know whether value is type of array or not. @@ -1332,9 +1259,9 @@ function(value){ Let's discuss some way to detect an array in JavaScript. -**Method 1 :** +**Method 1 :** -Duck typing test for array type detection +Duck typing test for array type detection ```javascript // Duck typing arrays @@ -1347,7 +1274,7 @@ As we can see above isArray method will return true if value object have `sort` ```javascript var bar = { sort: function(){ - // Some code + // Some code } } ``` @@ -1381,8 +1308,7 @@ function(value){ } ``` -## Question 37 -##### Best way to detect reference values of any type in JavaScript ? +## Question 37. Best way to detect reference values of any type in JavaScript ? > In Javascript Object are called as reference type, Any value other then primitive is definitely a reference type. There are several built-in reference type such as **Object**, **Array**, **Function**, **Date**, **null** and **Error**. @@ -1392,7 +1318,7 @@ Detecting object using `typeof` operator console.log(typeof {}); // object console.log(typeof []); // object console.log(typeof new Array()); // object -console.log(typeof null); // object +console.log(typeof null); // object console.log(typeof new RegExp()); // object console.log(typeof new Date()); // object ``` @@ -1424,14 +1350,13 @@ console.log(emp1 instanceof Employee); // true console.log(emp1 instanceof Object); // true ``` -## Question 38 -##### Describe Object-Based inheritance in JavaScript. +## Question 38. Describe Object-Based inheritance in JavaScript. > Object-based inheritance also called prototypal inheritance in which we one object inherit from another object without invoking a constructor function. -The ECMAScript 5 **Object.create()** method is the easiest way for one object to inherit from another. +The ECMAScript 5 **Object.create()** method is the easiest way for one object to inherit from another. -**For Instance:** +**For Instance:** ```javascript var employee = { @@ -1445,20 +1370,20 @@ var emp1 = Object.create(employee); console.log(emp1.displayName()); // output "Nishant" ``` -Above example create a new object `emp1` that inherits from `employee`. Here the inheritance occur as emp1's prototype is set to employee. After this emp1 is able to access the same properties and method on employee until new properties or method with the same name are defined. +Above example create a new object `emp1` that inherits from `employee`. Here the inheritance occur as `emp1`'s prototype is set to `employee`. After this emp1 is able to access the same properties and method on employee until new properties or method with the same name are defined. -**For Instance:** Defining displayName() method on emp1 automatically override the employee displayName. +**For Instance:** Defining `displayName()` method on `emp1` will not automatically override the employee `displayName`. ```javascript emp1.displayName = function() { console.log('xyz-Anonymous'); }; -employee.displayName();// "xyz-Anonymous" -emp1.displayName(); // "Nishant" -``` +employee.displayName(); //Nishant +emp1.displayName();//xyz-Anonymous +``` -In addition to this **Object.create()** method also allows to specify a second argument which is an object containing additional properties and methods to add to the new object. +In addition to this **`Object.create(`)** method also allows to specify a second argument which is an object containing additional properties and methods to add to the new object. **For Example** @@ -1472,12 +1397,11 @@ var emp1 = Object.create(employee, { emp1.displayName(); // "John" employee.displayName(); // "Nishant" ``` -In above example, emp1 is created with it's own value for name, so calling **displayName()** method display `"John"` instead of `"Nishant"`. +In above example, `emp1` is created with it's own value for name, so calling **displayName()** method display `"John"` instead of `"Nishant"`. >Object created in this manner give you full control over newly created object. You are free to add, remove any properties and method you want. -## Question 39 -##### Describe Type-Based inheritance in JavaScript. +## Question 39. Describe Type-Based inheritance in JavaScript. >Type-based inheritance works with constructor function instead of object, It means we need to call constructor function of the object from which you want to inherit. @@ -1501,13 +1425,13 @@ function Employee(company){ this.company = company; } -//Prototypal Inheritance +//Prototypal Inheritance Employee.prototype = new Person("Nishant", 24,5000); ``` In above example, **Employee** type inherits from **Person**, which is called super types. It does so by assigning a new instance of Person to Employee prototype. After that, every instance of Employee inherits it's properties and methods from Person. ```javascript -//Prototypal Inheritance +//Prototypal Inheritance Employee.prototype = new Person("Nishant", 24,5000); var emp1 = new Employee("Google"); @@ -1516,7 +1440,7 @@ console.log(emp1 instanceof Person); // true console.log(emp1 instanceof Employee); // true ``` -Let's understand Constructor inheritance +Let's understand Constructor inheritance ```javascript //Defined Person class @@ -1526,7 +1450,7 @@ function Person(name){ var obj = {}; -// obj inherit Person class properties and method +// obj inherit Person class properties and method Person.call(obj); // constructor inheritance console.log(obj); // Object {name: "Nishant"} @@ -1538,29 +1462,28 @@ console.log(name in obj); // true ``` Type-based inheritance is best used with developer defined constructor function rather than natively in JavaScript. In addition to this also allows flexibility in how we create similar type of object. -## Question 40 -##### How we can prevent modification of object in JavaScript ?. +## Question 40. How we can prevent modification of object in JavaScript ?. > ECMAScript 5 introduce several methods to prevent modification of object which lock down object to ensure that no one, accidentally or otherwise, change functionality of Object. -There are three levels of preventing modification: +There are three levels of preventing modification: -**1: Prevent extensions :** +**1: Prevent extensions :** No new properties or methods can be added to the object, but one can change the existing properties and method. -For Example: +For Example: ```javascript var employee = { name: "Nishant" }; -// lock the object +// lock the object Object.preventExtensions(employee); // Now try to change the employee object property name -employee.name = "John"; // work fine +employee.name = "John"; // work fine //Now try to add some new property to the object employee.age = 24; // fails silently unless it's inside the strict mode @@ -1576,7 +1499,7 @@ var employee = { name: "Nishant" }; -// Seal the object +// Seal the object Object.seal(employee); console.log(Object.isExtensible(employee)); // false @@ -1586,7 +1509,7 @@ delete employee.name // fails silently unless it's in strict mode // Trying to add new property will give an error employee.age = 30; // fails silently unless in strict mode -``` +``` when an object is sealed, its existing properties and methods can't be removed. Sealed object are also non-extensible. @@ -1602,9 +1525,9 @@ var employee = { }; //Freeze the object -Object.freeze(employee); +Object.freeze(employee); -// Seal the object +// Seal the object Object.seal(employee); console.log(Object.isExtensible(employee)); // false @@ -1615,7 +1538,7 @@ console.log(Object.isFrozen(employee)); // true employee.name = "xyz"; // fails silently unless in strict mode employee.age = 30; // fails silently unless in strict mode delete employee.name // fails silently unless it's in strict mode -``` +``` Frozen objects are considered both non-extensible and sealed. @@ -1623,7 +1546,7 @@ Frozen objects are considered both non-extensible and sealed. If you are decided to prevent modification, sealed, freeze the object then use in strict mode so that you can catch the error. -For Example: +For Example: ```javascript "use strict"; @@ -1633,9 +1556,9 @@ var employee = { }; //Freeze the object -Object.freeze(employee); +Object.freeze(employee); -// Seal the object +// Seal the object Object.seal(employee); console.log(Object.isExtensible(employee)); // false @@ -1646,382 +1569,308 @@ console.log(Object.isFrozen(employee)); // true employee.name = "xyz"; // fails silently unless in strict mode employee.age = 30; // fails silently unless in strict mode delete employee.name; // fails silently unless it's in strict mode -``` - - -#Objective Question - -## Hoisting +``` -###1. console.log(employeeId); -1. Some Value -2. Undefined -3. Type Error -4. ReferenceError: employeeId is not defined +## Question 44. Write a log function which will add prefix `(your message)` to every message you log using console.log ? +> For example, If you log `console.log("Some message")` then output should be **(your message) Some message** -Answer: 4) ReferenceError: employeeId is not defined +Logging error message or some informative message is always required when you dealing with client side JavaScript using console.log method. Some time you want to add some prefix to identify message generated log from your application hence you would like to prefix your app name in every console.log. -###2. What would be the output of following code? +A general way to do this keep adding your app name in every console.log message like ```javascript -console.log(employeeId); -var employeeId = '19000'; +console.log('your app name' + 'some error message'); ``` +But doing in this way you have to write your app name everytime when you log message using console. -1. Some Value -2. undefined -3. Type Error -4. ReferenceError: employeeId is not defined - -Answer: 2) undefined - -###3. What would be the output of following code? +There are some best way we can achieve this ```javascript -var employeeId = '1234abe'; -(function(){ - console.log(employeeId); - var employeeId = '122345'; -})(); -``` - -1. '122345' -2. undefined -3. Type Error -4. ReferenceError: employeeId is not defined +function appLog() { + var args = Array.prototype.slice.call(arguments); + args.unshift('your app name'); + console.log.apply(console, args); +} -Answer: 2) undefined +console.log(appLog("Some error message")); +//output of above console: 'your app name Some error message' +``` -## Object +## Question 45 . Write a function which will test string as a literal and as an object ? -###1. What would be the output of following code ? +For example: We can create string using string literal and using String constructor function. ```javascript -(function() { - 'use strict'; - - var person = { - name: 'Nishant' - }; - person.salary = '10000$'; - person['country'] = 'USA'; + // using string literal + var ltrlStr = "Hi I am string literal"; + // using String constructor function + var objStr = new String("Hi I am string object"); +``` +> We can use typeof operator to test string literal and instanceof operator to test String object. - Object.defineProperty(person, 'phoneNo', { - value: '8888888888', - enumerable: true - }) +```javascript + function isString(str) { + return typeof(str) == 'string' || str instanceof String; + } - console.log(Object.keys(person)); -})(); + var ltrlStr = "Hi I am string literal"; + var objStr = new String("Hi I am string object"); + console.log(isString(ltrlStr)); // true + console.log(isString(objStr)); // true ``` -1. Type Error -2. undefined -3. ["name", "salary", "country", "phoneNo"] -4. ["name", "salary", "country"] - -Answer: 3) ["name", "salary", "country", "phoneNo"] +## Question 46 . What is typical use case for anonymous function in JavaScript ? -## Have doubt in this question ?? -[Schedule 15 min discussion with me for free @nishantk](http://www.canumeet.com/nishantk/javascript-interview-query-discussion) +> Anonymous functions basically used in following scenario. +1. No name is needed if function is only used in one place, then there is no need to add a name to function. -###2. What would be the output of following code ? + Let's take the example of setTimeout function -```javascript -(function() { - 'use strict'; + ```javascript + setTimeout(function(){ + alert("Hello"); + },1000); + ``` + Here there is no need of using named function when we are sure that function which will alert `hello` would use only once in application. - var person = { - name: 'Nishant' - }; - person.salary = '10000$'; - person['country'] = 'USA'; +2. Anonymous functions are declared inline and inline functions have advantages in the case that they can access variable in the parent scopes. - Object.defineProperty(person, 'phoneNo', { - value: '8888888888', - enumerable: false - }) + Let's take a example of event handler. Notify event of particular type (such as click) for a given object. - console.log(Object.keys(person)); -})(); -``` -1. Type Error -2. undefined -3. ["name", "salary", "country", "phoneNo"] -4. ["name", "salary", "country"] - -Answer: 4) ["name", "salary", "country"] + Let say we have HTML element (button) on which we want to add click event and when user do click on button we would like to execute some logic. -## Have doubt in this question ?? -[Schedule 15 min discussion with me for free @nishantk](http://www.canumeet.com/nishantk/javascript-interview-query-discussion) + ```html + + ``` + Add Event Listener + ```javascript + var btn = document.getElementById('myBtn'); + btn.addEventListener('click', function () { + alert('button clicked'); + }); + ``` -###3. What would be the output of following code ? + Above example shows used of anonymous function as a callback function in event handler. -```javascript -(function() { - var objA = { - foo: 'foo', - bar: 'bar' - }; - var objB = { - foo: 'foo', - bar: 'bar' - }; - console.log(objA == objB); - console.log(objA === objB); -}()); -``` -1. false true -2. false false -3. true false -4. true true - -Answer: 2) false false - -###4. What would be the output of following code ? +3. Passing anonymous function as a parameter to calling function. -```javascript -(function() { - var objA = new Object({foo: "foo"}); - var objB = new Object({foo: "foo"}); - console.log(objA == objB); - console.log(objA === objB); -}()); -``` -1. false true -2. false false -3. true false -4. true true - -Answer: 2) false false + Example: -## Have doubt in this question ?? -[Schedule 15 min discussion with me for free @nishantk](http://www.canumeet.com/nishantk/javascript-interview-query-discussion) + ```javascript + // Function which will execute callback function + function processCallback(callback){ + if(typeof callback === 'function'){ + callback(); + } + } + // Call function and pass anonymous function as callback + processCallback(function(){ + alert("Hi I am anonymous callback function"); + }); + ``` +The best way to take decision for using anonymous function is to asked. -## Array +> Will the function which I am going to define will use anywhere else. -###1. What would be the output of following code? +If your answer is yes then go and create named function rather anonymous function. -```javascript -(function() { - var array = new Array('100'); - console.log(array); - console.log(array.length); -}()); -``` +**Advantage of using anonymous function:** -1. undefined undefined -2. [undefined × 100] 100 -3. ["100"] 1 -4. ReferenceError: array is not defined +1. It can reduce a bit of code, particularly in recursive function and in callback function. +2. Avoid needless global namespace pollutions. -Answer: 3) ["100"] 1 +## Question 47 . How to set a default parameter value ? -###2. What would be the output of following code? +> If you are coming from python/c# you might be using default value for function parameter incase value(formal parameter) has not been passed. For Instance : -```javascript -(function() { - var array1 = []; - var array2 = new Array(100); - var array3 = new Array(['1',2,'3',4,5.6]); - console.log(array1); - console.log(array2); - console.log(array3); - console.log(array3.length); -}()); +```python +// Define sentEmail function +// configuration : Configuration object +// provider : Email Service provider, Default would be gmail +def sentEmail(configuration, provider = 'Gmail'): + # Your code logic ``` +**In Pre ES6/ES2015** -1. [] [] [Array[5]] 1 -2. [] [undefined × 100] Array[5] 5 -3. [] [] ['1',2,'3',4,5.6] 5 -4. [] [] [Array[5]] 5 +There are a lot of ways by which you can achieve this in pre ES2015. -Answer: 1) [] [] [Array[5]] 1 +Let's understand below code by which we achieved setting default parameter value. -## Have doubt in this question ?? -[Schedule 15 min discussion with me for free @nishantk](http://www.canumeet.com/nishantk/javascript-interview-query-discussion) +**Method 1: Setting default parameter value** +```javascript +function sentEmail(configuration, provider) { + // Set default value if user has not passed value for provider + provider = typeof provider !== 'undefined' ? provider : 'Gmail' + // Your code logic +; +} +// In this call we are not passing provider parameter value +sentEmail({ + from: 'xyz@gmail.com', + subject: 'Test Email' +}); +// Here we are passing Yahoo Mail as a provider value +sentEmail({ + from: 'xyz@gmail.com', + subject: 'Test Email' +}, 'Yahoo Mail'); +``` -###3. What would be the output of following code? +**Method 2: Setting default parameter value** ```javascript -(function () { - var array = new Array('a', 'b', 'c', 'd', 'e'); - array[10] = 'f'; - delete array[10]; - console.log(array.length); -}()); +function sentEmail(configuration, provider) { + // Set default value if user has not passed value for provider + provider = provider || 'Gmail' + // Your code logic +; +} +// In this call we are not passing provider parameter value +sentEmail({ + from: 'xyz@gmail.com', + subject: 'Test Email' +}); +// Here we are passing Yahoo Mail as a provider value +sentEmail({ + from: 'xyz@gmail.com', + subject: 'Test Email' +}, 'Yahoo Mail'); ``` -1. 11 -2. 5 -3. 6 -4. undefined +## Question 48. Write code for merge two JavaScript Object dynamically. +> Let say you have two object -Answer: 1) 11 +```javascript +var person = { + name : 'John', + age : 24 +} -## Have doubt in this question ?? -[Schedule 15 min discussion with me for free @nishantk](http://www.canumeet.com/nishantk/javascript-interview-query-discussion) +var address = { + addressLine1 : 'Some Location x', + addressLine2 : 'Some Location y', + city : 'NewYork' +} +``` +Write merge function which will take two object and add all the own property of second object into first object. +```javascript +merge(person , address); -###4. What would be the output of following code? +/* Now person should have 5 properties +name , age , addressLine1 , addressLine2 , city */ +``` +**Method 1: Using ES6, Object assign method** ```javascript -(function(){ - var animal = ['cow','horse']; - animal.push('cat'); - animal.push('dog','rat','goat'); - console.log(animal.length); -})(); +const merge = (toObj, fromObj) => Object.assign(toObj, fromObj); ``` -1. 4 -2. 5 -3. 6 -4. undefined - -Answer: 3) 6 - -## Function: - -###1. What would be the output of following code ? +**Method 2: Without using in-built function** ```javascript -function funcA(){ - console.log("funcA ", this); - (function innerFuncA1(){ - console.log("innerFunc1", this); - (function innerFunA11(){ - console.log("innerFunA11", this); - })(); - })(); +function merge(toObj, fromObj) { + // Make sure both of the parameter is an object + if (typeof toObj === 'object' && typeof fromObj === 'object') { + for (var pro in fromObj) { + // Assign only own properties not inherited properties + if (fromObj.hasOwnProperty(pro)) { + // Assign property and value + toObj[pro] = fromObj[pro]; + } + } + }else{ + throw "Merge function can apply only on object"; + } } - -console.log(funcA()); ``` +## Question 49. What is non-enumerable property in JavaScript and how can create ? -1. funcA Window {...} - innerFunc1 Window {...} - innerFunA11 Window {...} -2. undefined -3. Type Error -4. ReferenceError: this is not defined - -Answer: 1) +>Object can have properties that don't show up when you iterate through object using for...in loop or using Object.keys() to get an array of property names. This properties is know as non-enumerable properties. -###2. What would be the output of following code ? +Let say we have following object ```javascript -var obj = { - message: "Hello", - innerMessage: !(function() { - console.log(this.message); - })() +var person = { + name: 'John' }; - -console.log(obj.innerMessage); -``` - -1. ReferenceError: this.message is not defined -2. undefined -3. Type Error -4. undefined true - -Answer: 4) undefined true +person.salary = '10000$'; +person['country'] = 'USA'; -###3. What would the output of following code ? - -```javascript -var obj = { - message: "Hello", - innerMessage: function() { - console.log(this.message); - } -}; - -console.log(obj.innerMessage()); +console.log(Object.keys(person)); // ['name', 'salary', 'country'] ``` +As we know that person object properties `name`, `salary` ,`country` are enumerable hence it's shown up when we called Object.keys(person). -1. Hello -2. undefined -3. Type Error -4. ReferenceError: this.message is not defined - -Answer: 1) Hello - -###4. What would the output of following code ? +To create a non-enumerable property we have to use **Object.defineProperty()**. This is a special method for creating non-enumerable property in JavaScript. ```javascript -var obj = { - message: 'Hello', - innerMessage: function () { - (function () { - console.log(this.message); - }()); - } +var person = { + name: 'John' }; -console.log(obj.innerMessage()); -``` +person.salary = '10000$'; +person['country'] = 'USA'; -1. Type Error -2. Hello -3. undefined -4. ReferenceError: this.message is not defined - -Answer: 3) undefined +// Create non-enumerable property +Object.defineProperty(person, 'phoneNo',{ + value : '8888888888', + enumerable: false +}) -## Object Oriented +Object.keys(person); // ['name', 'salary', 'country'] +``` +In above example `phoneNo` property didn't show up because we made it non-enumerable by setting **enumerable:false** -###1. What would the output of following code ? +Now let's try to change value of `phoneNo` ```javascript -function Person(name, age){ - this.name = name || "John"; - this.age = age || 24; - this.displayName = function(){ - console.log(this.name); - } -} - -Person.name = "John"; -Person.displayName = function(){ - console.log(this.name); -} - -var person1 = new Person('Nishant'); - person1.displayName(); - Person.displayName(); +person.phoneNo = '7777777777'; ``` +Changing non-enumerable property value will return error in `strict mode`. In non-strict mode it won't through any error but it won't change the value of phoneNo. + +**Bonus** -1. Nishant Person -2. Nishant John -3. Nishant undefined -4. John John - -Answer: 1) Nishant Person +**Object.defineProperty()** is also let you create read-only properties as we saw above, we are not able to modify phoneNo value of a person object. -## Have doubt in this question ?? -[Schedule 15 min discussion with me for free @nishantk](http://www.canumeet.com/nishantk/javascript-interview-query-discussion) +## Question 50. What is Function binding ? -## This Book will be completed by June 1 2016 and available to buy. If you want me to sent early copy of this book then please add your name and email address in google form here [Google Form](http://goo.gl/forms/QSpxVtvsNb). +> Function binding falls in advance JavaScript category and this is very popular technique to use in conjunction with event handler and callback function to preserve code execution context while passing function as a parameter. -##Contributing +Let's consider the following example: -I'm always welcome to feedback on how the book can be improved, and more questions can be added. If you think you have some question then please add that and open a pull request. +```javascript +var clickHandler = { + message: 'click event handler', + handleClick: function(event) { + console.log(this.message); + } +}; -####Note: All contributor to this book will be added as contributor in Book Last page by default, So if you have contributed and don't wanted to be included then please write an email to me at nihantanu@gmail.com +var btn = document.getElementById('myBtn'); +// Add click event to btn +btn.addEventListener('click', clickHandler.handleClick); +``` -##For any other query: -[Schedule 15 min discussion with me for free @nishantk](http://www.canumeet.com/nishantk/javascript-interview-query-discussion) +Here in this example clickHandler object is created which contain message properties and handleClick method. +We have assigned handleClick method to a DOM button, which will be executed in response of click. When the button is clicked, then handleClick method is being called and console message. Here console.log should log the `click event handler` message but it actually log `undefined`. -##License +The problem of displaying `undefined` is because of the execution context of clickHandler.handleClick method is not being saved hence `this` pointing to button `btn` object. We can fix this issue using bind method. -This book is released under a Creative Commons Attribution-Noncommercial- No Derivative Works 3.0 United States License. +```javascript +var clickHandler = { + message: 'click event handler', + handleClick: function(event) { + console.log(this.message); + } +}; -What this means it that the project is free to read and use, but the license does not permit commercial use of the material (i.e you can freely print out the questions for your own use, but you can't sell it). I'm trying to best to publish all of my books in a free + purchased (if you would like to support these projects) form so I would greatly appreciate it if you would respect these terms. +var btn = document.getElementById('myBtn'); +// Add click event to btn and bind the clickHandler object +btn.addEventListener('click', clickHandler.handleClick.bind(clickHandler)); +``` -Copyright Nishant Kumar, 2016. +`bind` method is available to all the function similar to call and apply method which take argument value of `this`.