JavaScript Interview Questions and Answers

I found these questions from this Github Link, It's a really good collection.

Q1.What is event delegation?

Ans.

In event delegation instead of listening in the input directly, we should look for HTML elements that will available on the page when the page initially loads. Event delegation is done using event.target as below example.


function toggleDone (event) { 
  if (!event.target.matches(‘input’))
   return   console.log(event.target)  
  //We now have the correct input - we can manipulate the node here 
  }

 
So event delegation helps us to rebind the event listener to each new event.

Q2.Explain how this works in JavaScript.

Ans.

this keyword refers to an object, that object which is executing the current bit of javascript code or function.

Q3.Can you give an example of one of the ways that working with this has changed in ES6?

Ans.
  • Code reduction with Arrow Function(=>).
  • export and import of modules
  • In ES6 other than var, we can define variables with let and const keyword as well.
  • In ES6 along with for loop, we have for...of loop to perform an iteration over the values of the iterable objects
  • As of now, no browser supports ES6, so we need compilers like Babel and Traceur to convert from ES6 to ES5
  • Spread Operator (...) makes it easy to merge an array of objects.

Q4.Explain how prototypal inheritance works.

Ans.  Prototype inheritance is one object can point to another object and inherit all its properties. Here is a document from Mozilla MDN doc about it. Prototype in JS MDN

Q5.What's the difference between a variable that is: null, undefined or undeclared?

Ans.
  • Undefined: is a variable that has been declared but no value exists and is a type of itself undefined.
  • null: is a value of the variable and is a type of object.
  • Undeclared: are variables that have been declared without var keyword.

Q6.How would you go about checking for any of these states?

Ans.

Q7.What is a closure, and how/why would you use one?

Ans.  In Brief, accessing a variable of outer function from an inner function is called Closure. Below code example will help us understand it.

function countinng() {
    var counter = 0;
    function updateClickCount() {
    ++counter;
    }
    updateClickCount();    
    return counter; 
}
Check this link in Stackoverflow for more details

Q8.What language constructions do you use for iterating over object properties and array items?

Ans. For Iterations or extracting data from array items we mainly use for loop. But there are more which get as used. Such as
  • for each
  • for...in
  • Array.prototype.Iterate 
  • Array.protype.map
  • reduce
Here is a detailed explanation of same 2ality.com

Q9.Can you describe the main difference between the Array.forEach() loop and Array.map() methods and why you would pick one versus the other?

Ans.
Array.forEach() Array.map()
The forEach() method returns undefined. map() returns a new array with the transformed elements
As forEach() returns undefined map() is chainable.We can attach reduce(), sort(), filter() and so on after performing a map() method on an array.

Q10.What's a typical use case for anonymous functions?

Ans. Here is a small list of use cases for the anonymous function
  •  anonymous functions are used as an inline function where we need a return value for some piece of code.
  • Many cases it is used to pass them as argument function.
  • Many case closures are created with anonymous functions.

Q11.What's the difference between host objects and native objects?

Ans.

Both native objects and host objects are part of ECMAScript specification.

native object host object
native objects are defined by ECMA script implementation. host objects are supplied by the host environment.
Examples: Object (constructor), Date, Math, parseInt, eval, string methods like indexOf and replace, array methods etc. Examples : window, document, location, history, XMLHttpRequest, setTimeout, getElementsByTagName etc.
These objects are available in core javascript. These objects are provided by a browser environment.

Q12.Explain the difference between: function Person(){}, var person = Person(), and var person = new Person()?

Ans.
  • function Person() {}: This declares and registers in global namespace, but does not execute.
  • var person = Person(): A variable ‘var person’ has been defined and contains a value refers to a Person function.
  • var person = new Person(): By adding the new keyword we are creating a new object of person class constructor.

Q13.Explain the differences on the usage of foo between function foo() {} and var foo = function() {}

Ans.

Q14.Can you explain what Function.call and Function.apply do? What's the notable difference between the two?

Ans.

