JavaScript interview questions and answers

JavaScript is a high-level, dynamic, interpreted programming language that is commonly used for creating interactive web pages and user interfaces. It is designed to be run on web browsers, but it can also be used on servers and other devices through its various implementations.
Some key features of JavaScript include:
1. Dynamic Typing: JavaScript is a dynamically typed language, meaning that variable types are determined at runtime. This allows for greater flexibility and ease of use, but it also means that type errors can only be caught at runtime.
2. Object-Oriented Programming (OOP): JavaScript supports OOP principles such as encapsulation, inheritance, and polymorphism. Objects in JavaScript can be created using either constructor functions or object literals.
3. Functions as First-Class Citizens: Functions in JavaScript are treated as first-class citizens, meaning that they can be assigned to variables, passed as arguments to other functions, and returned as values from functions.
4. Asynchronous Programming: JavaScript supports asynchronous programming, which allows code to run in the background without blocking the main thread. This is commonly used for tasks such as fetching data from a server or animating user interfaces.
5. DOM Manipulation: JavaScript can manipulate the Document Object Model (DOM) of a web page, allowing it to change the content and style of the page in response to user interactions or other events.
6. Event-Driven Programming: JavaScript is event-driven, meaning that it can respond to user events such as clicks, scrolls, and key presses. This allows for the creation of interactive web applications that respond to user input in real-time.
Overall, JavaScript is a powerful and versatile language that is widely used in web development due to its flexibility, ease of use, and extensive ecosystem of libraries and frameworks.

In JavaScript, var, let, and const are all used for declaring variables, but they have some important differences in their behavior.
var is the oldest keyword for declaring variables in JavaScript. It has function scope, meaning that a variable declared with var inside a function is only accessible within that function. Variables declared with var can also be hoisted, which means that they are moved to the top of their scope and can be accessed before they are declared.
let and const were introduced in ECMAScript 6 and have block scope, meaning that a variable declared with let or const inside a block (such as a loop or if statement) is only accessible within that block. Unlike var, variables declared with let and const are not hoisted.
The main difference between let and const is that let variables can be reassigned to a new value, while const variables cannot be reassigned. This makes const useful for declaring variables that should never change, such as constants or configuration values.
Here's an example to illustrate the differences between var, let, and const:

function example() {
  var x = 1;
  let y = 2;
  const z = 3;

  if (true) {
    var x = 10; // This will overwrite the previous value of x
    let y = 20; // This creates a new variable y with block scope
    const z = 30; // This creates a new variable z with block scope

    console.log(x); // Output: 10
    console.log(y); // Output: 20
    console.log(z); // Output: 30
  }

  console.log(x); // Output: 10
  console.log(y); // Output: 2
  console.log(z); // Output: 3
}

example();

In this example, var x is accessible throughout the function, even within the if block, because var has function scope. let y and const z are only accessible within their respective blocks because they have block scope. The if block creates new variables y and z with block scope, while var x overwrites the previous value of x because it has function scope. Finally, outside the if block, var x retains its new value of 10, while let y retains its original value of 2, and const z retains its original value of 3.

In JavaScript, == and === are both comparison operators, but they have different behaviors.
The == operator is the equality operator, and it compares two values for equality after converting them to a common type. If the two values have different types, JavaScript will attempt to convert one or both of the values to a common type before making the comparison. This can lead to unexpected behavior, especially when comparing values of different types.
For example:

console.log(5 == "5"); // Output: true
console.log(false == 0); // Output: true
console.log(null == undefined); // Output: true

In these examples, JavaScript is converting the values to a common type before making the comparison. In the first example, the string "5" is converted to the number 5 before the comparison. In the second example, the boolean value false is converted to the number 0 before the comparison. In the third example, null and undefined are both considered to be equal when using the equality operator.
The === operator is the strict equality operator, and it compares two values for equality without converting them to a common type. If the two values have different types, the comparison will return false. This is generally considered to be a safer and more predictable way to compare values.
For example:

console.log(5 === "5"); // Output: false
console.log(false === 0); // Output: false
console.log(null === undefined); // Output: false

In these examples, the strict equality operator returns false because the values have different types.
In general, it's recommended to use the strict equality operator === instead of the equality operator == whenever possible, to avoid unexpected behavior and make code easier to understand.

In JavaScript, there are two main ways to define a function: function declaration and function expression.
A function declaration defines a named function using the function keyword, followed by the name of the function and a pair of parentheses, like this:

function add(x, y) {
  return x + y;
}

A function declaration is "hoisted" to the top of its scope, which means that it can be called from anywhere in the scope, even before it is defined.
A function expression defines a function as part of an expression, usually by assigning it to a variable. For example:

