JavaScript Mock Interview Questions

JavaScript is the most popular language of the Web. It is used for developing frontends & backend applications, mobile apps and games etc. Here are some common short interview questions about JavaScript, along with their answers:

1. What data types are supported by JavaScript?

JavaScript supports the following data types:

• Primitive types: Number, String, Boolean, Undefined, Null, Symbol (introduced in ES6), and BigInt (introduced in ES11).
• Object types: Objects, Arrays, Functions, Dates, etc.

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

• == (loose equality) compares two values for equality after converting both values to the same type (type coercion).
• === (strict equality) compares both the value and the type without type coercion.

3. What is the difference between null and undefined?

• undefined is a type and value that indicates a variable has been declared but has not been assigned a value.
• null is an assignment value that represents the intentional absence of any object value.

4. What is Hoisting in JavaScript?

Hoisting is JavaScript’s behavior of moving variable and function declarations to the top of their containing scope during compile time. Only the declarations are hoisted, not the initializations.

Example:

console.log(a); // undefined
var a = 5;

console.log(b); // ReferenceError: b is not defined
let b = 10;

3. What is a closure in JavaScript?

A closure is a feature in JavaScript where a function retains access to its lexical scope, even after the function has finished executing. This allows the function to remember the environment in which it was created.

Example:

function makeCounter() {
    let count = 0;
    return function() {
        count++;
        return count;
    };
}

const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2

6. What is the purpose of the this keyword?

The this keyword refers to the object that is currently executing the code. It is used to access properties and methods of that object. The value of this depends on the context in which a function is called.

7. What is event delegation in JavaScript?

Event delegation is a technique where you attach a single event listener to a parent element instead of multiple listeners to individual child elements. This is achieved by leveraging event bubbling, where an event propagates up through the DOM hierarchy.

Example:

document.getElementById('parent').addEventListener('click', function(event) {
    if (event.target && event.target.matches('button.child')) {
        console.log('Button clicked:', event.target.textContent);
    }
});

8. What is the difference between let, const, and var?

• var declares a variable that is function-scoped or globally-scoped and can be re-declared and updated.
• let declares a block-scoped variable that can be updated but not re-declared within the same scope.
• const declares a block-scoped variable that cannot be updated or re-declared.

9. What are arrow functions and how do they differ from regular functions?

Arrow functions provide a shorter syntax for writing functions and do not have their own this, arguments, super, or new.target. They inherit this from their surrounding lexical context.

Example:

// Regular function
function add(a, b) {
    return a + b;
}

// Arrow function
const add = (a, b) => a + b;

10. What is the purpose of the bind, call, and apply methods?

These methods are used to set the value of this and invoke functions with specific arguments:

• bind creates a new function with this bound to the specified value and optionally pre-set arguments.
• call invokes a function with this set to the specified value and arguments passed individually.
• apply invokes a function with this set to the specified value and arguments passed as an array.

Example:

function greet(greeting, name) {
    console.log(greeting + ', ' + name);
}

greet.call(null, 'Hello', 'World'); // Hello, World
greet.apply(null, ['Hello', 'World']); // Hello, World

const boundGreet = greet.bind(null, 'Hello');
boundGreet('World'); // Hello, World