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 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: 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:

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();

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.

The above is the detailed content of Mastering Advanced JavaScript: Key Topics and Interview Questions. For more information, please follow other related articles on the PHP Chinese website!