The main difference between Function.call() and Function.apply() is call() method takes comma-separated argument, whereas apply() method takes array as an argument. Below is a detailed explanation in MDN for call and apply

Q15.Explain Function.prototype.bind.

Ans.

bind is a method on the prototype of all functions in JavaScript.

  • It allows us to create a new function from an existing function.
  • change the new function’s this context.
  • provide any arguments you want the new function to be called with.
  • The arguments provided to bind will precede any arguments that are passed to the new function when it is called.

    Q16.What's the difference between feature detection, feature inference, and using the UA string?

    Ans.

    Q17.Explain "hoisting".

    Ans.In Javascript

    Q18.Describe event bubbling.

    Ans.

    Q19.Describe event capturing.

    Ans.

    Q20.What's the difference between an "attribute" and a "property"?

    Ans.

    Q21.What are the pros and cons of extending built-in JavaScript objects?

    Ans.

    Q22.What is the difference between == and ===?

    Ans. he strict equality operator (===) behaves identically to the abstract equality operator (==) except no type conversion is done, and the types must be the same to be considered equal. For Example: 17 == '17' is true but 17==='17' if false.

    Q23.Explain the same-origin policy with regards to JavaScript.

    Ans.

    Q24.Why is it called a Ternary operator, what does the word "Ternary" indicate?

    Ans.

    Q25.What is strict mode? What are some of the advantages/disadvantages of using it?

    Ans.

    Q26.What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript?

    Ans.

    Q27.What tools and techniques do you use debugging JavaScript code?

    Ans.

    Q28.Explain the difference between mutable and immutable objects.

    Ans.

    Q29.What is an example of an immutable object in JavaScript?

    Ans.

    Q30.What are the pros and cons of immutability?

    Ans.

    Q31.How can you achieve immutability in your own code?

    Ans.

    Q32.Explain the difference between synchronous and asynchronous functions.

    Ans.

    Q33.What is the event loop?

    Ans.

    Q34.What is the difference between the call stack and task queue?

    Ans.

    Q35.What are the differences between variables created using let, var or const?

    Ans.
    var let const
    var declarations are globally scoped or function/locally scoped. a variable declared in a block with let is only available for use within that block i.e let is block scoped. Like let declarations, const declarations can only be accessed within the block they were declared.
    var variables can be re-declared and updated. let can be updated but not re-declared. const cannot be updated or re-declared.
    var variables are hoisted to the top of their scope and initialized with a value of undefined. like var, let declarations are hoisted to the top. Unlike var which is initialized as undefined, the let keyword is not initialized. So if you try to use a let variable before the declaration, you'll get a Reference Error. While var and let can be declared without being initialized, const must be initialized during declaration. Just like let, const declarations are hoisted to the top but are not initialized.

    Q36.What are the differences between ES6 class and ES5 function constructors?

    Ans.

    Q37.Can you offer a use case for the new arrow => function syntax? How does this new syntax differ from other functions?

    Ans.

    Q38.What advantage is there for using the arrow syntax for a method in a constructor?

    Ans.

    Q39.What is the definition of a higher-order function?

    Ans.

    Q40.Can you give an example for destructuring an object or an array?

    Ans.

    Q41.Can you give an example of generating a string with ES6 Template Literals?

    Ans.

    Q42.Can you give an example of a curry function and why this syntax offers an advantage?

    Ans.

    Q43.What are the benefits of using spread syntax and how is it different from rest syntax?

    Ans.

    Q44.How can you share code between files?

    Ans.

    Q45.Why you might want to create static class members?

    Ans.

    Q46.What are the difference between while and do-while loops in JavaScript?

    Ans.

    We use do-while loop if we want to execute the first condition and then the loop, whereas while loop does not run the first condition also.

    Q47.What is the difference between TypeScript and JavaScript?

    Ans.
    • TypeScript is a superset of JavaScript.
    • JavaScript can be run directly whereas TypeScript needs to be compiled, hence it supports jsx
    • TypeScript has prototyping whereas javascript does not have the same.

    Q48.What is promise in JavaScript?

    Ans.

    Previous
    Next Post »

    Pages