Advanced JavaScript Interview Questions

• Q1.

  Explain Event bubbling and Event Capturing in JavaScript?

  Posted by Sharad Jaiswal

  Event Capture and Bubbling: In HTML DOM API there are two ways of event propagation and determines the order in which event will be received. The two ways are Event Bubbling and Event Capturing. The first method event bubbling directs the event to its intended target, and the second is called event capture in which the event goes down to the element.

  Event Capture

  The capture procedure is rarely used but when it’s used it proves to be very helpful. This process is also called ‘trickling’. In this process, the event is captured first by the outermost element and then propagated to the innermost element. For example:

  
  <div>
  
  <ul>
  
  <li></li>
  
  </ul>
  
  </div>
  

  From the above example, suppose the click event did occur in the ‘li’ element, in that case capturing event it will be first handled ‘div’, then ‘ul’ and at last the target element will be hit that is ‘li’

  Event Bubbling

  Bubbling just works like the bubbles, the event gets handled by the innermost element and then propagated to the outer element.

  
  <div>
   <ul>
  
  <li></li>
  
  </ul>
  
  </div>
  

  From the above example, suppose the click event did occur in the ‘li’ element in bubbling model the event will be handled first by ‘li’ then by ‘ul’ and at last by ‘div’ element.

  0
• Q2.

  What close() does in Javascript?

  Posted by Sharad Jaiswal

  In Javascript close() method is used to close the current window. You must write window.close() to ensure that this command is associated with a window object and not some other JavaScript object.

  0
• Q3.

  What is the difference between let and var?

  Posted by Sharad Jaiswal

  There are several differences between let and var. let gives you the privilege to declare variables that are limited in scope to the block; statement of expression, unlike var. var is rather a keyword, which defines a variable globally regardless of block scope.

  Global window object:

  Even if the let variable is defined as same as var variable globally, the let variable will not be added to the global window object. The similarities are alike when both are used outside the function block.

  Block: let variables are usually used when there is a limited use of those variables. Say, in for loops, while loops or inside the scope of if conditions etc. Basically, where ever the scope of the variable has to be limited.

  Redeclaration: let variables cannot be re-declared while var variable can be re-declared in the same scope.
  Function: let and var variables work the same way when used in a function block.

  0
• Q4.

  Explain Closures in JavaScript?

  Posted by Sharad Jaiswal

  Closures are the combination of lexical environment and function within which the function was declared. This allows JavaScript programmers to write better, more creative, concise and expressive codes. The closure will consist of all the local variables that were in-scope when the closure was created.

  Sure, closures appear to be complex and beyond the scope, but after you read this article, closures will be much more easy to understand and more simple for your everyday JavaScript programming tasks. JavaScript is  a very function-oriented language it gives the user freedom to use functions as the wish of the programmer.

  0
• Q5.

  Explain JavaScript Event Delegation Model?

  Posted by Sharad Jaiswal

  In JavaScript, there is some cool stuff that makes it the best of all. One of them is Delegation Model. When capturing and bubbling, allow functions to implement one single handler to many elements at one particular time then that is called event delegation. Event delegation allows you to add event listeners to one parent instead of specified nodes. That particular listener analyzes bubbled events to find a match on the child elements. Many people think it to be complicated but in reality, it is very simple if one starts understanding it.

  Also, Read Five JavaScript Frameworks to learn in 2018

  0
• Q6.

  Describe negative infinity in JavaScript?

  Posted by Sharad Jaiswal

  NEGATIVE_INFINITY property represents negative infinity and is a number in javascript, which is derived by ‘dividing negative number by zero’. It can be better understood as a number that is lower than any other number. Its properties are as follows:
  – A number of objects need not to be created to access this static property.
  – The value of negative infinity is the same as the negative value of the infinity property of the global object.

  The values behave differently than the mathematical infinity:

  1. Any positive value, including POSITIVE_INFINITY, multiplied by NEGATIVE_INFINITY is NEGATIVE_INFINITY.
  2. Any negative value, including NEGATIVE_INFINITY, multiplied by NEGATIVE_INFINITY is POSITIVE_INFINITY.
  3. Zero multiplied by NEGATIVE_INFINITY is NaN.
  4. NaN multiplied by NEGATIVE_INFINITY is NaN.
  5. NEGATIVE_INFINITY, divided by any negative value except NEGATIVE_INFINITY, is POSITIVE_INFINITY.
  6. NEGATIVE_INFINITY, divided by any positive value except POSITIVE_INFINITY, is NEGATIVE_INFINITY.
  7. NEGATIVE_INFINITY, divided by either NEGATIVE_INFINITY or POSITIVE_INFINITY, is NaN.
  8. Any number divided by NEGATIVE_INFINITY is zero.

  0
