Advanced JavaScript Patterns
Advanced JavaScript Questions
1. Implement a Singleton Pattern
Question: Create a Singleton class in JavaScript that restricts the instantiation of a class to a single
instance.
Solution:
javascript
class Singleton {
constructor() {
if (!Singleton.instance) {
Singleton.instance = this;
}
return Singleton.instance;
}
someMethod() {
console.log("This method belongs to the singleton instance.");
}
}
const instance1 = new Singleton();
const instance2 = new Singleton();
console.log(instance1 === instance2); // true
2. Implement the Module Pattern
Question: Create a module that maintains a private variable and exposes methods to interact with it.
Solution:
javascript
const CounterModule = (function() {
let count = 0;
1/16
return {
increment: function() {
count++;
return count;
},
decrement: function() {
count--;
return count;
},
getCount: function() {
return count;
}
};
})();
console.log(CounterModule.increment()); // 1
console.log(CounterModule.increment()); // 2
console.log(CounterModule.getCount()); // 2
3. Create a Factory Pattern
Question: Create a factory function that generates different types of users.
Solution:
javascript
function UserFactory() {
this.createUser = function(type) {
let user;
if (type === "admin") {
user = new Admin();
} else if (type === "editor") {
user = new Editor();
} else {
user = new Viewer();
}
user.type = type;
return user;
};
}
class Admin {
constructor() {
this.permissions = ["read", "write", "delete"];
}
}
class Editor {
constructor() {
this.permissions = ["read", "write"];
}
}
class Viewer {
constructor() {
this.permissions = ["read"];
}
}
const factory = new UserFactory();
const adminUser = factory.createUser("admin");
console.log(adminUser.permissions); // ["read", "write", "delete"]
2/16
4. Implement the Observer Pattern
Question: Create a simple pub-sub system using the Observer pattern.
Solution:
javascript
class EventEmitter {
constructor() {
this.events = {};
}
subscribe(event, listener) {
if (!this.events[event]) {
this.events[event] = [];
}
this.events[event].push(listener);
}
unsubscribe(event, listener) {
if (this.events[event]) {
this.events[event] = this.events[event].filter(l => l !== listener);
}
}
emit(event, data) {
if (this.events[event]) {
this.events[event].forEach(listener => listener(data));
}
}
}
// Usage
const emitter = new EventEmitter();
const onEvent = (data) => console.log(`Received: ${data}`);
emitter.subscribe('dataReceived', onEvent);
emitter.emit('dataReceived', 'Hello, Observer!'); // Received: Hello, Observer!
5. Implement a Promise-Based API
Question: Create a function that returns a promise which resolves after a timeout.
Solution:
javascript
function delayedPromise(timeout) {
return new Promise((resolve) => {
setTimeout(() => {
resolve("Resolved after " + timeout + "ms");
}, timeout);
});
}
// Usage
delayedPromise(2000).then(console.log); // Resolved after 2000ms
6. Implement Debouncing
Question: Write a debounce function that limits the rate at which a function can fire.
3/16
Solution:
javascript
function debounce(func, delay) {
let timeoutId;
return function(...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
// Usage
const handleResize = debounce(() => {
console.log("Window resized!");
}, 300);
window.addEventListener('resize', handleResize);
7. Implement Throttling
Question: Create a throttle function that limits the number of times a function can be called over time.
Solution:
javascript
function throttle(func, limit) {
let lastFunc;
let lastRan;
return function(...args) {
if (!lastRan) {
func.apply(this, args);
lastRan = Date.now();
} else {
clearTimeout(lastFunc);
lastFunc = setTimeout(() => {
if (Date.now() - lastRan >= limit) {
func.apply(this, args);
lastRan = Date.now();
}
}, limit - (Date.now() - lastRan));
}
};
}
// Usage
const logScroll = throttle(() => {
console.log("Scrolled!");
}, 1000);
window.addEventListener('scroll', logScroll);
8. Implement a Simple MVC Pattern
Question: Create a simple MVC pattern with a model, view, and controller.
Solution:
4/16
javascript
class Model {
constructor() {
this.data = [];
}
addItem(item) {
this.data.push(item);
this.notifyObservers();
}
getItems() {
return this.data;
}
notifyObservers() {
this.observers.forEach(observer => observer.update());
}
subscribe(observer) {
this.observers.push(observer);
}
}
class View {
constructor() {
this.app = document.getElementById('app');
}
render(items) {
this.app.innerHTML = '';
items.forEach(item => {
const div = document.createElement('div');
div.innerText = item;
this.app.appendChild(div);
});
}
}
class Controller {
constructor(model, view) {
this.model = model;
this.view = view;
this.model.subscribe(this);
}
update() {
this.view.render(this.model.getItems());
}
addItem(item) {
this.model.addItem(item);
}
}
// Usage
const model = new Model();
const view = new View();
const controller = new Controller(model, view);
controller.addItem('Item 1');
controller.addItem('Item 2');
9. Create a Custom Fetch Function
Question: Write a custom fetch function that adds headers and handles errors.
5/16
Solution:
javascript
async function customFetch(url, options = {}) {
const defaultHeaders = {
'Content-Type': 'application/json',
'Accept': 'application/json'
};
options.headers = { ...defaultHeaders, ...options.headers };
try {
const response = await fetch(url, options);
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return await response.json();
} catch (error) {
console.error('Fetch error:', error);
throw error;
}
}
// Usage
customFetch('https://api.example.com/data')
.then(data => console.log(data))
.catch(error => console.error(error));
10. Implement Error Handling with Try-Catch in Async Functions
Question: Write an async function that fetches data and handles errors with try-catch.
Solution:
javascript
async function fetchData(url) {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Error fetching data:', error);
}
}
// Usage
fetchData('https://api.example.com/data');
11. Implement a Deep Clone Function
Question: Write a function that creates a deep clone of an object.
Solution:
6/16
javascript
function deepClone(obj) {
return JSON.parse(JSON.stringify(obj));
}
// Usage
const original = { name: 'Alice', age: 30, nested: { active: true } };
const clone = deepClone(original);
clone.nested.active = false;
console.log(original.nested.active); // true
12. Implement a Simple Event Delegation
Question: Create an event delegation pattern for a list of items.
Solution:
javascript
document.getElementById('list').addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
console.log(`Item clicked: ${event.target.textContent}`);
}
});
// HTML:
// <ul id="list">
// <li>Item 1</li>
// <li>Item 2</li>
// <li>Item 3</li>
// </ul>
13. Create a Context API
Question: Implement a simple Context API to share data across components.
Solution:
javascript
class Context {
constructor(value) {
this.value = value;
this.subscribers = [];
}
subscribe(callback) {
this.subscribers.push(callback);
}
update(value) {
this.value = value;
this.subscribers.forEach(callback => callback(this.value));
}
}
// Usage
const themeContext = new Context('light');
themeContext.subscribe(value => {
console.log(`Theme updated: ${value}`);
7/16
});
themeContext.update('dark'); // Theme updated: dark
14. Implement an Async Queue
Question: Write a simple async queue that processes tasks in order.
Solution:
javascript
class AsyncQueue {
constructor() {
this.queue = [];
this.processing = false;
}
async add(task) {
this.queue.push(task);
this.processQueue();
}
async processQueue() {
if (this.processing) return;
this.processing = true;
while (this.queue.length > 0) {
const task = this.queue.shift();
await task();
}
this.processing = false;
}
}
// Usage
const queue = new AsyncQueue();
queue.add(async () => {
console.log('Task 1 start');
await new Promise(resolve => setTimeout(resolve, 1000));
console.log('Task 1 end');
});
queue.add(async () => {
console.log('Task 2 start');
await new Promise(resolve => setTimeout(resolve, 500));
console.log('Task 2 end');
});
15. Implement a Simple State Management
Question: Create a simple state management solution.
Solution:
javascript
class Store {
constructor() {
this.state = {};
this.listeners = [];
}
8/16
setState(newState) {
this.state = { ...this.state, ...newState };
this.listeners.forEach(listener => listener(this.state));
}
subscribe(listener) {
this.listeners.push(listener);
}
}
// Usage
const store = new Store();
store.subscribe(state => {
console.log('State changed:', state);
});
store.setState({ count: 1 });
store.setState({ count: 2 });
16. Implement a Middleware Function
Question: Create a simple middleware function to log actions in a store.
Solution:
javascript
function loggerMiddleware(store) {
const originalDispatch = store.dispatch;
store.dispatch = function(action) {
console.log('Dispatching action:', action);
originalDispatch.call(store, action);
};
}
// Usage
const store = {
state: {},
dispatch(action) {
console.log('Action dispatched:', action);
}
};
loggerMiddleware(store);
store.dispatch({ type: 'ADD_ITEM' }); // Dispatching action: { type: 'ADD_ITEM' }
17. Implement a Simple Router
Question: Create a basic client-side router.
Solution:
javascript
class Router {
constructor(routes) {
this.routes = routes;
this.currentRoute = '';
}
navigate(route) {
9/16
this.currentRoute = route;
const handler = this.routes[route];
if (handler) {
handler();
} else {
console.log('404 - Not Found');
}
}
}
// Usage
const routes = {
'/': () => console.log('Home'),
'/about': () => console.log('About'),
};
const router = new Router(routes);
router.navigate('/'); // Home
router.navigate('/about'); // About
router.navigate('/contact'); // 404 - Not Found
18. Implement Local Storage with a Wrapper
Question: Create a simple wrapper around local storage.
Solution:
javascript
class Storage {
static set(key, value) {
localStorage.setItem(key, JSON.stringify(value));
}
static get(key) {
const value = localStorage.getItem(key);
return value ? JSON.parse(value) : null;
}
static remove(key) {
localStorage.removeItem(key);
}
}
// Usage
Storage.set('user', { name: 'Alice', age: 30 });
console.log(Storage.get('user')); // { name: 'Alice', age: 30 }
Storage.remove('user');
19. Implement a Custom Event Emitter
Question: Create a simple EventEmitter class.
Solution:
javascript
class EventEmitter {
constructor() {
this.events = {};
}
on(event, listener) {
if (!this.events[event]) {
10/16
this.events[event] = [];
}
this.events[event].push(listener);
}
emit(event, ...args) {
if (this.events[event]) {
this.events[event].forEach(listener => listener(...args));
}
}
}
// Usage
const emitter = new EventEmitter();
emitter.on('data', data => console.log('Data received:', data));
emitter.emit('data', { key: 'value' }); // Data received: { key: 'value' }
20. Implement a Fetch Wrapper with Retry Logic
Question: Create a fetch wrapper that retries on failure.
Solution:
javascript
async function fetchWithRetry(url, options = {}, retries = 3) {
for (let i = 0; i < retries; i++) {
try {
const response = await fetch(url, options);
if (!response.ok) throw new Error('Network response was not ok');
return await response.json();
} catch (error) {
console.error(`Attempt ${i + 1} failed: ${error.message}`);
if (i === retries - 1) throw error;
}
}
}
// Usage
fetchWithRetry('https://api.example.com/data')
.then(data => console.log(data))
.catch(error => console.error('Final error:', error));
21. Implement a Simple Undo/Redo Stack
Question: Create a class that manages a stack for undo and redo operations.
Solution:
javascript
class History {
constructor() {
this.undoStack = [];
this.redoStack = [];
}
execute(command) {
this.undoStack.push(command);
this.redoStack = []; // Clear redo stack
command.execute();
11/16
}
undo() {
if (this.undoStack.length) {
const command = this.undoStack.pop();
command.undo();
this.redoStack.push(command);
}
}
redo() {
if (this.redoStack.length) {
const command = this.redoStack.pop();
command.execute();
this.undoStack.push(command);
}
}
}
// Usage
class Command {
constructor(action) {
this.action = action;
}
execute() {
console.log(`Executing: ${this.action}`);
}
undo() {
console.log(`Undoing: ${this.action}`);
}
}
const history = new History();
const command1 = new Command('Action 1');
const command2 = new Command('Action 2');
history.execute(command1);
history.execute(command2);
history.undo();
history.redo();
22. Implement a Simple Cache
Question: Write a caching mechanism using a Map.
Solution:
javascript
class Cache {
constructor() {
this.cache = new Map();
}
get(key) {
return this.cache.get(key);
}
set(key, value) {
this.cache.set(key, value);
}
clear() {
this.cache.clear();
}
}
12/16
// Usage
const cache = new Cache();
cache.set('a', 1);
console.log(cache.get('a')); // 1
cache.clear();
console.log(cache.get('a')); // undefined
23. Implement a Simple Form Validation
Question: Write a function that validates a form object.
Solution:
javascript
function validateForm(formData) {
const errors = {};
if (!formData.username) {
errors.username = 'Username is required';
}
if (!formData.email.includes('@')) {
errors.email = 'Email must be valid';
}
return errors;
}
// Usage
const formData = { username: '', email: 'test.com' };
const validationErrors = validateForm(formData);
console.log(validationErrors); // { username: 'Username is required', email: 'Email must
be valid' }
24. Implement a Simple Pagination Function
Question: Write a function that paginates an array.
Solution:
javascript
function paginate(array, pageSize, pageNumber) {
return array.slice((pageNumber - 1) * pageSize, pageNumber * pageSize);
}
// Usage
const items = Array.from({ length: 50 }, (_, i) => i + 1);
const page = paginate(items, 10, 2);
console.log(page); // [11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
25. Create a Basic Fetch Wrapper with Abort
Question: Implement a fetch wrapper that allows for aborting requests.
Solution:
javascript
function fetchWithAbort(url, options = {}, signal) {
return fetch(url, { ...options, signal })
13/16
.then(response => {
if (!response.ok) throw new Error('Network response was not ok');
return response.json();
});
}
// Usage
const controller = new AbortController();
fetchWithAbort('https://api.example.com/data', { signal: controller.signal })
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
// To abort
controller.abort();
26. Implement a Simple Timer with Promises
Question: Create a timer function that returns a promise.
Solution:
javascript
function timer(seconds) {
return new Promise(resolve => {
setTimeout(() => {
resolve(`Timer finished after ${seconds} seconds`);
}, seconds * 1000);
});
}
// Usage
timer(3).then(console.log); // Timer finished after 3 seconds
27. Implement a Simple Async/Await Queue
Question: Create a queue that processes async tasks sequentially.
Solution:
javascript
class AsyncQueue {
constructor() {
this.tasks = [];
this.processing = false;
}
add(task) {
this.tasks.push(task);
this.processQueue();
}
async processQueue() {
if (this.processing) return;
this.processing = true;
while (this.tasks.length > 0) {
const task = this.tasks.shift();
await task();
}
this.processing = false;
}
14/16
}
// Usage
const asyncQueue = new AsyncQueue();
asyncQueue.add(async () => {
console.log('Task 1 start');
await new Promise(resolve => setTimeout(resolve, 1000));
console.log('Task 1 end');
});
asyncQueue.add(async () => {
console.log('Task 2 start');
await new Promise(resolve => setTimeout(resolve, 500));
console.log('Task 2 end');
});
28. Create a Simple Memoization Function
Question: Write a memoization function to cache results of a function.
Solution:
javascript
function memoize(fn) {
const cache = new Map();
return function(...args) {
const key = JSON.stringify(args);
if (cache.has(key)) {
return cache.get(key);
}
const result = fn(...args);
cache.set(key, result);
return result;
};
}
// Usage
const factorial = memoize(n => (n <= 1 ? 1 : n * factorial(n - 1)));
console.log(factorial(5)); // 120
29. Implement a Simple Command Pattern
Question: Create a command pattern to manage actions.
Solution:
javascript
class Command {
constructor(action) {
this.action = action;
}
execute() {
console.log(`Executing: ${this.action}`);
}
}
class CommandManager {
constructor() {
15/16
this.commands = [];
}
execute(command) {
command.execute();
this.commands.push(command);
}
}
// Usage
const manager = new CommandManager();
const command1 = new Command('Save');
const command2 = new Command('Load');
manager.execute(command1);
manager.execute(command2);
30. Implement a Basic Data Fetching with Retry Logic
Question: Write a function that retries a data fetch on failure.
Solution:
javascript
async function fetchWithRetry(url, options = {}, retries = 3) {
for (let i = 0; i < retries; i++) {
try {
const response = await fetch(url, options);
if (!response.ok) throw new Error('Network response was not ok');
return await response.json();
} catch (error) {
console.error(`Attempt ${i + 1} failed: ${error.message}`);
if (i === retries - 1) throw error;
}
}
}
// Usage
fetchWithRetry('https://api.example.com/data')
.then(data => console.log(data))
.catch(error => console.error('Final error:', error));
16/16
