diff --git a/src/components/PageSponsor.tsx b/src/components/PageSponsor.tsx
index 46bce2633..c549820d0 100644
--- a/src/components/PageSponsor.tsx
+++ b/src/components/PageSponsor.tsx
@@ -105,7 +105,7 @@ export function PageSponsor(props: PageSponsorProps) {
diff --git a/src/data/question-groups/javascript/content/alert-prompt-confirm.md b/src/data/question-groups/javascript/content/alert-prompt-confirm.md
new file mode 100644
index 000000000..2f962c1bc
--- /dev/null
+++ b/src/data/question-groups/javascript/content/alert-prompt-confirm.md
@@ -0,0 +1,27 @@
+Let's see how we can use the `alert`, `prompt` and `confirm` functions to interact with the user.
+
+## alert()
+
+The `alert()` method displays an alert box with a specified message and an OK button.
+
+```js
+alert('Hello World!');
+```
+
+## prompt()
+
+The `prompt()` method displays a dialog box that prompts the visitor for input. A prompt box is often used if you want the user to input a value before entering a page. The `prompt()` method returns the input value if the user clicks OK. If the user clicks Cancel, the method returns `null`.
+
+```js
+const name = prompt('What is your name?');
+console.log(name);
+```
+
+## confirm()
+
+The `confirm()` method displays a dialog box with a specified message, along with an OK and a Cancel button. This is often used to confirm or verify something from the user.
+
+```js
+const result = confirm('Are you sure?');
+console.log(result); // true/false
+```
diff --git a/src/data/question-groups/javascript/content/append-child-vs-insert-before.md b/src/data/question-groups/javascript/content/append-child-vs-insert-before.md
new file mode 100644
index 000000000..967b2092b
--- /dev/null
+++ b/src/data/question-groups/javascript/content/append-child-vs-insert-before.md
@@ -0,0 +1,32 @@
+You can add a new element to the DOM using the `appendChild` or `insertBefore` method.
+
+## appendChild
+
+The `appendChild` method adds a new element as the last child of the specified parent element.
+
+```js
+const roadmapWrapper = document.querySelector('.roadmap-wrapper');
+
+const roadmap = document.createElement('div');
+roadmap.id = 'javascript-roadmap';
+
+roadmapWrapper.appendChild(roadmapTitle);
+```
+
+In the example above, the `roadmap` element is added as the last child of the `roadmapWrapper` element.
+
+## insertBefore
+
+The `insertBefore` method adds a new element before the specified child element.
+
+```js
+const roadmapWrapper = document.querySelector('.roadmap-wrapper');
+
+const roadmap = document.createElement('div');
+roadmap.id = 'javascript-roadmap';
+
+const roadmapTitle = document.querySelector('#roadmap-title');
+roadmapWrapper.insertBefore(roadmap, roadmapTitle);
+```
+
+In the example above, the `roadmap` element is added before the `roadmapTitle` element.
diff --git a/src/data/question-groups/javascript/content/async-vs-sync.md b/src/data/question-groups/javascript/content/async-vs-sync.md
new file mode 100644
index 000000000..fe2998127
--- /dev/null
+++ b/src/data/question-groups/javascript/content/async-vs-sync.md
@@ -0,0 +1,27 @@
+The difference between Asynchronous and Synchronous code is that Asynchronous code does not block the execution of the program while Synchronous code does.
+
+## Asynchronous code
+
+Asynchronous code is executed in the background and it does not block the execution of the program. It is usually used to perform tasks that take a long time to complete, such as network requests.
+
+```js
+console.log('Before');
+
+setTimeout(() => {
+ console.log('Hello');
+}, 1000);
+
+console.log('After');
+```
+
+## Synchronous code
+
+Synchronous code is executed in sequence and it blocks the execution of the program until it is completed. If a task takes a long time to complete, everything else waits.
+
+```js
+console.log('Before');
+
+for (let i = 0; i < 1000000000; i++) {}
+
+console.log('After');
+```
diff --git a/src/data/question-groups/javascript/content/break-and-continue.md b/src/data/question-groups/javascript/content/break-and-continue.md
new file mode 100644
index 000000000..f07860b4f
--- /dev/null
+++ b/src/data/question-groups/javascript/content/break-and-continue.md
@@ -0,0 +1,28 @@
+You can use `break` and `continue` in loops to alter the flow of the loop. `break` will stop the loop from continuing, and `continue` will skip the current iteration and continue the loop.
+
+```js
+for (let i = 0; i < 5; i++) {
+ if (i === 1) {
+ continue; // skips the rest of the code in the loop
+ }
+ console.log(`i: ${i}`);
+}
+
+// Output:
+// i: 0
+// i: 2
+// i: 3
+// i: 4
+```
+
+```js
+for (let i = 0; i < 5; i++) {
+ if (i === 1) {
+ break; // stops the loop
+ }
+ console.log(`i: ${i}`);
+}
+
+// Output:
+// i: 0
+```
diff --git a/src/data/question-groups/javascript/content/callback-hell.md b/src/data/question-groups/javascript/content/callback-hell.md
new file mode 100644
index 000000000..bb243b805
--- /dev/null
+++ b/src/data/question-groups/javascript/content/callback-hell.md
@@ -0,0 +1,48 @@
+**Callback hell**, often referred to as **Pyramid of Doom**, describes a situation in JavaScript where multiple nested callbacks become difficult to manage, leading to unreadable and unmaintainable code. It often arises when performing multiple asynchronous operations that depend on the completion of previous operations. The code starts to take on a pyramidal shape due to the nesting.
+
+## Example of callback hell
+
+```js
+callAsync1(function () {
+ callAsync2(function () {
+ callAsync3(function () {
+ callAsync4(function () {
+ callAsync5(function () {
+ // ...
+ });
+ });
+ });
+ });
+});
+```
+
+## Strategies to avoid callback hell
+
+Developers can address or avoid callback hell by using strategies like modularizing the code into named functions, using asynchronous control flow libraries, or leveraging modern JavaScript features like Promises and `async/await` to write more linear, readable asynchronous code.
+
+### Promise chaining
+
+```js
+callAsync1()
+ .then(() => callAsync2())
+ .then(() => callAsync3())
+ .then(() => callAsync4())
+ .then(() => callAsync5())
+ .catch((err) => console.error(err));
+```
+
+### Async/await
+
+```js
+async function asyncCall() {
+ try {
+ await callAsync1();
+ await callAsync2();
+ await callAsync3();
+ await callAsync4();
+ await callAsync5();
+ } catch (err) {
+ console.error(err);
+ }
+}
+```
diff --git a/src/data/question-groups/javascript/content/closure.md b/src/data/question-groups/javascript/content/closure.md
new file mode 100644
index 000000000..87ad50d13
--- /dev/null
+++ b/src/data/question-groups/javascript/content/closure.md
@@ -0,0 +1,18 @@
+A closure is a function that has access to its outer function scope even after the outer function has returned. This means a closure can remember and access variables and arguments of its outer function even after the function has finished.
+
+```js
+function outer() {
+ const name = 'Roadmap';
+
+ function inner() {
+ console.log(name);
+ }
+
+ return inner;
+}
+
+const closure = outer();
+closure(); // Roadmap
+```
+
+In the above example, the `inner` function has access to the `name` variable of the `outer` function even after the `outer` function has returned. Therefore, the `inner` function forms a closure.
diff --git a/src/data/question-groups/javascript/content/comma-operator.md b/src/data/question-groups/javascript/content/comma-operator.md
new file mode 100644
index 000000000..ac8e5a723
--- /dev/null
+++ b/src/data/question-groups/javascript/content/comma-operator.md
@@ -0,0 +1,8 @@
+The Comma Operator `,` evaluates each of its operands (from left to right) and returns the value of the last operand.
+
+```js
+let x = 1;
+x = (x++, x);
+
+console.log(x); // 2
+```
diff --git a/src/data/question-groups/javascript/content/create-element.md b/src/data/question-groups/javascript/content/create-element.md
new file mode 100644
index 000000000..845da793b
--- /dev/null
+++ b/src/data/question-groups/javascript/content/create-element.md
@@ -0,0 +1,9 @@
+To create a new DOM element, you can use the `document.createElement` method. It accepts a tag name as an argument and returns a new element with the specified tag name. You can set attributes to the element.
+
+```js
+const div = document.createElement('div');
+
+div.id = 'roadmap-wrapper';
+div.setAttribute('data-id', 'javascript');
+console.log(div); //
+```
diff --git a/src/data/question-groups/javascript/content/custom-event.md b/src/data/question-groups/javascript/content/custom-event.md
new file mode 100644
index 000000000..152e5035d
--- /dev/null
+++ b/src/data/question-groups/javascript/content/custom-event.md
@@ -0,0 +1,33 @@
+You can use the `CustomEvent` constructor to create a custom event. The `CustomEvent` constructor accepts two arguments: the event name and an optional object that specifies the event options. And you can use the `dispatchEvent` method to dispatch the custom event on the target element/document.
+
+## Creating Custom Events
+
+```js
+const event = new CustomEvent('roadmap-updated', {
+ detail: { name: 'JavaScript' },
+});
+element.dispatchEvent(event);
+```
+
+## Listening for Custom Events
+
+You can listen for custom events using the `addEventListener` method. The `addEventListener` method accepts the event name and a callback function that is called when the event is dispatched.
+
+```js
+element.addEventListener('roadmap-updated', (event) => {
+ console.log(event.detail); // { name: 'JavaScript' }
+});
+```
+
+## Removing Event Listeners
+
+You can remove event listeners using the `removeEventListener` method. The `removeEventListener` method accepts the event name and the callback function that was used to add the event listener.
+
+```js
+function handleEvent(event) {
+ console.log(event.detail); // { name: 'JavaScript' }
+}
+
+element.addEventListener('roadmap-updated', handleEvent);
+element.removeEventListener('roadmap-updated', handleEvent);
+```
diff --git a/src/data/question-groups/javascript/content/debug-javascript.md b/src/data/question-groups/javascript/content/debug-javascript.md
new file mode 100644
index 000000000..319764e68
--- /dev/null
+++ b/src/data/question-groups/javascript/content/debug-javascript.md
@@ -0,0 +1,38 @@
+Debugging JavaScript code can be achieved through various methods and tools. Here's a basic guide:
+
+## Console Logging:
+
+You can use `console.log()`, `console.warn()`, `console.error()`, etc., to print values, variables, or messages to the browser's developer console.
+
+```js
+console.log('Value of x:', x);
+```
+
+## Browser Developer Tools:
+
+Most modern browsers come equipped with developer tools. You can access these tools by pressing `F12` or right-clicking on the web page and selecting `Inspect` or `Inspect Element`.
+
+- **Sources Tab**: Allows you to see the loaded scripts, set breakpoints, and step through the code.
+- **Console Tab**: Displays console outputs and allows for interactive JavaScript execution.
+- **Network Tab**: Helps in checking network requests and responses.
+
+## Setting Breakpoints:
+
+In the `Sources` tab of the browser's developer tools, you can click on a line number to set a breakpoint. The code execution will pause at this line, allowing you to inspect variables, the call stack, and continue step-by-step.
+
+## Debugger Statement:
+
+Inserting the `debugger;` statement in your code will act as a breakpoint when the browser developer tools are open. Execution will pause at the `debugger;` line.
+
+```js
+function myFunction() {
+ debugger; // Execution will pause here when dev tools are open
+ // ... rest of the code
+}
+```
+
+## Call Stack and Scope:
+
+In the developer tools, when paused on a breakpoint or `debugger;` statement, you can inspect the `call stack` to see the sequence of function calls. The `Scope` panel will show you the values of local and global variables.
+
+Remember, debugging is an iterative process. It often involves setting breakpoints, checking variables, adjusting code, and re-running to ensure correctness.
diff --git a/src/data/question-groups/javascript/content/defer-vs-async.md b/src/data/question-groups/javascript/content/defer-vs-async.md
new file mode 100644
index 000000000..74c032c6e
--- /dev/null
+++ b/src/data/question-groups/javascript/content/defer-vs-async.md
@@ -0,0 +1,25 @@
+The main difference between `defer` and `async` is the order of execution.
+
+## Defer attribute
+
+A `
+
+```
+
+In the example above, `script1.js` will be executed before `script2.js`. The browser will download both scripts in parallel, but `script1.js` will be executed after the HTML page has been parsed and `script2.js` will be executed after `script1.js` has been executed.
+
+## Async attribute
+
+On the other hand, A `
+
+```
+
+In the example above, the browser will download both scripts in parallel, and execute them as soon as they are downloaded. The order of execution is not guaranteed.
+
+To know more you can check [this diagram](https://roadmap.sh/guides/avoid-render-blocking-javascript-with-async-defer) from us that explains the difference between `defer` and `async` in a visual way.
diff --git a/src/data/question-groups/javascript/content/do-while-loop.md b/src/data/question-groups/javascript/content/do-while-loop.md
new file mode 100644
index 000000000..a1fd3a5b8
--- /dev/null
+++ b/src/data/question-groups/javascript/content/do-while-loop.md
@@ -0,0 +1,14 @@
+The `do...while` statement creates a loop that executes a block of code once, before checking if the condition is `true`, then it will repeat the loop as long as the condition is `true`.
+
+```js
+let i = 0;
+
+do {
+ console.log(i);
+ i++;
+} while (i < 3);
+
+// 0
+// 1
+// 2
+```
diff --git a/src/data/question-groups/javascript/content/equality-operator.md b/src/data/question-groups/javascript/content/equality-operator.md
new file mode 100644
index 000000000..b3204e858
--- /dev/null
+++ b/src/data/question-groups/javascript/content/equality-operator.md
@@ -0,0 +1,7 @@
+The `==` equality operator converts the operands if they are not of the same type, then applies strict comparison. The `===` strict equality operator only considers values equal that have the same type.
+
+```js
+console.log(1 == '1'); // true
+console.log(1 === '1'); // false
+console.log(1 === 1); // true
+```
diff --git a/src/data/question-groups/javascript/content/error-in-async-await.md b/src/data/question-groups/javascript/content/error-in-async-await.md
new file mode 100644
index 000000000..8e6757fbf
--- /dev/null
+++ b/src/data/question-groups/javascript/content/error-in-async-await.md
@@ -0,0 +1,24 @@
+In order to handle errors in async/await, we can use the `try/catch` statement.
+
+## Rejecting a promise
+
+```js
+const promise = new Promise((resolve, reject) => {
+ reject(new Error('Something went wrong'));
+});
+```
+
+## Try/catch statement
+
+```js
+async function main() {
+ try {
+ const result = await promise;
+ console.log(result);
+ } catch (error) {
+ console.log(error.message);
+ }
+}
+```
+
+The `catch` block will be executed when the promise is `rejected` or when an error is thrown inside the `try` block.
diff --git a/src/data/question-groups/javascript/content/error-in-promise.md b/src/data/question-groups/javascript/content/error-in-promise.md
new file mode 100644
index 000000000..0f899cba9
--- /dev/null
+++ b/src/data/question-groups/javascript/content/error-in-promise.md
@@ -0,0 +1,38 @@
+In order to handle errors in promises, we can use the `catch` method or the second argument of the `then` method.
+
+## Rejecting a promise
+
+```js
+const promise = new Promise((resolve, reject) => {
+ reject(new Error('Something went wrong'));
+});
+```
+
+## Catch method
+
+In this method, we can pass a `callback` function that will be called when the promise is `rejected`.
+
+```js
+promise
+ .then((result) => {
+ console.log(result);
+ })
+ .catch((error) => {
+ console.log(error.message);
+ });
+```
+
+## Second argument of the then method
+
+In this method, we can pass two `callback` functions as arguments. The first one will be called when the promise is `resolved` and the second one will be called when the promise is `rejected`.
+
+```js
+promise.then(
+ (result) => {
+ console.log(result);
+ },
+ (error) => {
+ console.log(error.message);
+ }
+);
+```
diff --git a/src/data/question-groups/javascript/content/event-bubbling.md b/src/data/question-groups/javascript/content/event-bubbling.md
new file mode 100644
index 000000000..a6c0485e3
--- /dev/null
+++ b/src/data/question-groups/javascript/content/event-bubbling.md
@@ -0,0 +1,19 @@
+Event bubbling is a concept in the Document Object Model (DOM) that describes the way in which events propagate or "bubble up" through the hierarchy of nested elements in the DOM.
+
+When an event, such as a mouse click, occurs on a DOM element, the event will be handled by the element first, then its parent element, and so on, until the event reaches the root element. This behavior is called event bubbling.
+
+```js
+const parent = document.querySelector('.parent');
+const child = document.querySelector('.child');
+
+// Scenario of clicking on the child element
+parent.addEventListener('click', () => {
+ console.log('Handled Last');
+});
+
+child.addEventListener('click', () => {
+ console.log('Handled First');
+});
+```
+
+In the above example, when you click on the `child` element, the event will be handled by the `child` element first, then its parent element, and so on, to the root element unless you stop the propagation (`event.stopPropagation()`) of the event.
diff --git a/src/data/question-groups/javascript/content/event-loop.md b/src/data/question-groups/javascript/content/event-loop.md
new file mode 100644
index 000000000..3dd9c2234
--- /dev/null
+++ b/src/data/question-groups/javascript/content/event-loop.md
@@ -0,0 +1,26 @@
+The Event loop has two main components: the Call stack and the Callback queue.
+
+## Call Stack
+
+The Call stack is a data structure that stores the tasks that need to be executed. It is a LIFO (Last In, First Out) data structure, which means that the last task that was added to the Call stack will be the first one to be executed.
+
+## Callback Queue
+
+The Callback queue is a data structure that stores the tasks that have been completed and are ready to be executed. It is a FIFO (First In, First Out) data structure, which means that the first task that was added to the Callback queue will be the first one to be executed.
+
+## Event Loop's Workflow:
+
+1. Executes tasks from the Call Stack.
+2. For an asynchronous task, such as a timer, it runs in the background. JavaScript proceeds to the next task without waiting.
+3. When the asynchronous task concludes, its callback function is added to the Callback Queue.
+4. If the Call Stack is empty and there are tasks in the Callback Queue, the Event Loop transfers the first task from the Queue to the Call Stack for execution.
+
+```js
+setTimeout(() => console.log('Hello from the timer'), 0);
+console.log('Hello from the main code');
+```
+
+1. `setTimeout` is processed, and because it's asynchronous, its callback is placed in the Callback Queue.
+2. The next line, `console.log("Hello from the main code")`, is logged immediately.
+3. Although the timer duration is 0 milliseconds, its callback has to wait until the Call Stack is empty. After the main code logs, the callback is moved from the Callback Queue to the Call Stack and executed.
+4. The result is "Hello from the main code" being logged before "Hello from the timer".
diff --git a/src/data/question-groups/javascript/content/explicit-binding.md b/src/data/question-groups/javascript/content/explicit-binding.md
new file mode 100644
index 000000000..c89dfcbdb
--- /dev/null
+++ b/src/data/question-groups/javascript/content/explicit-binding.md
@@ -0,0 +1,19 @@
+Explicit binding is a way to explicitly state what the `this` keyword is going to be bound to using `call`, `apply` or `bind` methods of a function.
+
+```js
+const roadmap = {
+ name: 'JavaScript',
+};
+
+function printName() {
+ console.log(this.name);
+}
+
+printName.call(roadmap); // JavaScript
+printName.apply(roadmap); // JavaScript
+
+const printRoadmapName = printName.bind(roadmap);
+printRoadmapName(); // JavaScript
+```
+
+In the above example, the `this` keyword inside the `printName()` function is explicitly bound to the `roadmap` object using `call`, `apply` or `bind` methods.
diff --git a/src/data/question-groups/javascript/content/filter-method.md b/src/data/question-groups/javascript/content/filter-method.md
new file mode 100644
index 000000000..ad700c957
--- /dev/null
+++ b/src/data/question-groups/javascript/content/filter-method.md
@@ -0,0 +1,12 @@
+You can use the `filter()` method to filter an array based on a condition. The `filter()` method creates a new array with all elements that pass the test implemented by the provided function.
+
+```js
+const numbers = [1, 2, 3, 4, 5, 6];
+
+const evenNumbers = numbers.filter((number) => {
+ return number % 2 === 0;
+});
+
+console.log(numbers); // [1, 2, 3, 4, 5, 6]
+console.log(evenNumbers); // [2, 4, 6]
+```
diff --git a/src/data/question-groups/javascript/content/finally-block-in-promise.md b/src/data/question-groups/javascript/content/finally-block-in-promise.md
new file mode 100644
index 000000000..5a1b00f1b
--- /dev/null
+++ b/src/data/question-groups/javascript/content/finally-block-in-promise.md
@@ -0,0 +1,14 @@
+The `finally` block will be executed when the promise is `resolved` or `rejected`.
+
+```js
+promise
+ .then((result) => {
+ console.log(result);
+ })
+ .catch((error) => {
+ console.log(error.message);
+ })
+ .finally(() => {
+ console.log('Finally Promise has settled');
+ });
+```
diff --git a/src/data/question-groups/javascript/content/find-unique-array-values.md b/src/data/question-groups/javascript/content/find-unique-array-values.md
new file mode 100644
index 000000000..83ff66c08
--- /dev/null
+++ b/src/data/question-groups/javascript/content/find-unique-array-values.md
@@ -0,0 +1,55 @@
+There are serveral ways to find unique values in an array. Here are some of them:
+
+## Using `Set`
+
+```js
+const roadmaps = ['JavaScript', 'React', 'Node.js', 'Node.js', 'JavaScript'];
+const uniqueRoadmaps = [...new Set(roadmaps)];
+console.log(uniqueRoadmaps); // ['JavaScript', 'React', 'Node.js']
+```
+
+## Using `filter()`
+
+```js
+const roadmaps = ['JavaScript', 'React', 'Node.js', 'Node.js', 'JavaScript'];
+const uniqueRoadmaps = roadmaps.filter(
+ (roadmap, index) => roadmaps.indexOf(roadmap) === index
+);
+console.log(uniqueRoadmaps); // ['JavaScript', 'React', 'Node.js']
+```
+
+## Using `reduce()`
+
+```js
+const roadmaps = ['JavaScript', 'React', 'Node.js', 'Node.js', 'JavaScript'];
+const uniqueRoadmaps = roadmaps.reduce((unique, roadmap) => {
+ return unique.includes(roadmap) ? unique : [...unique, roadmap];
+}, []);
+console.log(uniqueRoadmaps); // ['JavaScript', 'React', 'Node.js']
+```
+
+## Using `forEach()`
+
+```js
+const roadmaps = ['JavaScript', 'React', 'Node.js', 'Node.js', 'JavaScript'];
+const uniqueRoadmaps = [];
+roadmaps.forEach((roadmap) => {
+ if (!uniqueRoadmaps.includes(roadmap)) {
+ uniqueRoadmaps.push(roadmap);
+ }
+});
+console.log(uniqueRoadmaps); // ['JavaScript', 'React', 'Node.js']
+```
+
+## Using `for...of`
+
+```js
+const roadmaps = ['JavaScript', 'React', 'Node.js', 'Node.js', 'JavaScript'];
+const uniqueRoadmaps = [];
+for (const roadmap of roadmaps) {
+ if (!uniqueRoadmaps.includes(roadmap)) {
+ uniqueRoadmaps.push(roadmap);
+ }
+}
+console.log(uniqueRoadmaps); // ['JavaScript', 'React', 'Node.js']
+```
diff --git a/src/data/question-groups/javascript/content/for-each-method.md b/src/data/question-groups/javascript/content/for-each-method.md
new file mode 100644
index 000000000..64826fc24
--- /dev/null
+++ b/src/data/question-groups/javascript/content/for-each-method.md
@@ -0,0 +1,9 @@
+No, the `forEach()` method does not return a new array. It simply calls a provided function on each element in the array.
+
+```js
+const roadmaps = ['JavaScript', 'React', 'Node.js'];
+
+roadmaps.forEach((roadmap) => {
+ console.log(roadmap);
+});
+```
diff --git a/src/data/question-groups/javascript/content/heap-and-stack.md b/src/data/question-groups/javascript/content/heap-and-stack.md
new file mode 100644
index 000000000..bd7ed8581
--- /dev/null
+++ b/src/data/question-groups/javascript/content/heap-and-stack.md
@@ -0,0 +1,20 @@
+The Head and Stack in JavaScript Engine are two different data structures that store data in different ways.
+
+## Stack
+
+The Stack is a small, organized region of memory. It is where primitive values, function calls, and local variables are stored. It follows a "Last In, First Out" (LIFO) order, meaning that the last item added to the stack is the first one to be removed. Each function invocation creates a new stack frame, which contains the function's local variables, return address, and other contextual data.
+
+## Heap
+
+The Heap is a large, mostly unstructured region of memory. It is where `objects`, `arrays`, and `functions` are stored. Variables from the Stack (e.g., in functions) point to locations in the Heap for these dynamically allocated structures.
+
+When you declare a primitive type (like a number or boolean), it's usually managed in the stack. But when you create an object, array, or function, it's stored in the heap, and the stack will hold a reference to that location in the heap.
+
+For example:
+
+```js
+const name = 'JavaScript'; // Stored on the stack
+const roadmap = { name: 'JS' }; // `roadmap` reference on the stack, actual object { name: 'JS' } in the heap
+```
+
+In the code above, the primitive value `JavaScript` for variable `name` is directly stored on the stack. For the object assigned to `roadmap`, its actual data resides in the heap, and the reference to this data (a memory address pointer) is held on the stack.
diff --git a/src/data/question-groups/javascript/content/hoisting.md b/src/data/question-groups/javascript/content/hoisting.md
new file mode 100644
index 000000000..898887b42
--- /dev/null
+++ b/src/data/question-groups/javascript/content/hoisting.md
@@ -0,0 +1,16 @@
+Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution. This means that no matter where the functions and variables are declared, they are moved to the top of their scope regardless of whether their scope is global or local. Note that hoisting only moves the declaration, not the initialization.
+
+```js
+console.log(x === undefined); // true
+var x = 3;
+console.log(x); // 3
+```
+
+The above code snippet can be visualized in the following way:
+
+```js
+var x;
+console.log(x === undefined); // true
+x = 3;
+console.log(x); // 3
+```
diff --git a/src/data/question-groups/javascript/content/iife.md b/src/data/question-groups/javascript/content/iife.md
new file mode 100644
index 000000000..7e8d95788
--- /dev/null
+++ b/src/data/question-groups/javascript/content/iife.md
@@ -0,0 +1,18 @@
+The IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined.
+
+```js
+(function () {
+ console.log('Hello Roadmap!');
+})();
+```
+
+The IIFE is frequently used to create a new scope to avoid variable hoisting from within blocks.
+
+```js
+(function () {
+ var roadmap = 'JavaScript';
+ console.log(roadmap);
+})();
+
+console.log(roadmap); // ReferenceError: name is not defined
+```
diff --git a/src/data/question-groups/javascript/content/immutable-object.md b/src/data/question-groups/javascript/content/immutable-object.md
new file mode 100644
index 000000000..81ddb9e2c
--- /dev/null
+++ b/src/data/question-groups/javascript/content/immutable-object.md
@@ -0,0 +1,12 @@
+To make an object immutable, you can use `Object.freeze()` method. It prevents the modification of existing property values and prevents the addition of new properties.
+
+```js
+const roadmap = {
+ name: 'JavaScript',
+};
+
+Object.freeze(roadmap);
+
+roadmap.name = 'JavaScript Roadmap'; // throws an error in strict mode
+console.log(roadmap.name); // JavaScript
+```
diff --git a/src/data/question-groups/javascript/content/increment-operator.md b/src/data/question-groups/javascript/content/increment-operator.md
new file mode 100644
index 000000000..b27669b44
--- /dev/null
+++ b/src/data/question-groups/javascript/content/increment-operator.md
@@ -0,0 +1,21 @@
+As the name says, the increment operator increases the value of a variable by **1**. There are two types of increment operators: `pre-increment` and `post-increment`.
+
+## Pre-increment
+
+The pre-increment operator increases the value of a variable by 1 and then returns the value. For example:
+
+```js
+let x = 1;
+console.log(++x); // 2
+console.log(x); // 2
+```
+
+## Post-increment
+
+The post-increment operator returns the value of a variable and then increases the value by 1. For example:
+
+```js
+let x = 1;
+console.log(x++); // 1
+console.log(x); // 2
+```
diff --git a/src/data/question-groups/javascript/content/infinite-loop.md b/src/data/question-groups/javascript/content/infinite-loop.md
new file mode 100644
index 000000000..b068dd54b
--- /dev/null
+++ b/src/data/question-groups/javascript/content/infinite-loop.md
@@ -0,0 +1,21 @@
+You can use the `while` or `for` loop to create an infinite loop.
+
+## While loop
+
+To create an infinite loop with the `while` loop, we can use the `true` keyword as the condition.
+
+```js
+while (true) {
+ // do something
+}
+```
+
+## For loop
+
+To create an infinite loop with the `for` loop, we can use the `true` keyword as the condition.
+
+```js
+for (let i = 0; true; i++) {
+ // do something
+}
+```
diff --git a/src/data/question-groups/javascript/content/inheritance.md b/src/data/question-groups/javascript/content/inheritance.md
new file mode 100644
index 000000000..485782eee
--- /dev/null
+++ b/src/data/question-groups/javascript/content/inheritance.md
@@ -0,0 +1,38 @@
+Inheritance is a way to create a new `Class` from an existing `Class`. The new `Class` inherits all the properties and methods from the existing `Class`. The new `Class` is called the child `Class`, and the existing `Class` is called the parent `Class`.
+
+## Example
+
+```js
+class Roadmap {
+ constructor(name, description, slug) {
+ this.name = name;
+ this.description = description;
+ this.slug = slug;
+ }
+
+ getRoadmapUrl() {
+ console.log(`https://roadmap.sh/${this.slug}`);
+ }
+}
+
+class JavaScript extends Roadmap {
+ constructor(name, description, slug) {
+ super(name, description, slug);
+ }
+
+ greet() {
+ console.log(`${this.name} - ${this.description}`);
+ }
+}
+
+const js = new JavaScript(
+ 'JavaScript Roadmap',
+ 'Learn JavaScript',
+ 'javascript'
+);
+
+js.getRoadmapUrl(); // https://roadmap.sh/javascript
+js.greet(); // JavaScript Roadmap - Learn JavaScript
+```
+
+In the above example, the `JavaScript` class inherits the `getRoadmapUrl()` method from the `Roadmap` class. This is because the `JavaScript` class extends the `Roadmap` class using the `extends` keyword. In the `JavaScript` class, the `getRoadmapUrl()` method is not found, so JavaScript looks up the prototype chain and finds the `getRoadmapUrl()` method in the `Roadmap` class.
diff --git a/src/data/question-groups/javascript/content/labelled-statements.md b/src/data/question-groups/javascript/content/labelled-statements.md
new file mode 100644
index 000000000..4509b0fa2
--- /dev/null
+++ b/src/data/question-groups/javascript/content/labelled-statements.md
@@ -0,0 +1,15 @@
+JavaScript label statements are used to prefix a label to an identifier. It can be used with `break` and `continue` statement to control the flow more precisely.
+
+```js
+loop1: for (let i = 0; i < 5; i++) {
+ if (i === 1) {
+ continue loop1; // skips the rest of the code in the loop1
+ }
+ console.log(`i: ${i}`);
+}
+// Output:
+// i: 0
+// i: 2
+// i: 3
+// i: 4
+```
diff --git a/src/data/question-groups/javascript/content/logical-operators.md b/src/data/question-groups/javascript/content/logical-operators.md
new file mode 100644
index 000000000..0ce8d56cc
--- /dev/null
+++ b/src/data/question-groups/javascript/content/logical-operators.md
@@ -0,0 +1,43 @@
+There are four logical operators in JavaScript: `||` (OR), `&&` (AND), `!` (NOT), and `??` (Nullish Coalescing). They can be used with boolean values, or with non-boolean values.
+
+## OR (||)
+
+The OR operator (`||`) returns the first truthy value, or the last value if none are truthy.
+
+```js
+console.log('hello' || 0); // hello
+console.log(false || 'hello'); // hello
+console.log('hello' || 'world'); // hello
+```
+
+## AND (&&)
+
+The AND operator (`&&`) aka logical conjunction returns the first falsy value, or the last value if none are falsy.
+
+```js
+console.log('hello' && 0); // 0
+console.log(false && 'hello'); // false
+console.log('hello' && 'world'); // world
+```
+
+## NOT (!)
+
+It simply inverts the boolean value of its operand.
+
+```js
+console.log(!true); // false
+console.log(!false); // true
+console.log(!'hello'); // false
+console.log(!0); // true
+```
+
+## Nullish Coalescing (??)
+
+The Nullish Coalescing Operator (`??`) returns the right operand if the left one is `null` or `undefined`, otherwise, it returns the left operand. It's useful for setting default values without considering falsy values like `0` or `''` as absent.
+
+```js
+console.log(null ?? 'hello'); // hello
+console.log(undefined ?? 'hello'); // hello
+console.log('' ?? 'hello'); // ''
+console.log(0 ?? 'hello'); // 0
+```
diff --git a/src/data/question-groups/javascript/content/map-method.md b/src/data/question-groups/javascript/content/map-method.md
new file mode 100644
index 000000000..85449ceac
--- /dev/null
+++ b/src/data/question-groups/javascript/content/map-method.md
@@ -0,0 +1,12 @@
+No, the `map()` method does not mutate the original array. It returns a new array with the results of calling a provided function on every element in the calling array.
+
+```js
+const roadmaps = ['JavaScript', 'React', 'Node.js'];
+
+const renamedRoadmaps = roadmaps.map((roadmap) => {
+ return `${roadmap} Roadmap`;
+});
+
+console.log(roadmaps); // ['JavaScript', 'React', 'Node.js']
+console.log(renamedRoadmaps); // ['JavaScript Roadmap', 'React Roadmap', 'Node.js Roadmap']
+```
diff --git a/src/data/question-groups/javascript/content/map.md b/src/data/question-groups/javascript/content/map.md
new file mode 100644
index 000000000..480f6fb47
--- /dev/null
+++ b/src/data/question-groups/javascript/content/map.md
@@ -0,0 +1,19 @@
+Map is another data structure in JavaScript which is similar to `Object` but the key can be of any type. It is a collection of elements where each element is stored as a Key, value pair. It is also known as a Hash table or a dictionary.
+
+The `key` can be of any type but the `value` can be of any type. The `key` is unique and immutable, whereas the `value` can be mutable or immutable.
+
+```js
+const roadmap = new Map();
+roadmap.set('name', 'JavaScript');
+roadmap.set('type', 'dynamic');
+roadmap.set('year', 1995);
+
+console.log(roadmap.get('name')); // JavaScript
+
+roadmap.delete('year');
+console.log(roadmap.has('year')); // false
+console.log(roadmap.size); // 2
+
+roadmap.clear();
+console.log(roadmap.size); // 0
+```
diff --git a/src/data/question-groups/javascript/content/measure-dimensions.md b/src/data/question-groups/javascript/content/measure-dimensions.md
new file mode 100644
index 000000000..138c7d519
--- /dev/null
+++ b/src/data/question-groups/javascript/content/measure-dimensions.md
@@ -0,0 +1,8 @@
+You can use `getBoundingClientRect` method to get the dimensions of an element.
+
+```js
+const roadmapWrapper = document.querySelector('.roadmap-wrapper');
+const dimensions = roadmapWrapper.getBoundingClientRect();
+
+console.log(dimensions); // DOMRect { x: 8, y: 8, width: 784, height: 784, top: 8, right: 792, bottom: 792, left: 8 }
+```
diff --git a/src/data/question-groups/javascript/content/merge-arrays.md b/src/data/question-groups/javascript/content/merge-arrays.md
new file mode 100644
index 000000000..524e8bd8b
--- /dev/null
+++ b/src/data/question-groups/javascript/content/merge-arrays.md
@@ -0,0 +1,25 @@
+Yes, you can merge multiple arrays into one array using the `concat()` method, or the spread operator `...`.
+
+## concat()
+
+The `concat()` method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.
+
+```js
+const arr1 = [1, 2, 3];
+const arr2 = [4, 5, 6];
+
+const arr3 = arr1.concat(arr2);
+console.log(arr3); // [1, 2, 3, 4, 5, 6]
+```
+
+## Spread operator
+
+The spread operator `...` is used to expand an iterable object into the list of arguments.
+
+```js
+const arr1 = [1, 2, 3];
+const arr2 = [4, 5, 6];
+
+const arr3 = [...arr1, ...arr2];
+console.log(arr3); // [1, 2, 3, 4, 5, 6]
+```
diff --git a/src/data/question-groups/javascript/content/nullish-coalescing-operator.md b/src/data/question-groups/javascript/content/nullish-coalescing-operator.md
new file mode 100644
index 000000000..72c5970fb
--- /dev/null
+++ b/src/data/question-groups/javascript/content/nullish-coalescing-operator.md
@@ -0,0 +1,8 @@
+The Nullish Coalescing Operator (`??`) returns the right operand if the left one is `null` or `undefined`, otherwise, it returns the left operand. It's useful for setting default values without considering falsy values like `0` or `''` as absent.
+
+```js
+console.log(null ?? 'hello'); // hello
+console.log(undefined ?? 'hello'); // hello
+console.log('' ?? 'hello'); // ''
+console.log(0 ?? 'hello'); // 0
+```
diff --git a/src/data/question-groups/javascript/content/parse-json.md b/src/data/question-groups/javascript/content/parse-json.md
new file mode 100644
index 000000000..be661bfe3
--- /dev/null
+++ b/src/data/question-groups/javascript/content/parse-json.md
@@ -0,0 +1,9 @@
+In order to parse JSON, you can use the `JSON.parse()` method. It parses a JSON string and returns the JavaScript equivalent.
+
+```js
+const json = '{"name":"JavaScript","year":1995}';
+const roadmap = JSON.parse(json);
+
+console.log(roadmap.name); // JavaScript
+console.log(roadmap.year); // 1995
+```
diff --git a/src/data/question-groups/javascript/content/prevent-default.md b/src/data/question-groups/javascript/content/prevent-default.md
new file mode 100644
index 000000000..cc721bac1
--- /dev/null
+++ b/src/data/question-groups/javascript/content/prevent-default.md
@@ -0,0 +1,10 @@
+The `event.preventDefault()` method is used to prevent the default action of an event. For example, when you click on a link, the default action is to navigate to the link's URL. But, if you want to prevent the navigation, you can use `event.preventDefault()` method.
+
+```js
+const link = document.querySelector('a');
+
+link.addEventListener('click', (event) => {
+ event.preventDefault();
+ console.log('Clicked on link!');
+});
+```
diff --git a/src/data/question-groups/javascript/content/promise-all-vs-all-settled.md b/src/data/question-groups/javascript/content/promise-all-vs-all-settled.md
new file mode 100644
index 000000000..9b0199049
--- /dev/null
+++ b/src/data/question-groups/javascript/content/promise-all-vs-all-settled.md
@@ -0,0 +1,51 @@
+The core difference between `Promise.all()` and `Promise.allSettled()` is that `Promise.all()` rejects immediately if any of the promises reject whereas `Promise.allSettled()` waits for all of the promises to settle (either resolve or reject) and then returns the result.
+
+## Initialize
+
+```js
+const promise1 = Promise.resolve('Promise 1 resolved');
+const promise2 = Promise.reject('Promise 2 rejected');
+```
+
+## Using `Promise.all()`
+
+```js
+Promise.all([promise1, promise2])
+ .then((values) => {
+ console.log(values);
+ })
+ .catch((error) => {
+ console.log('An error occurred in Promise.all():', error);
+ });
+
+// Output:
+// An error occurred in Promise.all(): Promise 2 rejected
+```
+
+In the above code, the `Promise.all()` rejects immediately when any of the `promise2` rejects.
+
+## Using `Promise.allSettled()`
+
+```js
+Promise.allSettled([promise1, promise2]).then((results) => {
+ results.forEach((result, index) => {
+ if (result.status === 'fulfilled') {
+ console.log(
+ `Promise ${index + 1} was fulfilled with value:`,
+ result.value
+ );
+ } else {
+ console.log(
+ `Promise ${index + 1} was rejected with reason:`,
+ result.reason
+ );
+ }
+ });
+});
+
+// Output:
+// Promise 1 was fulfilled with value: Promise 1 resolved
+// Promise 2 was rejected with reason: Promise 2 rejected
+```
+
+In the above code, the `Promise.allSettled()` waits for all of the promises to settle (either resolve or reject) and then returns the result.
diff --git a/src/data/question-groups/javascript/content/prototype-chain.md b/src/data/question-groups/javascript/content/prototype-chain.md
new file mode 100644
index 000000000..bde4a9fb8
--- /dev/null
+++ b/src/data/question-groups/javascript/content/prototype-chain.md
@@ -0,0 +1,27 @@
+The prototype chain in JavaScript refers to the chain of objects linked by their prototypes. When a property or method is accessed on an object, JavaScript first checks the object itself. If it doesn't find it there, it looks up the property or method in the object's prototype. This process continues, moving up the chain from one prototype to the next, until the property or method is found or the end of the chain is reached (typically the prototype of the base object, which is `null`). The prototype chain is fundamental to JavaScript's prototypal inheritance model, allowing objects to inherit properties and methods from other objects.
+
+## Example
+
+```js
+const roadmap = {
+ getRoadmapUrl() {
+ console.log(`https://roadmap.sh/${this.slug}`);
+ },
+};
+
+const javascript = {
+ name: 'JavaScript Roadmap',
+ description: 'Learn JavaScript',
+ slug: 'javascript',
+ greet() {
+ console.log(`${this.name} - ${this.description}`);
+ },
+};
+
+Object.setPrototypeOf(javascript, roadmap); // or javascript.__proto__ = roadmap;
+
+javascript.getRoadmapUrl(); // https://roadmap.sh/javascript
+javascript.greet(); // JavaScript Roadmap - Learn JavaScript
+```
+
+In the above example, the `javascript` object inherits the `getRoadmapUrl()` method from the `roadmap` object. This is because the `javascript` object's prototype is set to the `roadmap` object using the `Object.setPrototypeOf()` method. In the `javascript` object, the `getRoadmapUrl()` method is not found, so JavaScript looks up the prototype chain and finds the `getRoadmapUrl()` method in the `roadmap` object.
diff --git a/src/data/question-groups/javascript/content/query-selector.md b/src/data/question-groups/javascript/content/query-selector.md
new file mode 100644
index 000000000..43f2d34ff
--- /dev/null
+++ b/src/data/question-groups/javascript/content/query-selector.md
@@ -0,0 +1,18 @@
+For selecting elements in the DOM, the `querySelector` and `querySelectorAll` methods are the most commonly used. They are both methods of the `document` object, and they both accept a CSS selector as an argument.
+
+## querySelector
+
+The `querySelector` method returns the first element that matches the specified selector. If no matches are found, it returns `null`.
+
+```js
+const roadmapWrapper = document.querySelector('.roadmap-wrapper');
+const roadmapTitle = document.querySelector('#roadmap-title');
+```
+
+## querySelectorAll
+
+The `querySelectorAll` method returns a `NodeList` of all elements that match the specified selector. If no matches are found, it returns an empty `NodeList`.
+
+```js
+const roadmapItems = document.querySelectorAll('.roadmap-item');
+```
diff --git a/src/data/question-groups/javascript/content/reduce-method.md b/src/data/question-groups/javascript/content/reduce-method.md
new file mode 100644
index 000000000..c42f1b87d
--- /dev/null
+++ b/src/data/question-groups/javascript/content/reduce-method.md
@@ -0,0 +1,24 @@
+You can use the `reduce()` method to reduce an array to a single value. The `reduce()` method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.
+
+## Syntax
+
+```js
+array.reduce((accumulator, currentValue) => {
+ // ...
+}, initialValue);
+```
+
+## Example
+
+You can use the `reduce()` method to sum all the numbers in an array.
+
+```js
+const numbers = [1, 2, 3, 4, 5, 6];
+
+const sum = numbers.reduce((accumulator, currentValue) => {
+ return accumulator + currentValue;
+}, 0);
+
+console.log(numbers); // [1, 2, 3, 4, 5, 6]
+console.log(sum); // 21
+```
diff --git a/src/data/question-groups/javascript/content/remove-element.md b/src/data/question-groups/javascript/content/remove-element.md
new file mode 100644
index 000000000..022a6367a
--- /dev/null
+++ b/src/data/question-groups/javascript/content/remove-element.md
@@ -0,0 +1,9 @@
+To remove a DOM element, you can use the `remove` or `removeChild` method of the `Node` interface.
+
+```js
+const roadmapWrapper = document.querySelector('.roadmap-wrapper');
+const roadmapTitle = document.querySelector('#roadmap-title');
+
+roadmapWrapper.removeChild(roadmapTitle);
+roadmapWrapper.remove();
+```
diff --git a/src/data/question-groups/javascript/content/scroll-to-top.md b/src/data/question-groups/javascript/content/scroll-to-top.md
new file mode 100644
index 000000000..2ba6a91d7
--- /dev/null
+++ b/src/data/question-groups/javascript/content/scroll-to-top.md
@@ -0,0 +1,5 @@
+In order to scroll to the top of the page, we can use the `scrollTo` method.
+
+```js
+window.scrollTo(0, 0);
+```
diff --git a/src/data/question-groups/javascript/content/set-interval.md b/src/data/question-groups/javascript/content/set-interval.md
new file mode 100644
index 000000000..809be796f
--- /dev/null
+++ b/src/data/question-groups/javascript/content/set-interval.md
@@ -0,0 +1,17 @@
+You can run some codes on interval using `setInterval` function in JavaScript. It accepts a function and a time interval in milliseconds. It returns a unique id which you can use to clear the interval using `clearInterval` function.
+
+```js
+const intervalId = setInterval(() => {
+ console.log('Hello World');
+}, 1000);
+
+// Output:
+// Hello World
+// Hello World
+```
+
+In the above code, the `setInterval` function runs the callback function every 1000 milliseconds (1 second) and prints `Hello World` to the console. It returns a unique id which you can use to clear the interval using `clearInterval` function.
+
+```js
+clearInterval(intervalId);
+```
diff --git a/src/data/question-groups/javascript/content/set-timeout.md b/src/data/question-groups/javascript/content/set-timeout.md
new file mode 100644
index 000000000..4cabf98e3
--- /dev/null
+++ b/src/data/question-groups/javascript/content/set-timeout.md
@@ -0,0 +1,16 @@
+To run a piece of code after a certain time, you can use `setTimeout` function in JavaScript. It accepts a function and a time interval in milliseconds. It returns a unique id which you can use to clear the timeout using `clearTimeout` function.
+
+```js
+const timeoutId = setTimeout(() => {
+ console.log('Hello World');
+}, 1000);
+
+// Output:
+// Hello World
+```
+
+In the above code, the `setTimeout` function runs the callback function after 1000 milliseconds (1 second) and prints `Hello World` to the console. It returns a unique id which you can use to clear the timeout using `clearTimeout` function.
+
+```js
+clearTimeout(timeoutId);
+```
diff --git a/src/data/question-groups/javascript/content/set.md b/src/data/question-groups/javascript/content/set.md
new file mode 100644
index 000000000..113268a13
--- /dev/null
+++ b/src/data/question-groups/javascript/content/set.md
@@ -0,0 +1,17 @@
+Set is another data structure in JavaScript which is similar to `Array` but the values are unique. It is a collection of elements where each element is stored as a value without any keys.
+
+```js
+const roadmap = new Set();
+roadmap.add('JavaScript');
+roadmap.add('JavaScript');
+
+roadmap.add('dynamic');
+roadmap.add(1995);
+
+console.log(roadmap.size); // 3, because the value 'JavaScript' is already present in the set
+console.log(roadmap.has('JavaScript')); // true
+
+roadmap.delete('JavaScript');
+console.log(roadmap.has('JavaScript')); // false
+console.log(roadmap.size); // 2
+```
diff --git a/src/data/question-groups/javascript/content/spread-operator.md b/src/data/question-groups/javascript/content/spread-operator.md
new file mode 100644
index 000000000..428a1dc7b
--- /dev/null
+++ b/src/data/question-groups/javascript/content/spread-operator.md
@@ -0,0 +1,19 @@
+The spread operator in JavaScript is represented by three dots (`...`). It allows the elements of an array or properties of an object to be expanded or "spread" into individual elements or properties. This can be useful in various contexts, such as when passing elements as function arguments, cloning arrays and objects, or merging arrays and objects.
+
+```js
+const roadmaps = ['JavaScript', 'React', 'Node.js'];
+const bestPractices = ['AWS', 'API Security'];
+
+const resources = [...roadmaps, ...bestPractices];
+console.log(resources); // ['JavaScript', 'React', 'Node.js', 'AWS', 'API Security']
+```
+
+```js
+const roadmap = {
+ name: 'JavaScript',
+ type: 'dynamic',
+};
+
+const roadmapClone = { ...roadmap }; // shallow copy
+console.log(roadmapClone); // { name: 'JavaScript', type: 'dynamic' }
+```
diff --git a/src/data/question-groups/javascript/content/switch-case.md b/src/data/question-groups/javascript/content/switch-case.md
new file mode 100644
index 000000000..6319da131
--- /dev/null
+++ b/src/data/question-groups/javascript/content/switch-case.md
@@ -0,0 +1,19 @@
+The `switch` statement evaluates an expression, matching the expression's value to a `case` clause, and executes statements associated with that `case`, as well as statements in `case`s that follow the matching `case`.
+
+```js
+const fruit = 'Papayas';
+
+switch (fruit) {
+ case 'Oranges':
+ console.log('Oranges are $0.59 a pound.');
+ break;
+ case 'Mangoes':
+ case 'Papayas':
+ console.log('Mangoes and papayas are $2.79 a pound.');
+ break;
+ default:
+ console.log(`Sorry, we are out of ${fruit}.`);
+}
+
+// Mangoes and papayas are $2.79 a pound.
+```
diff --git a/src/data/question-groups/javascript/content/ternary-operator.md b/src/data/question-groups/javascript/content/ternary-operator.md
new file mode 100644
index 000000000..5b6e3133e
--- /dev/null
+++ b/src/data/question-groups/javascript/content/ternary-operator.md
@@ -0,0 +1,5 @@
+The ternary operator is a conditional operator that takes three operands. It is frequently used as a shortcut for the `if` statement.
+
+```js
+console.log(condition ? true : false);
+```
diff --git a/src/data/question-groups/javascript/content/variable-number-of-arguments.md b/src/data/question-groups/javascript/content/variable-number-of-arguments.md
new file mode 100644
index 000000000..a7946db3e
--- /dev/null
+++ b/src/data/question-groups/javascript/content/variable-number-of-arguments.md
@@ -0,0 +1,27 @@
+In JavaScript, you can accept a variable number of arguments in a function using the `arguments` object or the rest parameter (`...`).
+
+## Using the `arguments` object:
+
+The `arguments` is an array-like object that holds all of the passed arguments. They are only available inside the function body.
+
+```js
+function displayArgs() {
+ for (let i = 0; i < arguments.length; i++) {
+ console.log(arguments[i]);
+ }
+}
+displayArgs(1, 2, 3, 4); // Outputs: 1, 2, 3, 4
+```
+
+## Using the rest parameter:
+
+The rest parameter allows you to represent an indefinite number of arguments as an array.
+
+```js
+function displayArgs(...args) {
+ args.forEach((arg) => console.log(arg));
+}
+displayArgs(1, 2, 3, 4); // Outputs: 1, 2, 3, 4
+```
+
+The rest parameter (`...args` in the example) is generally more modern and flexible, and it provides an actual array, unlike the array-like `arguments` object.
diff --git a/src/data/question-groups/javascript/javascript.md b/src/data/question-groups/javascript/javascript.md
new file mode 100644
index 000000000..9603b74d2
--- /dev/null
+++ b/src/data/question-groups/javascript/javascript.md
@@ -0,0 +1,396 @@
+---
+order: 1
+briefTitle: 'JavaScript'
+briefDescription: 'Test, rate and improve your JavaScript knowledge with these questions.'
+title: 'JavaScript Questions'
+description: 'Test, rate and improve your JavaScript knowledge with these questions.'
+isNew: true
+seo:
+ title: 'JavaScript Questions'
+ description: 'Curated list of JavaScript questions to test, rate and improve your knowledge. Questions are based on real world experience and knowledge.'
+ keywords:
+ - 'javascript quiz'
+ - 'javascript questions'
+ - 'javascript interview questions'
+ - 'javascript interview'
+ - 'javascript test'
+sitemap:
+ priority: 1
+ changefreq: 'monthly'
+questions:
+ - question: What is JavaScript?
+ answer: JavaScript (often abbreviated as JS) is a high-level, versatile, and widely-used programming language primarily known for its role in web development. It enables interactive and dynamic behavior on websites.
+ topics:
+ - 'Core'
+ - 'Beginner'
+ - question: What is the difference between `var`, `let`, and `const` in JavaScript?
+ answer: In JavaScript, `var` is function-scoped and was traditionally used to declare variables. `let` and `const` are block-scoped. The key difference between `let` and `const` is that `let` allows for reassignment while `const` creates a read-only reference.
+ topics:
+ - 'Core'
+ - 'Beginner'
+ - question: What is the difference between `null` and `undefined`?
+ answer: The `null` is an assignment value. It can be assigned to a variable as a representation of no value. But the `undefined` is a primitive value that represents the absence of a value, or a variable that has not been assigned a value.
+ topics:
+ - 'Core'
+ - 'Beginner'
+ - question: What is the difference between `==` and `===`?
+ answer: equality-operator.md
+ topics:
+ - 'Core'
+ - 'Beginner'
+ - question: What are the different ways to declare a variable in JavaScript?
+ answer: There are three ways to declare a variable in JavaScript `var`, `let`, and `const`.
+ topics:
+ - 'Core'
+ - 'Intermediate'
+ - question: What are Scopes in JavaScript?
+ answer: A scope is a set of variables, objects, and functions that you have access to. There are three types of scopes in JavaScript. Which are Global Scope, Function Scope (Local Scope), and Block Scope.
+ topics:
+ - 'Core'
+ - 'Intermediate'
+ - question: What is ternary operator in JavaScript?
+ answer: ternary-operator.md
+ topics:
+ - 'Core'
+ - 'Intermediate'
+ - question: How to implement your own Custom Event in JavaScript?
+ answer: custom-event.md
+ topics:
+ - 'Event'
+ - 'Advanced'
+ - question: What is a closure in JavaScript?
+ answer: closure.md
+ topics:
+ - 'Core'
+ - 'Advanced'
+ - question: Does Arrow functions have their own `this`?
+ answer: No, arrow functions do not have their own `this`. Instead, they inherit the `this` of the enclosing lexical scope.
+ topics:
+ - 'Function'
+ - 'Intermediate'
+ - question: Does `map()` method mutate the original array?
+ answer: map-method.md
+ topics:
+ - 'Core'
+ - 'Intermediate'
+ - question: Does `forEach()` method return a new array?
+ answer: for-each-method.md
+ topics:
+ - 'Core'
+ - 'Intermediate'
+ - question: How to use `filter()` method?
+ answer: filter-method.md
+ topics:
+ - 'Core'
+ - 'Intermediate'
+ - question: What is the difference between `map()` and `forEach()` methods?
+ answer: The `map()` method creates a new array with the results of calling a provided function on every element in the calling array. Whereas, the `forEach()` method executes a provided function once for each array element.
+ topics:
+ - 'Core'
+ - 'Intermediate'
+ - question: How to use `reduce()` method?
+ answer: reduce-method.md
+ topics:
+ - 'Core'
+ - 'Intermediate'
+ - question: What is the difference between `map()` and `reduce()` methods?
+ answer: The `map()` method creates a new array with the results of calling a provided function on every element in the calling array. Whereas, the `reduce()` method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.
+ topics:
+ - 'Core'
+ - 'Intermediate'
+ - question: What is Prototype Chain in JavaScript?
+ answer: prototype-chain.md
+ topics:
+ - 'OOP'
+ - 'Advanced'
+ - question: What is IIFE in JavaScript?
+ answer: iife.md
+ topics:
+ - 'Function'
+ - 'Advanced'
+ - question: What is Inheritance in JavaScript?
+ answer: inheritance.md
+ topics:
+ - 'OOP'
+ - 'Advanced'
+ - question: What is Map in JavaScript?
+ answer: map.md
+ topics:
+ - 'Date Type'
+ - 'Beginner'
+ - question: What is Set in JavaScript?
+ answer: set.md
+ topics:
+ - 'Data Type'
+ - 'Beginner'
+ - question: How you can find unique values in an array?
+ answer: find-unique-array-values.md
+ topics:
+ - 'Core'
+ - 'Intermediate'
+ - question: What is a JavaScript promise?
+ answer: A Promise in JavaScript represents a value that may not be available yet but will be at some point. Promises provide a way to handle asynchronous operations, offering methods like `.then()` and `.catch()` to register callbacks for success and failure.
+ topics:
+ - 'Promise'
+ - 'Advanced'
+ - question: What is the purpose of the `async/await` in JavaScript?
+ answer: The `async/await`, introduced in ES2017, provides a more readable and cleaner way to handle asynchronous operations compared to callbacks and promises. An `async` function always returns a promise, and within such a function, you can use `await` to pause execution until a promise settles.
+ topics:
+ - 'Promise'
+ - 'Advanced'
+ - question: What is callback hell in JavaScript?
+ answer: callback-hell.md
+ topics:
+ - 'Core'
+ - 'Advanced'
+ - question: How to enable strict mode in JavaScript?
+ answer: To enable strict mode in JavaScript, you need to add the following line at the top of the file or function `'use strict';`.
+ topics:
+ - 'Core'
+ - 'Beginner'
+ - question: Explain `alert()`, `prompt()`, and `confirm()` methods in JavaScript?
+ answer: alert-prompt-confirm.md
+ topics:
+ - 'Event'
+ - 'Intermediate'
+ - question: How to handle event bubbling in JavaScript?
+ answer: event-bubbling.md
+ topics:
+ - 'Event'
+ - 'Beginner'
+ - question: What is Event Capturing in JavaScript?
+ answer: Event capturing is the first phase of event propagation. In this phase, the event is captured by the outermost element and propagated to the inner elements. It is also known as trickling. It is the opposite of event bubbling.
+ topics:
+ - 'Event'
+ - 'Beginner'
+ - question: What is the spread operator in JavaScript?
+ answer: spread-operator.md
+ topics:
+ - 'Core'
+ - 'Intermediate'
+ - question: Is Java and JavaScript the same?
+ answer: No, Java and JavaScript are distinct languages. Their similarity in name is coincidental, much like `car` and `carpet`. Java is often used for backend and mobile apps, while JavaScript powers web interactivity and backend.
+ topics:
+ - 'Core'
+ - 'Beginner'
+ - question: What is `preventDefault()` method in JavaScript?
+ answer: prevent-default.md
+ topics:
+ - 'Event'
+ - 'Intermediate'
+ - question: What is Hoisting in JavaScript?
+ answer: hoisting.md
+ topics:
+ - 'Core'
+ - 'Intermediate'
+ - question: What is DOM?
+ answer: The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects.
+ topics:
+ - 'DOM'
+ - 'Beginner'
+ - question: Difference between `Promise.all()` and `Promise.allSettled()`?
+ answer: promise-all-vs-all-settled.md
+ topics:
+ - 'Promise'
+ - 'Advanced'
+ - question: What is the difference between `Map` and `WeakMap` in JavaScript?
+ answer: The `Map` object holds key-value pairs and remembers the original insertion order of the keys. Whereas, the `WeakMap` object is a collection of key/value pairs in which the keys are weakly referenced. You can use any data type as a key or value in a `Map` whereas in `WeakMap` you can only use objects as keys. The `WeakMap` is not iterable whereas `Map` is. In `WeakMap` it holds the weak reference to the original object which means if there are no other references to an object stored in the `WeakMap`, those objects can be garbage collected.
+ topics:
+ - 'Data Type'
+ - 'Advanced'
+ - question: Garbage collection in JavaScript?
+ answer: The JavaScript engine uses automatic garbage collection. JavaScript automatically manages memory by freeing up space used by objects no longer needed. This algorithm is called Mark and Sweep, which is performed periodically by the JavaScript engine.
+ topics:
+ - 'Core'
+ - 'Advanced'
+ - question: How to make an Object immutable in JavaScript?
+ answer: immutable-object.md
+ topics:
+ - 'Core'
+ - 'Advanced'
+ - question: What is Type Casting?
+ answer: Type conversion (or typecasting) means transfer of data from one data type to another. Implicit conversion happens when the compiler (for compiled languages) or runtime (for script languages like `JavaScript`) automatically converts data types.
+ topics:
+ - 'Data Type'
+ - 'Intermediate'
+ - question: What are Explicit binding in JavaScript?
+ answer: explicit-binding.md
+ topics:
+ - 'Function'
+ - 'Advanced'
+ - question: How to run a piece of code after a specific time interval?
+ answer: set-interval.md
+ topics:
+ - 'Core'
+ - 'Beginner'
+ - question: How to run a piece of code only once after a specific time?
+ answer: set-timeout.md
+ topics:
+ - 'Core'
+ - 'Beginner'
+ - question: What are Labelled Statements in JavaScript?
+ answer: labelled-statements.md
+ topics:
+ - 'Core'
+ - 'Intermediate'
+ - question: Difference between `defer` and `async` attributes in JavaScript?
+ answer: defer-vs-async.md
+ topics:
+ - 'Core'
+ - 'Beginner'
+ - question: What is Increment operator in JavaScript?
+ answer: increment-operator.md
+ topics:
+ - 'Core'
+ - 'Beginner'
+ - question: How to accept variable number of arguments in a JavaScript function?
+ answer: variable-number-of-arguments.md
+ topics:
+ - 'Function'
+ - 'Intermediate'
+ - question: How to define multiline strings in JavaScript?
+ answer: In order to define multiline strings in JavaScript, you need to use template literals. Template literals are enclosed by the backtick (```` ` ` ````) character instead of double or single quotes. Template literals can contain placeholders. These are indicated by the dollar sign and curly braces (``` `${expression}` ```).
+ topics:
+ - 'Core'
+ - 'Beginner'
+ - question: Uses of `break` and `continue` statements in JavaScript?
+ answer: break-and-continue.md
+ topics:
+ - 'Loop'
+ - 'Beginner'
+ - question: How to parse JSON in JavaScript?
+ answer: parse-json.md
+ topics:
+ - 'Core'
+ - 'Beginner'
+ - question: How to debug JavaScript code?
+ answer: debug-javascript.md
+ topics:
+ - 'Debug'
+ - 'Beginner'
+ - question: How to handle error in Promise?
+ answer: error-in-promise.md
+ topics:
+ - 'Promise'
+ - 'Advanced'
+ - question: How to handle error in async/await?
+ answer: error-in-async-await.md
+ topics:
+ - 'Promise'
+ - 'Advanced'
+ - question: How to use `finally` block in Promise?
+ answer: finally-block-in-promise.md
+ topics:
+ - 'Promise'
+ - 'Advanced'
+ - question: Asynchronous vs Synchronous code?
+ answer: async-vs-sync.md
+ topics:
+ - 'Core'
+ - 'Beginner'
+ - question: What is Event Loop in JavaScript?
+ answer: The Event loop is one the most important aspect to understand in JavaScript. It is the mechanism that allows JavaScript to perform non-blocking operations. It is the reason why we can use asynchronous code in JavaScript. The Event loop is a loop that constantly checks if there are any tasks that need to be executed. If there are, it will execute them. If there are no tasks to execute, it will wait for new tasks to arrive.
+ topics:
+ - 'Core'
+ - 'Advanced'
+ - question: How does Event Loop work in JavaScript?
+ answer: event-loop.md
+ topics:
+ - 'Core'
+ - 'Advanced'
+ - question: Is it possible to run JavaScript outside the browser?
+ answer: Yes, it is possible to run JavaScript outside the browser. There are several ways to run JavaScript outside the browser. You can use **Node.js**, **Deno**, **Bun**, or any other JavaScript runtime environment.
+ topics:
+ - 'Core'
+ - 'Beginner'
+ - question: Is it possible to run 2 lines of code at the same time in JavaScript?
+ answer: No, it is not possible to run 2 lines of code at the same time in JavaScript. JavaScript is a single-threaded language, which means that it can only execute one line of code at a time. However, it is possible to run 2 lines of code at the same time using asynchronous code.
+ topics:
+ - 'Core'
+ - 'Beginner'
+ - question: Is JavaScript a compiled or interpreted language?
+ answer: JavaScript is an interpreted language. This means that the JavaScript code is not compiled before it is executed. Instead, the JavaScript engine interprets the code at runtime.
+ topics:
+ - 'Core'
+ - 'Beginner'
+ - question: Are references copied in JavaScript?
+ answer: No, references are not copied in JavaScript. When you assign an object to a variable, the variable will contain a reference to the object. If you assign the variable to another variable, the second variable will also contain a reference to the object. If you change the object using one of the variables, the change will be visible using the other variable.
+ topics:
+ - 'Core'
+ - 'Intermediate'
+ - question: What are Heap and Stack in JavaScript?
+ answer: heap-and-stack.md
+ topics:
+ - 'Core'
+ - 'Advanced'
+ - question: What is Comma Operator in JavaScript?
+ answer: comma-operator.md
+ topics:
+ - 'Operator'
+ - 'Intermediate'
+ - question: What is Nullish Coalescing Operator?
+ answer: nullish-coalescing-operator.md
+ topics:
+ - 'Operator'
+ - 'Beginner'
+ - question: What are the Logical Operators in JavaScript?
+ answer: logical-operators.md
+ topics:
+ - 'Operator'
+ - 'Beginner'
+ - question: How to create Infinite Loop in JavaScript?
+ answer: infinite-loop.md
+ topics:
+ - 'Core'
+ - 'Beginner'
+ - question: How to use `do...while` loop in JavaScript?
+ answer: do-while-loop.md
+ topics:
+ - 'Core'
+ - 'Beginner'
+ - question: Switch case statement in JavaScript?
+ answer: switch-case.md
+ topics:
+ - 'Core'
+ - 'Beginner'
+ - question: How to select DOM elements using `querySelector()` and `querySelectorAll()`?
+ answer: query-selector.md
+ topics:
+ - 'DOM'
+ - 'Beginner'
+ - question: How to create a new Element in DOM?
+ answer: create-element.md
+ topics:
+ - 'DOM'
+ - 'Beginner'
+ - question: Difference between `appendChild()` and `insertBefore()`?
+ answer: append-child-vs-insert-before.md
+ topics:
+ - 'DOM'
+ - 'Beginner'
+ - question: How to remove an Element from DOM?
+ answer: remove-element.md
+ topics:
+ - 'DOM'
+ - 'Beginner'
+ - question: How to scroll to the top of the page using JavaScript?
+ answer: scroll-to-top.md
+ topics:
+ - 'DOM'
+ - 'Beginner'
+ - question: How to measure dimensions of an Element?
+ answer: measure-dimensions.md
+ topics:
+ - 'DOM'
+ - 'Beginner'
+ - question: Can you merge multiple arrays in JavaScript?
+ answer: merge-arrays.md
+ topics:
+ - 'Core'
+ - 'Intermediate'
+ - question: How to get viewport dimensions in JavaScript?
+ answer: You can use `window.innerWidth` and `window.innerHeight` to get the viewport dimensions.
+ topics:
+ - 'DOM'
+ - 'Beginner'
+---