const add = function(x, y) {
  return x + y;
}

In this case, the function is defined as an anonymous function, and then assigned to a variable called add. Function expressions are not hoisted, which means that they cannot be called before they are defined.
There are a few other differences between function declarations and function expressions:
- Function declarations can only be defined at the top level of a block or function, while function expressions can be defined anywhere that an expression is allowed.- Function declarations create a new symbol in the current scope, while function expressions create a new variable with the function as its value.- Function declarations have a name that can be used inside the function, while function expressions can be anonymous or named.
Here's an example to illustrate the differences:

// Function declaration
console.log(add(2, 3)); // Output: 5

function add(x, y) {
  return x + y;
}

// Function expression
const subtract = function(x, y) {
  return x - y;
}

console.log(subtract(5, 2)); // Output: 3

In this example, we can see that the function declaration for add is hoisted to the top of the scope, so it can be called before it is defined. The function expression for subtract is assigned to a variable and cannot be called before it is defined.

Here's an example of a JavaScript program that calculates the first n Fibonacci numbers using loops and functions:

function fibonacci(n) {
  let fib = [0, 1];
  for (let i = 2; i < n; i++) {
    fib[i] = fib[i - 1] + fib[i - 2];
  }
  return fib;
}

let n = 10;
let result = fibonacci(n);
console.log(`The first ${n} Fibonacci numbers are: ${result}`);

In this program, we define a function called fibonacci that takes an argument n and returns an array of the first n Fibonacci numbers. The function initializes an array called fib with the first two numbers in the sequence (0 and 1), and then uses a for loop to calculate the remaining numbers. The loop starts at 2 (since we already have the first two numbers), and calculates each subsequent number by adding the previous two numbers in the sequence.
We then call the fibonacci function with an argument of 10, which will return an array containing the first 10 Fibonacci numbers. Finally, we log a message to the console displaying the result.

In JavaScript, null and undefined are both special values that represent the absence of a value, but they are used in slightly different ways.
undefined is a primitive value that is automatically assigned to a variable that has not been initialized or to a function that does not return a value. For example:

let myVariable;
console.log(myVariable); // Output: undefined

function myFunction() {
  // This function does not return a value
}

console.log(myFunction()); // Output: undefined

In these examples, myVariable is declared but not initialized, so it has the value of undefined. The myFunction function does not return a value, so it also has the value of undefined.
null, on the other hand, is an explicit value that represents the absence of any object value. It is typically used when a variable or property should have an explicit "no value" state. For example:

let myVariable = null;
console.log(myVariable); // Output: null

In this example, we're explicitly setting myVariable to null, which represents an absence of any object value.
Here are some additional differences between null and undefined:
- undefined is a primitive value, while null is an object.- undefined is the default value of uninitialized variables, while null must be assigned explicitly.- undefined is used when a variable or property has not been assigned a value, while null is used to represent an intentional absence of any object value.
It's worth noting that null and undefined are both "falsy" values in JavaScript, which means that they will be treated as false in a boolean context.

Event bubbling is a mechanism in JavaScript where events triggered on a nested or child element "bubble up" through its parent elements in the DOM tree, eventually reaching the topmost ancestor element. 
Here's how it works: when an event is triggered on an element, such as a click event on a button, that event is first handled by the innermost element that was clicked. This is called the "target" element. Then, the event bubbles up through all of the ancestor elements of the target element, one level at a time, until it reaches the topmost ancestor element. This is called the "capturing" phase. Finally, the event triggers on the topmost ancestor element, and then bubbles down through all of the ancestor elements back to the target element. This is called the "bubbling" phase. 
During the bubbling phase, each ancestor element can choose to handle the event if it wants to. This means that a single event on a child element can trigger multiple event handlers on its parent elements. 
Here's an example to illustrate event bubbling:

<div id="outer">
  <div id="middle">
    <button id="inner">Click me</button>
  </div>
</div>

In this example, clicking the "Click me" button will trigger a click event on the button element first, and then that event will bubble up through the middle div and finally the outer div.
You can use the addEventListener method to attach event listeners to elements, and you can use the event.stopPropagation() method to stop the event from bubbling up to parent elements.
Event bubbling can be a powerful tool for handling events in complex web applications, but it can also be a source of bugs if you're not careful. Understanding how it works is an important part of writing robust JavaScript code.

In JavaScript, you can handle errors using try-catch blocks. 
A try-catch block is a structure that lets you attempt a block of code and catch any errors that might occur. Here's how it works:
1. Wrap the block of code that might throw an error in a try block.
2. If an error occurs inside the try block, execution will immediately jump to the corresponding catch block.
3. The catch block will receive an error object that contains information about the error, such as its name and message.
4. You can then use the information in the error object to handle the error in an appropriate way, such as logging an error message or displaying a user-friendly error message.
Here's an example:

try {
  // Code that might throw an error
  const result = someFunctionThatMightThrowAnError();
  console.log(result);
} catch (error) {
  // Handle the error
  console.error('An error occurred:', error);
}

In this example, we're wrapping a call to someFunctionThatMightThrowAnError in a try block. If an error occurs inside that function, execution will jump to the corresponding catch block, which will log an error message to the console.
It's important to note that try-catch blocks should only be used for handling expected errors, such as errors that might occur due to user input or network connectivity issues. Unexpected errors, such as syntax errors or type errors, should be caught and fixed during development.
In addition to try-catch blocks, you can also use the finally block to run code that should always execute, regardless of whether an error occurs or not. The finally block runs after the try and catch blocks, and can be useful for performing cleanup tasks or releasing resources.
Here's an example:

try {
  // Code that might throw an error
  const result = someFunctionThatMightThrowAnError();
  console.log(result);
} catch (error) {
  // Handle the error
  console.error('An error occurred:', error);
} finally {
  // Perform cleanup tasks
  console.log('Done');
}

In this example, the finally block will always execute, even if an error occurs or the catch block is executed.

Here's an example of a JavaScript-based game, specifically a simple memory matching game:
HTML:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Memory Matching Game</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div id="game-board">
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
	</div>
	<script src="app.js"></script>
</body>
</html>

CSS:

#game-board {
	display: flex;
	flex-wrap: wrap;
	width: 400px;
	margin: 0 auto;
}

.card {
	width: 50px;
	height: 50px;
	margin: 10px;
	background-color: #ccc;
	cursor: pointer;
}

JavaScript:

const cards = document.querySelectorAll('.card');

let hasFlippedCard = false;
let lockBoard = false;
let firstCard, secondCard;

function flipCard() {
	if (lockBoard) return;
	if (this === firstCard) return;

	this.classList.add('flip');

	if (!hasFlippedCard) {
		hasFlippedCard = true;
		firstCard = this;
		return;
	}

	secondCard = this;

	checkForMatch();
}

function checkForMatch() {
	let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;

	isMatch ? disableCards() : unflipCards();
}

function disableCards() {
	firstCard.removeEventListener('click', flipCard);
	secondCard.removeEventListener('click', flipCard);

	resetBoard();
}

function unflipCards() {
	lockBoard = true;

	setTimeout(() => {
		firstCard.classList.remove('flip');
		secondCard.classList.remove('flip');

		resetBoard();
	}, 1000);
}

function resetBoard() {
	[hasFlippedCard, lockBoard] = [false, false];
	[firstCard, secondCard] = [null, null];
}

(function shuffle() {
	cards.forEach(card => {
		let randomPos = Math.floor(Math.random() * 8);
		card.style.order = randomPos;
	});
})();

cards.forEach(card => card.addEventListener('click', flipCard));

This game involves clicking on two cards to flip them over and see if they match. If they do match, the cards stay flipped over, and if they don't match, they flip back over. The game continues until all cards are matched. The JavaScript code above handles the game logic, including shuffling the cards, checking for matches, and disabling or flipping back over the cards as needed.

In JavaScript, synchronous programming is the traditional programming model in which code is executed sequentially, one line at a time. This means that each line of code has to finish executing before the next line can begin executing.
In contrast, asynchronous programming is a model in which code is executed non-sequentially, allowing multiple operations to be performed simultaneously. In asynchronous programming, a task can be started and the program can continue to run while the task is being completed. When the task is finished, a callback function is called to handle the result.
Asynchronous programming is often used in situations where a task may take a long time to complete, such as making a network request or reading a large file. Instead of waiting for the task to complete before moving on to the next line of code, the program can continue running, allowing the user to interact with the application while the task is being performed.
Here's an example of synchronous code:

console.log('Line 1');
console.log('Line 2');
console.log('Line 3');

In this code, each line will be executed one after the other, in the order they appear.
Here's an example of asynchronous code:

console.log('Line 1');
setTimeout(() => {
  console.log('Line 2');
}, 1000);
console.log('Line 3');

In this code, the setTimeout function is used to delay the execution of the callback function by one second. The console.log('Line 3') statement will be executed before the callback function, because the delay ensures that the callback function is not executed immediately.
In summary, synchronous programming executes code sequentially, one line at a time, while asynchronous programming allows for non-sequential execution, enabling tasks to be performed simultaneously, with the help of callbacks, promises or async/await functions.