JavaScript Interview Questions

JavaScript is an interpreted, object-oriented, and event-driven client-side scripting language commonly used in web development to implement dynamic effects and interactive features.

What are the data types of JavaScript?

The data types in JavaScript include Primitive Types and Object Types. The primitive types are: Undefined, Null, Boolean, Number, String, and Symbol (added in ES6). The object types include: Object, Array, Function, Date, RegExp, Error, etc.

How do you define a variable?

Variables can be defined using the keywords var, let, or const. For example:

// Define a variable using var
var a = 1;

// Define a variable using let
let b = 'hello';

// Define a constant using const
const PI = 3.14;

How do you determine the type of a variable?

You can use the typeof operator, for example:

typeof 123;     // "number"
typeof 'hello'; // "string"
typeof true;    // "boolean"
typeof undefined; // "undefined"
typeof null;    // "object"
typeof {};      // "object"
typeof [];      // "object"
typeof function(){};  // "function"

Note that the result of typeof null is "object", which is a historical legacy issue.

What is a closure?

A closure refers to a function that has access to its own scope and the enclosing functions' variables, even after it returns from them. For example:

function createCounter() {
  var count = 0;
  return function() {
    return ++count;
  }
}

var counter1 = createCounter();
console.log(counter1()); // 1
console.log(counter1()); // 2
console.log(counter1()); // 3

var counter2 = createCounter();
console.log(counter2()); // 1
console.log(counter2()); // 2

In the example above, the createCounter function returns an inner function that can access the variable count within the scope of the createCounter function. Each time this returned function is called, it increments and returns a counter value.

What is the prototype chain?

Every object in JavaScript has an internal property [[Prototype]], which points to its prototype. If a property or method does not exist on an object itself, the JavaScript engine will search up the prototype chain of that object until it finds the property or method or reaches the top of the prototype chain (i.e., Object.prototype).

For example:

var obj = {name: 'Tom'};
console.log(obj.toString()); // "[object Object]"

// Equivalent to
console.log(obj.__proto__.toString.call(obj)); // "[object Object]"
console.log(Object.prototype.toString.call(obj)); // "[object Object]"

In the example above, the obj.toString() method does not exist directly on the obj object. Therefore, the JavaScript engine searches up the prototype chain of the obj object and eventually finds the Object.prototype.toString method, calling it to return the string "[object Object]".

What are events in JavaScript?

An event is an operation or behavior that occurs under specific conditions (such as a user click, page load completion, etc.). In JavaScript, events can be responded to using DOM APIs or by employing event handlers within JavaScript code.

For example:

<button id="btn">Click me</button>

<script>
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
  alert('Button clicked!');
});
</script>

In the example above, when a user clicks the button, it triggers the click event. The addEventListener method in the JavaScript code registers an event handler that executes its internal code whenever this event occurs.

How do you prevent the default behavior of an event?

You can use the event.preventDefault() method to stop the default action associated with an event. For example:

<a href="https://www.example.com" id="link">Click to jump</a>

<script>
var link = document.getElementById('link');
link.addEventListener('click', function(event) {
  event.preventDefault();
  alert('Link clicked, but no navigation will occur!');
});
</script>

In the example above, the event.preventDefault() method is called within the event handler to prevent the default behavior that would normally happen after clicking a link (i.e., navigating to the page specified in the href attribute).