Javascript: Interview Questions

1) Can you explain variable scope in Javascript?

Scope in JavaScript is the area where we have valid access to variables or functions. JavaScript has mainly two scopes – global and local. Any variable declared outside of a function belongs to the global scope, and it can be accessible from anywhere in application. Each function has its own scope which is local scope. Any variable declared within that function is only accessible from that function and any nested functions.

Now ES6 introduces Block level scope. Before when we declare variable within function, it can be accessed anywhere within that function. Instead variable declare with let only accessible within the block they are defined.

For example:

function testvar() {

  for (let i = 0; i < 5; i++) {

    console.log(i);

}

  console.log(i)

}

So here “i” only available within for loop and not outside.

2) What is difference between Window and Document Object?

window is that global object and It is the root level element in any web page that holds global variables, global functions.

Document is the direct child of the window object. It is aka Document Object Model (DOM) of the html markup you have written.

3) What is difference between window.onload and document.onload?

window.onload is fired when DOM is ready and all the contents including images, css, scripts, sub-frames, etc. finished loaded. This means everything is loaded.

document.onload is fired when DOM (DOM tree built from markup code within the document)is ready which can be prior to images and other external content is loaded.

4) What is a “closure” in JavaScript?

A closure is an inner function that has access to the variables in the outer (enclosing) function’s scope chain. The closure has access to variables declared within function, within outer enclosing function and globally declared variables.

Here is an example:

let globalVar = "xyz";

(function outerFunc(outerArg) {
    let outerVar = 'a';
    
    (function innerFunc(innerArg) {
    let innerVar = 'b';
    
    console.log(
      "innerVar = " + innerVar + "\n" +
      "outerVar = " + outerVar + "\n" +
      "globalVar = " + globalVar);   
    });
});

5) Consider the following code snippet. Can you explain what gets logged to the console when the user clicks on “Button 4” and why?

for (var i = 0; i < 5; i++) {
  var btn = document.createElement('button');
  btn.appendChild(document.createTextNode('Button ' + i));
  btn.addEventListener('click', function(){ console.log(i); });
  document.body.appendChild(btn);
}

No matter what button the user clicks the number 5 will always be logged to the console. This is because, at the point that the onclick method is invoked (for any of the buttons), the for loop has already completed and the variable i already has a value of 5.

6) What is callback?

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

Here is a quick example:

function greeting(name) {
  alert('Hello ' + name);
}

function processUserInput(callback) {
  var name = prompt('Please enter your name.');
  callback(name);
}

processUserInput(greeting);

7) Can you explain “this” keyword in Javascript?

The JavaScript this keyword refers to the object it belongs to.

It has different values depending on where it is used:

  • In a method, this refers to the owner object.
  • Alone, this refers to the global object.
  • In a function, this refers to the global object.
  • In a function, in strict mode, this is undefined.
  • In an event, this refers to the element that received the event.
  • Methods like call(), and apply() can refer this to any object.

8) What is Hoisting in javascript?

Hoisting is JavaScript’s default behavior of moving all declarations to the top of the current scope (to the top of the current script or the current function).

In other words; a variable can be used before it has been declared.

Example:

x = 5; // Assign 5 to x
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x;                     // Display x in the element
var x; // Declare x

Variables and constants declared with let or const are not hoisted!

9)  What is the difference between undefined and not defined in JavaScript?

In JavaScript, if you try to use a variable which has not been declared, then JavaScript will throw an error variable is not defined.

let p;
console.log(p); 

This will print -->> undefined

If a variable that is neither declared nor defined, when we try to reference such a variable we’d get the result not defined.

console.log(q);  

This will print -->> ReferenceError: q is not defined

10) Difference between “undefine” and “NULL” Keywords?

When you define a variable but not assign any value. typeof(undefine)=> undefined
Null- manually done. typeof(null)=> object