Mastering Advanced JavaScript: Key Topics and Interview Questions

JavaScript is an essential language for modern web development, but mastering its advanced concepts can set you apart as a developer. In this blog, we’ll explore key advanced JavaScript topics and provide interview questions with answers and examples to help you excel in your next interview.

1. Closures

What is a closure?

A closure is a function that retains access to its outer scope even after the outer function has returned.

Example:

function outerFunction(outerVariable) {
    return function innerFunction(innerVariable) {
        console.log(`Outer Variable: ${outerVariable}, Inner Variable: ${innerVariable}`);
    };
}

const closureFunction = outerFunction("Hello");
closureFunction("World");

Output:

Outer Variable: Hello, Inner Variable: World

Interview Question:

Q: How can closures be used in practical scenarios? A: Closures are useful for data hiding, such as implementing private variables in JavaScript or maintaining state in asynchronous callbacks.

2. Promises and Async/Await

What are Promises?

Promises represent a value that may be available now, in the future, or never. They allow for better handling of asynchronous operations.

Example with Async/Await:

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve("Data fetched"), 2000);
    });
}

async function getData() {
    try {
        const data = await fetchData();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

getData();

Output:

Data fetched

Interview Question:

Q: What is the difference between Promise.then() and async/await? A: Promise.then() is a method used to handle promises, while async/await provides syntactic sugar to make asynchronous code look synchronous, improving readability.

3. Event Loop and Concurrency Model

How does the Event Loop work?

The Event Loop handles the execution of JavaScript code, including callbacks and asynchronous tasks.

Example:

console.log("Start");

setTimeout(() => {
    console.log("Timeout");
}, 0);

console.log("End");

Output:

Start
End
Timeout

Interview Question:

Q: Explain the difference between the call stack and the event loop. A: The call stack keeps track of function execution, while the event loop ensures that asynchronous tasks, such as callbacks, are executed once the stack is empty.

4. Prototypes and Inheritance

What are prototypes in JavaScript?

Prototypes allow objects to inherit properties and methods from other objects.

Example:

function Person(name) {
    this.name = name;
}

Person.prototype.greet = function() {
    console.log(`Hello, my name is ${this.name}`);
};

const person1 = new Person("Alice");
person1.greet();

Output:

Hello, my name is Alice

Interview Question:

Q: How does prototypal inheritance differ from classical inheritance? A: Prototypal inheritance is based on objects inheriting directly from other objects, while classical inheritance relies on class hierarchies.

5. Currying

What is currying?

Currying transforms a function with multiple arguments into a sequence of functions, each taking a single argument.

Example:

function multiply(a) {
    return function(b) {
        return a * b;
    };
}

const multiplyByTwo = multiply(2);
console.log(multiplyByTwo(5));

Output:

Interview Question:

Q: Why use currying in JavaScript? A: Currying enables partial application, which can improve code reusability and readability.

6. Module Systems

CommonJS vs. ES Modules

CommonJS: Used in Node.js, modules are loaded synchronously using require().
ES Modules: Native to JavaScript, modules are loaded asynchronously using import and export.

Example:

// ES Module
export function greet() {
    console.log("Hello, World!");
}

// Import in another file
import { greet } from './module.js';
greet();

Interview Question:

Q: What are the benefits of using ES Modules over CommonJS?

A: ES Modules support tree-shaking for optimizing bundle sizes and are natively supported in modern browsers.