1. What is JavaScript, and how does it differ from Java?
JavaScript is a lightweight, interpreted programming language primarily used for web development. Unlike Java, which is a full-fledged, object-oriented programming language, JavaScript is a scripting language embedded within HTML pages to enhance interactivity.
2. Explain the concept of closures in JavaScript.
Closures occur when a function retains access to variables from its outer scope, even after the outer function has finished executing. This allows for the creation of private variables and encapsulation of functionality.
function outerFunction() {
let outerVariable = 10;
function innerFunction() {
console.log(outerVariable);
}
return innerFunction;
}
const closureExample = outerFunction();
closureExample(); // Outputs: 103. What is the event loop in JavaScript?
The event loop manages the execution of code, handling events and executing callbacks. It consists of a message queue, an event loop, and a callback or “message handler.”
4. Describe the differences between let, const, and var.
varis function-scoped and hoisted.letandconstare block-scoped, andconstdoes not allow reassignment.
function example() {
if (true) {
var x = 5; // Function-scoped
let y = 10; // Block-scoped
const z = 15; // Block-scoped and cannot be reassigned
}
console.log(x); // Outputs: 5
console.log(y); // Error: y is not defined
console.log(z); // Error: z is not defined
}5. How does prototypal inheritance work in JavaScript?
JavaScript uses prototypal inheritance, where objects can inherit properties and methods from other objects. Each object has a prototype chain, and if a property or method is not found in the object, JavaScript looks up the chain until it finds it.
function Animal(name) {
this.name = name;
}
Animal.prototype.sound = function () {
console.log("Some generic sound");
};
function Dog(name, breed) {
Animal.call(this, name);
this.breed = breed;
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.sound = function () {
console.log("Bark!");
};
const myDog = new Dog("Buddy", "Labrador");
myDog.sound(); // Outputs: Bark!6. Explain the concept of Promises and how they differ from callbacks.
Promises provide a more structured way to handle asynchronous operations compared to callbacks. They represent the eventual completion or failure of an asynchronous operation. Here’s a basic example:
function asyncOperation() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const success = true;
if (success) {
resolve("Operation successful");
} else {
reject("Operation failed");
}
}, 2000);
});
}
asyncOperation()
.then((result) => {
console.log(result);
})
.catch((error) => {
console.error(error);
});7. What is the significance of the ‘this’ keyword in JavaScript?
The this keyword refers to the current execution context and varies depending on how a function is called. In a method, it refers to the object the method is called on, while in a regular function, it refers to the global object (window in browsers).
8. How does the ES6 arrow function differ from regular functions?
Arrow functions have a shorter syntax, do not bind their own this, arguments, super, or new.target, and are unable to be used as constructors. They are especially useful for concise one-liner functions.
// Regular function
function regularFunction(x) {
return x * 2;
}
// Arrow function
const arrowFunction = (x) => x * 2;9. What is the purpose of the ‘use strict’ statement?
‘use strict’ is a pragma that enables a stricter parsing and error handling mode in JavaScript. It helps catch common coding mistakes and prevents the use of certain error-prone features.
"use strict";
// Code in strict mode10. Explain the concept of debouncing in JavaScript.
Debouncing is a technique used to ensure that time-consuming tasks do not fire so often, slowing down the performance. It involves delaying the execution of a function until after a certain period of inactivity.
function debounce(func, delay) {
let timeoutId;
return function () {
const context = this;
const args = arguments;
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
func.apply(context, args);
}, delay);
};
}
// Usage
const debouncedFunction = debounce(() => {
console.log("Debounced function called");
}, 300);11. What is the difference between ‘null’ and ‘undefined’ in JavaScript?
null is an assigned value representing the absence of an object, while undefined is a variable that has been declared but not assigned any value.
let x; // undefined
let y = null; // null12. How does ‘hoisting’ work in JavaScript?
Hoisting is a JavaScript behavior where variable and function declarations are moved to the top of their containing scope during compilation, allowing them to be used before they are declared.
console.log(a); // Outputs: undefined
var a = 5;13. Explain the concept of the same-origin policy and how it affects AJAX requests.
The same-origin policy is a security measure that restricts web pages from making requests to a different domain than the one that served the web page. AJAX requests must adhere to this policy, limiting cross-origin requests.
14. What are the different ways to create objects in JavaScript?
Objects can be created using object literals, the Object constructor, or by creating instances of custom constructor functions using the new keyword. In ES6, the class syntax provides another way to create objects.
// Object literal
const objLiteral = { key: "value" };
// Object constructor
const objConstructor = new Object();
// Constructor function
function Person(name) {
this.name = name;
}
const personObj = new Person("John");
// ES6 class
class Car {
constructor(make) {
this.make = make;
}
}
const carObj = new Car("Toyota");15. Describe the purpose of the ‘bind’ method in JavaScript.
The bind method is used to create a new function with a specified this value and initial arguments. It allows for explicit control over the context in which a function is invoked.
const obj = {
x: 10,
getX: function () {
return this.x;
},
};
const unboundGetX = obj.getX;
const boundGetX = unboundGetX.bind(obj);
console.log(unboundGetX()); // Outputs: undefined (this.x is undefined in this context)Certainly! Here are questions 16 to 20 with code examples where applicable:
16. Explain the concept of the Virtual DOM in the context of React.js.
The Virtual DOM is a lightweight copy of the actual DOM in a React application. React uses it to efficiently update and render the UI by minimizing direct manipulations to the real DOM, resulting in improved performance.
// Virtual DOM example in React
const element = (
<div>
<h1>Hello, Virtual DOM!</h1>
<p>This is a React component.</p>
</div>
);
// React renders the virtual DOM
ReactDOM.render(element, document.getElementById("root"));17. What are the differences between ‘==’ and ‘===’ in JavaScript?
‘==’ is the equality operator, which performs type coercion if the operands are of different types. ‘===’ is the strict equality operator, which requires both the value and the type to be the same.
const num = 5;
const strNum = "5";
console.log(num == strNum); // Outputs: true (type coercion)
console.log(num === strNum); // Outputs: false (strict equality)18. How does ‘localStorage’ differ from ‘sessionStorage’ in JavaScript?
Both ‘localStorage’ and ‘sessionStorage’ are Web Storage APIs that allow for storing key/value pairs in a web browser. The main difference is that ‘localStorage’ persists even after the browser is closed, while ‘sessionStorage’ is limited to the duration of a page session.
// Using localStorage
localStorage.setItem("user", "John");
console.log(localStorage.getItem("user")); // Outputs: John
// Using sessionStorage
sessionStorage.setItem("token", "abc123");
console.log(sessionStorage.getItem("token")); // Outputs: abc12319. Explain the concept of currying in JavaScript.
Currying is a technique in functional programming where a function with multiple arguments is transformed into a series of functions, each taking a single argument. This allows for partial application of the function, making it more versatile.
// Currying example
function curryAdd(x) {
return function (y) {
return function (z) {
return x + y + z;
};
};
}
const result = curryAdd(1)(2)(3);
console.log(result); // Outputs: 620. What is the significance of the ‘async/await’ syntax in JavaScript?
‘async/await’ is a syntax for handling asynchronous code in a more readable and synchronous-like manner. It allows developers to write asynchronous code that looks similar to synchronous code, making it easier to reason about and debug.
// Async/await example
function fetchData() {
return new Promise((resolve) => {
setTimeout(() => {
resolve("Data fetched");
}, 2000);
});
}
async function getData() {
try {
const result = await fetchData();
console.log(result);
} catch (error) {
console.error(error);
}
}
getData();These examples provide insights into key JavaScript concepts. Feel free to explore each concept further and experiment with additional examples to deepen your understanding.