This comprehensive guide equips you with the top 10 JavaScript interview questions asked in 2024, along with clear explanations and code examples. Whether you’re a seasoned developer or just starting out, this resource will boost your confidence and help you land your dream job.
Table of Content:
- What is Hoisting in JavaScript?
- Explain
**this**keyword. - What are the Different Ways to Create Objects in JavaScript?
- What is a Prototype in JavaScript?
- What is the
**typeof**Operator in JavaScript? - What are Arrow Functions?
- Explain Asynchronous JavaScript. What are Promises?
- What is the Event Loop?
- What is the Spread Operator and How is it Used?
- How Do You Handle Errors in JavaScript Code?
1. What is Hoisting in JavaScript?
Ans: Hoisting is the default behavior in JavaScript where declarations of variables and functions are moved to the top of their respective scopes during the compilation phase. This ensures that regardless of where variables and functions are declared within a scope, they are accessible throughout that scope.
Code Example:
console.log(message);
// Outputs: undefined (variable hoisted, but not assigned)
var message = "Hoisting at work!";
function sayHi() {
console.log("Hello!");
}
sayHi(); // Works because function declarations are hoisted
2. Explain **this** keyword.
Ans: In JavaScript, **this** keyword refers to the current context or scope within which code is executing. Its value is determined by how a function is called, and it can dynamically change depending on the invocation context.
The this keyword refers to different objects depending upon how it is used:
- When used within a method of an object,
thispoints to that object. - When used by itself,
thispoints to the global object. - Within a function,
thistypically points to the global object. - In a function under strict mode,
thisbecomes undefined. - During an event,
thispoints to the element that triggered the event. - Methods such as
call(),apply(), andbind()can reassignthisto any desired object.
Example:
const person = {
name: 'Lokesh',
greet: function() { console.log(`Hello, ${this.name}`); }
};
person.greet(); // Output: Hello, Lokesh
3. What are the Different Ways to Create Objects in JavaScript?
Ans: JavaScript is a flexible object-oriented language when it comes to syntax. There are 4 ( Four ) different ways to instantiate objects in JavaScript.
Table of Content
- Creating object with a constructor
- Using object literals
- Creating object with
Object.create()method - Using es6 classes
(1) Creating object with a constructor
One of the easiest ways to instantiate an object is in JavaScript. Constructor is nothing but a function and with the help of a new keyword, the constructor function allows to creation of multiple objects of the same flavor as shown below:
Example:
function Person(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.greet = function() {
return `Hello, my name is ${this.firstName} ${this.lastName} and I am ${this.age} years old.`;
};
}
var person1 = new Person("Lokesh", "Prajapati", 25);
// Hello, my name is Lokesh Prajapati and I am 25 years old.
(2) Using Object Literals
Literals are smaller and simpler ways to define objects. We simply define the property and values inside curly braces {} as shown below.
Example:
var person = {
fName: "Lokesh",
lName: "Prajapati",
age: 25
};
console.log(person.fName) // Lokesh
console.log(person['fName']) // Lokesh
(3) Creating object with **Object.create()** method
The Object.create() method creates a new object, using an existing object as the prototype of the newly created object.
Example:
// Step 1: Define the Prototype Object
const animalPrototype = {
speak: function() {
return `${this.name} makes a sound.`;
}
};
// Step 2: Create New Objects Using Object.create()
const dog = Object.create(animalPrototype, {
name: {
value: 'Buddy',
writable: true,
enumerable: true,
configurable: true
},
breed: {
value: 'Golden Retriever',
writable: true,
enumerable: true,
configurable: true
}
});
const cat = Object.create(animalPrototype, {
name: {
value: 'Whiskers',
writable: true,
enumerable: true,
configurable: true
},
breed: {
value: 'Siamese',
writable: false,
enumerable: true,
configurable: true
}
});
// Step 3: Access Inherited and Own Properties
console.log(dog.speak()); // Outputs: Buddy makes a sound.
console.log(dog.name); // Outputs: Buddy
console.log(dog.breed); // Outputs: Golden Retriever
console.log(cat.speak()); // Outputs: Whiskers makes a sound.
console.log(cat.name); // Outputs: Whiskers
console.log(cat.breed); // Outputs: Siamese
// Additional example of modifying properties if writable
dog.name = 'Max';
console.log(dog.name);
// Outputs: Max (name changed because it's writable)
// Attempt to change the breed of the cat
cat.breed = 'Persian';
console.log(cat.breed);
// Outputs: Siamese (breed not changed because it's not writable)
(4) Using es6 classes
Using ES6 classes in JavaScript provides a more structured and syntactically pleasant way to handle object creation and inheritance compared to the older prototype-based approach. ES6 classes streamline the prototype-based object-oriented programming model by introducing a simpler syntax for creating objects and handling inheritance.
Example:
class Employee extends Person {
constructor(firstName, lastName, age, jobTitle) {
super(firstName, lastName, age); // Calls the parent class constructor
this.jobTitle = jobTitle;
}
describe() {
return `${super.greet()} I work as a ${this.jobTitle}.`;
}
}
const employee1 = new Employee("Jane", "Smith", 28, "Software Developer");
console.log(employee1.greet());
// Outputs: Hello, my name is Jane Smith and I am 28 years old.
console.log(employee1.describe());
// Outputs: Hello, my name is Jane Smith and I am 28 years old.
// I work as a Software Developer.
4. What is a Prototype in JavaScript?
Ans: JavaScript is a prototype based language, so, whenever we create a function using JavaScript, JavaScript engine adds a prototype property inside a function, Prototype property is basically an object (also known as Prototype object), where we can attach methods and properties in a prototype object, which enables all the other objects to inherit these methods and properties.
Example:
function Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
}
// Add a method to the prototype
Car.prototype.drive = function() {
console.log("Driving the " + this.make + " " + this.model);
};
const myCar = new Car("Honda", "Civic", 2022);
console.log(Object.getPrototypeOf(myCar));
// Outputs: Car { drive: function() ... } (the prototype object)
myCar.drive(); // Outputs: "Driving the Honda Civic" (inherited method)
5. What is the **typeof** Operator in JavaScript?
Ans: typeof is a JavaScript keyword that will return the type of a variable when you call it. You can use this to validate function parameters or check if variables are defined. There are other uses as well.
The typeof operator is useful because it is an easy way to check the type of a variable in your code. This is important because JavaScript is a is a dynamically typed language. This means that you aren’t required to assign types to variables when you create them. Because a variable is not restricted in this way, its type can change during the runtime of a program.
Example:
const num = 42;
const message = "Hello, world!";
let uninitializedVar;
const myArray = [1, 2, 3];
const myFunction = function() {};
console.log(typeof num); // Outputs: "number"
console.log(typeof message); // Outputs: "string"
console.log(typeof uninitializedVar); // Outputs: "undefined"
console.log(typeof myArray); // Outputs: "object"
console.log(typeof myFunction); // Outputs: "function"
console.log(typeof null); // Outputs: "object" (**special case**)
6. What are Arrow Functions?
Ans: Arrow function **const a = () => {}** is concise way of writing JavaScript functions in shorter way. Arrow functions were introduced in the ES6 version. They make our code more structured and readable.
Arrow functions are anonymous functions i.e. functions without a name but they are often assigned to any variable. They are also called Lambda Functions.
Example:
const sayHello = () => {
console.log("Hello!");
};
sayHello(); // Outputs: Hello!
7. Explain Asynchronous JavaScript. What are Promises?
Ans: Asynchronous JavaScript: JavaScript is a single-threaded language, meaning it can only execute one task at a time. However, modern web applications often rely on operations that take time to complete, like fetching data from a server or reading from a file. This is where asynchronous programming comes in.
Asynchronous programming allows JavaScript to perform these time-consuming operations without blocking the main thread. This means your application can continue to respond to user input and remain interactive while waiting for results.
Promises: Promises are objects that represent the eventual completion (or failure) of an asynchronous operation. They provide a way to handle the results of these operations in a more structured and readable way compared to traditional callbacks.
Example:
function fetchData(url) {
return fetch(url)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok ' + response.statusText);
}
return response.json();
});
}
const apiUrl = 'api.example.com/data';
fetchData(apiUrl)
.then(data => {
console.log("Data fetched successfully:", data);
})
.catch(error => {
console.error("Error fetching data:", error);
});
8. What is Even Loop in JavaScript?
Ans: In JavaScript, the event loop is a fundamental mechanism that enables the asynchronous execution of code. It’s an essential part of the JavaScript runtime environment, allowing the language to handle non-blocking operations efficiently. The event loop is responsible for managing the execution of code, handling events, and maintaining the flow of control.
How do Event loops work?
- Call Stack: JavaScript uses a call stack to keep track of the currently executing function (where the program is in its execution).
- Callback Queue: Asynchronous operations, such as I/O operations or timers, are handled by the browser or Node.js runtime. When these operations are complete, corresponding functions (callbacks) are placed in the callback queue.
- Event Loop: The event loop continuously checks the call stack and the callback queue. If the call stack is empty, it takes the first function from the callback queue and pushes it onto the call stack for execution.
- Execution: The function on top of the call stack is executed. If this function contains asynchronous code, it might initiate further asynchronous operations.
- Callback Execution: When an asynchronous operation is complete, its callback is placed in the callback queue.
- Repeat: The event loop continues this process, ensuring that the call stack is always empty before taking the next function from the callback queue.
Execution Order:
- Execute all synchronous code first. This code is put onto the call stack and executed immediately.
- Check the Microtask Queue and execute tasks there until it is empty.
- Process tasks in the Task Queue only when the call stack is empty and after all microtasks are processed
Example:
console.log('Start');
setTimeout(() => {
console.log('Timeout 1');
}, 0);
Promise.resolve().then(() => {
console.log('Promise 1');
}).then(() => {
console.log('Promise 2');
});
console.log('End');
/*
Output:
Start
End
Promise 1
Promise 2
Timeout 1
*/
9. What is the Spread Operator and How is it Used?
Ans: The spread operator **(...)** is a feature of JavaScript introduced with ES6 that gives you access to the insides of an iterable object. An “iterable object” is anything you can iterate over item by item, such as arrays, objects literals, and strings. These kinds of JavaScript types can be traversed in some sequential fashion. For example, you can use a for loop on an array, or with JavaScript objects, you can use for...in loops.
Example:
const numbers = [4, 5, 1, 8];
const max = Math.max(...numbers);
console.log(max); // Outputs: 8
10. How Do You Handle Errors in JavaScript Code?
Ans: Error handling in JavaScript is a process to detect and handle errors that occurs during the execution of a program. Errors can be a syntax, runtime or logical errors. An error occurred during the execution of the program is called a runtime error or an exception.
In JavaScript, errors can occur due to programming mistakes, incorrect user input, etc. Errors can disrupt code execution and lead to bad user experience. Effective error & exception handling is required for building robust, reliable and user friendly applications in JavaScript.
JavaScript provides several mechanisms for catching and managing errors that can occur during program execution. These include using try-catch blocks, throwing custom errors, and handling rejected promises.
1. Using Try-Catch for Synchronous Code
The try-catch statement is a fundamental method for handling errors in synchronous JavaScript code. It allows you to define a block of code to try and specify a response should an exception be thrown.
try {
// Code that may throw an exception
const result = someFunctionThatMightThrow();
console.log(result);
} catch (error) {
// Code to handle the exception
console.error('Error encountered:', error);
}
2. Throwing Custom Event.
You can throw custom errors using the throw statement. This is useful when you want to create custom error handling logic or to throw specific types of errors based on certain conditions.
function checkAge(age) {
if (age < 18) {
throw new Error('Access denied - you are too young!');
} else {
console.log('Access granted');
}
}
try {
checkAge(15);
} catch (error) {
console.error(error.message);
}
3. Finally Block
The finally block executes after the try and catch blocks have completed and after any errors have been handled. It runs regardless of whether an error was thrown or not, making it useful for cleaning up resources or other finalizing operations.
try {
// Code that might throw
} catch (error) {
// Handle errors
} finally {
// Code that will run regardless of try / catch outcome
console.log('This always executes');
}
4. Error Handling with Promises
Promises are an essential part of asynchronous JavaScript. They come with built-in error handling using the .catch() method, which catches any errors that occur during the promise's execution.
fetch('api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Failed to fetch data:', error));
5. Async/Await Error Handling When using async/await, you can handle errors with try-catch blocks, similar to synchronous code. This makes error handling in asynchronous code more straightforward and readable.
async function fetchData() {
try {
const response = await fetch('api.example.com/data');
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Failed to fetch data:', error);
}
}
fetchData();