• Q7.

  Explain function hoisting in JavaScript?

  Posted by Sharad Jaiswal

  JavaScript’s default behavior that allows moving declarations to the top is called Hoisting. The 2 ways of creating functions in JavaScript are Function Declaration and Function Expression. Let’s find out more about these:

  Function Declaration

  A function with the specific parameters is known as function declarations. To create a variable in JavaScript is called declarations.

  e.g:

  
  hoisted(); // logs "foo"
  
  function hoisted() {
  
    console.log('foo');
  
  }
  

  Function Expression

  When a function is created by using an expression it is called function expression.

  e.g:

  
  notHoisted(); // TypeError: notHoisted is not a function
  
  var notHoisted = function() {
  
     console.log('bar');
  
  };
  

  0
• Q8.

  What is the use of let & const?

  Posted by Sharad Jaiswal

  In modern javascript let & const are different ways of creating variables.Earlier in javascript, we use the var keyword for creating variables. let & const keyword is introduced in version ES6 with the vision of creating two different types of variables in javascript one is immutable and other is mutable.
  const: It is used to create an immutable variable. Immutable variables are variables whose value is never changed in the complete life cycle of the program.
  let: let is used to create a mutable variable. Mutable variables are normal variables like var that can be changed any number of time.

  0
• Q9.

  Explain Arrow functions?

  Posted by Sharad Jaiswal

  An arrow function is consise and short way to write function expressions in Es6 or above .Arrow functions cannot be used as constructors and also does not supports this, arguments, super, or new.target keywords. It is best suited for non-method functions .In general an arrow function looks like const function_name= ()=>{}

   
   const greet=()=>{console.log('hello');}
   greet();
   
  

  0
• Q10.

  What are exports and imports?

  Posted by Sharad Jaiswal

  Imports and exports helps us to write modular javascript code. Using Imports and exports we can split our code in to multiple files. Imports allows to take only some specific variables or methods of a file. We can import methods or variables that are exported by a module.See the below example for more detail.

  
   //index.js
  
   import name,age from './person'; 
  
   console.log(name);
   console.log(age);
  
   //person.js
  
   let name ='Sharad',
   	  occupation='developer'
        age =26;
  
   export { name, age}; 
   
  

  0
• Q11.

  What is difference between module.exports and export?

  Posted by Sharad Jaiswal

  The module is a plain JavaScript object with an exports property. Exports is a plain JavaScript variable that happens to be set to module.exports. At the end of your file, node.js will basically ‘return’ module.exports to the require function. A simplified way to view a JS file in Node could be this:

  
  var module = { exports: {} };
  var exports = module.exports;
  
  // your code
  
  return module.exports;
  
  

  If you set a property on exports, like exports.a = 9;, that will set module.exports.a as well because objects are passed around as references in JavaScript, which means that if you set multiple variables to the same object, they are all the same object; so then exports and module.exports are the same object.
  But if you set exports to something new, it will no longer be set to module.exports, so exports and module.exports are no longer the same objects.

  Source : https://stackoverflow.com/questions/16383795/difference-between-module-exports-and-exports-in-the-commonjs-module-system

  0
• Q12.

  How to import all exports of a file as an object.

  Posted by Sharad Jaiswal

  import * as object name from ‘./file.js’ is used to import all exported members as an object. You can simply access the exported variables or methods using dot (.) operator of the object.

  Example:

  
  objectname.member1;
  objectname.member2;
  objectname.memberfunc();
  
  

  0
• Q13.

  Explain “use strict” ?

  Posted by Sharad Jaiswal

  “use strict” is a javascript directive that is introduced in Es5. The purpose of using “use strict” directive is to enforce the code is executed in strict mode. In strict mode we can’t use a variable without declaring it. “use strict” is ignored by earlier versions of Javascript.

  0