Coding Challenges
In JavaScript interviews, coding challenges test your problem-solving and algorithmic skills. These challenges often involve manipulating data structures, performing operations on strings and arrays, and solving complex problems efficiently.
Array Manipulation
1. Flattening Arrays
Question: Convert nested arrays into a single-level array.
Solution:
function flattenArray(arr) {
let result = [];
arr.forEach(item => {
if (Array.isArray(item)) {
result = result.concat(flattenArray(item));
} else {
result.push(item);
}
});
return result;
}
// Sample Input
const nestedArray = [1, [2, [3, 4], 5], 6];
console.log(flattenArray(nestedArray)); // Output: [1, 2, 3, 4, 5, 6]
Explanation: The flat
method with Infinity
depth flattens all levels of nested arrays into a single array.
2. Finding Unique Elements
Question: Remove duplicates from an array.
Solution:
function removeDuplicates(arr) {
const uniqueArray = [];
const seen = {};
arr.forEach(item => {
if (!seen[item]) {
seen[item] = true;
uniqueArray.push(item);
}
});
return uniqueArray;
}
// Sample Input
const inputArray = [1, 2, 2, 3, 4, 4, 5];
console.log(removeDuplicates(inputArray)); // Output: [1, 2, 3, 4, 5]
Hint: Using a Set
automatically removes duplicate elements, and the spread operator (...
) converts the Set
back to an array.
3. Sorting Algorithms
-
Bubble Sort
function bubbleSort(arr) { let n = arr.length; for (let i = 0; i < n - 1; i++) { for (let j = 0; j < n - i - 1; j++) { if (arr[j] > arr[j + 1]) { [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]; } } } return arr; } // Sample Input const unsortedArray = [64, 34, 25, 12, 22, 11, 90]; console.log(bubbleSort(unsortedArray)); // Output: [11, 12, 22, 25, 34, 64, 90]
-
Quick Sort
function quickSort(arr) { if (arr.length <= 1) return arr; let pivot = arr[arr.length - 1]; let left = [], right = []; for (let i = 0; i < arr.length - 1; i++) { if (arr[i] < pivot) left.push(arr[i]); else right.push(arr[i]); } return [...quickSort(left), pivot, ...quickSort(right)]; } // Sample Input const unsortedArray = [64, 34, 25, 12, 22, 11, 90]; console.log(quickSort(unsortedArray)); // Output: [11, 12, 22, 25, 34, 64, 90]
4. Finding Largest/Smallest Element
Finding Largest Element:
function findLargest(arr) {
return Math.max(...arr);
}
// Sample Input
const numbers = [5, 7, 2, 9, 1];
console.log(findLargest(numbers)); // Output: 9
Finding Smallest Element:
function findSmallest(arr) {
return Math.min(...arr);
}
// Sample Input
const numbers = [5, 7, 2, 9, 1];
console.log(findSmallest(numbers)); // Output: 1
5. Array Rotation
Question: Rotate an array by a given number of positions.
Solution:
function rotateArray(arr, k) {
const n = arr.length;
k = k % n; // In case k is greater than the length of the array
function reverse(start, end) {
while (start < end) {
[arr[start], arr[end]] = [arr[end], arr[start]]; // Swap elements
start++;
end--;
}
}
// Step 1: Reverse the entire array
reverse(0, n - 1);
// Step 2: Reverse the first part (0 to k-1)
reverse(0, k - 1);
// Step 3: Reverse the second part (k to n-1)
reverse(k, n - 1);
return arr;
}
// Sample Input
const inputArray = [1, 2, 3, 4, 5, 6, 7];
const positions = 3;
console.log(rotateArray(inputArray, positions)); // Output: [5, 6, 7, 1, 2, 3, 4]
6. Finding Missing Elements
Question: Identify missing numbers in a sequence.
Solution:
function findMissingElement(arr, n) {
const expectedSum = (n * (n + 1)) / 2;
const actualSum = arr.reduce((acc, num) => acc + num, 0);
return expectedSum - actualSum;
}
// Sample Input
const inputArray = [1, 2, 4, 6, 3, 7];
const n = 7;
console.log(findMissingElement(inputArray, n)); // Output: 5
7. Subarray Sum
Question: Find the maximum sum subarray using Kadane’s algorithm.
Solution:
function maxSubArraySum(arr) {
let maxSoFar = arr[0];
let maxEndingHere = arr[0];
for (let i = 1; i < arr.length; i++) {
maxEndingHere = Math.max(arr[i], maxEndingHere + arr[i]);
maxSoFar = Math.max(maxSoFar, maxEndingHere);
}
return maxSoFar;
}
// Sample Input
const array = [-2, 1, -3, 4, -1, 2, 1, -5, 4];
console.log(maxSubArraySum(array)); // Output: 6
Explanation: Kadane’s algorithm maintains the maximum sum of the subarray ending at the current position and the overall maximum.
8. Pair Sum
Question: Find pairs that sum to a target value.
Solution:
function findPairs(arr, target) {
const seen = new Set();
const pairs = [];
arr.forEach(num => {
const complement = target - num;
if (seen.has(complement)) {
pairs.push([complement, num]);
}
seen.add(num);
});
return pairs;
}
// Sample Input
const numbers = [1, 2, 3, 4, 3, 5];
const target = 6;
console.log(findPairs(numbers, target)); // Output: [[3, 3], [2, 4]]
Explanation: Use a set to track seen numbers and check if the complement of the current number exists in the set.
9. Shuffling Arrays
Question: Randomly shuffle array elements.
Solution:
function shuffleArray(arr) {
for (let i = arr.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[arr[i], arr[j]] = [arr[j], arr[i]];
}
return arr;
}
// Sample Input
const array = [1, 2, 3, 4, 5];
console.log(shuffleArray(array)); // Output: [e.g., 4, 1, 5, 3, 2]
Explanation: Use the Fisher-Yates algorithm to shuffle the array in-place.
String Manipulation
1. Reversing Strings
Question: Reverse a string.
Solution:
function reverseString(str) {
return str.split('').reverse().join('');
}
// Sample Input
const inputString = "hello";
console.log(reverseString(inputString)); // Output: "olleh"
Explanation: Convert the string to an array of characters, reverse it, and then join it back into a string.
2. Palindrome Check
Question: Check if a string is a palindrome.
Solution:
function isPalindrome(str) {
const cleaned = str.replace(/[^a-zA-Z0-9]/g, '').toLowerCase();
return cleaned === cleaned.split('').reverse().join('');
}
// Sample Input
const inputString = "A man, a plan, a canal, Panama";
console.log(isPalindrome(inputString)); // Output: true
Explanation: Clean the string by removing non-alphanumeric characters and checking if it reads the same backward.
3. Anagram Detection
Question: Check if two strings are anagrams.
Solution:
function areAnagrams(str1, str2) {
const sortedStr1 = str1.replace(/[^a-zA-Z0-9]/g, '').toLowerCase().split('').sort().join('');
const sortedStr2 = str2.replace(/[^a-zA-Z0-9]/g, '').toLowerCase().split('').sort().join('');
return sortedStr1 === sortedStr2;
}
// Sample Input
const string1 = "listen";
const string2 = "silent";
console.log(areAnagrams(string1, string2)); // Output: true
Explanation: Remove non-alphanumeric characters, sort the characters, and compare the sorted strings.
4. Substring Search
Question: Find occurrences of a substring in a string.
Solution:
function countOccurrences(str, sub) {
let count = 0;
let pos = 0;
while ((pos = str.indexOf(sub, pos)) !== -
1) {
count++;
pos += sub.length;
}
return count;
}
// Sample Input
const mainString = "The quick brown fox jumps over the lazy dog. The dog is happy.";
const substring = "The";
console.log(countOccurrences(mainString, substring)); // Output: 2
Explanation: Use indexOf
to find each occurrence of the substring and count them.
5. String Compression
Question: Compress a string using run-length encoding.
Solution:
function compressString(str) {
let compressed = '';
let count = 1;
for (let i = 1; i < str.length; i++) {
if (str[i] === str[i - 1]) {
count++;
} else {
compressed += str[i - 1] + count;
count = 1;
}
}
compressed += str[str.length - 1] + count;
return compressed.length < str.length ? compressed : str;
}
// Sample Input
const inputString = "aaabbccccd";
console.log(compressString(inputString)); // Output: "a3b2c4d1"
Explanation: Traverse the string, count consecutive characters, and build the compressed string.
6. Longest Unique Substring
Question: Find the longest substring with unique characters.
Solution:
function longestUniqueSubstring(str) {
let start = 0;
let maxLength = 0;
let seen = new Map();
for (let end = 0; end < str.length; end++) {
if (seen.has(str[end])) {
start = Math.max(seen.get(str[end]) + 1, start);
}
seen.set(str[end], end);
maxLength = Math.max(maxLength, end - start + 1);
}
return maxLength;
}
// Sample Input
const inputString = "abcabcbb";
console.log(longestUniqueSubstring(inputString)); // Output: 3 (substring "abc")
Explanation: Use a sliding window with a map to keep track of the last seen index of each character.
7. Character Frequency
Question: Count the frequency of each character in a string.
Solution:
function characterFrequency(str) {
const freq = {};
for (const char of str) {
freq[char] = (freq[char] || 0) + 1;
}
return freq;
}
// Sample Input
const inputString = "hello";
console.log(characterFrequency(inputString)); // Output: { h: 1, e: 1, l: 2, o: 1 }
Explanation: Use an object to count occurrences of each character.
8. Remove Duplicate Characters
Question: Remove duplicate characters from a string.
Solution:
function removeDuplicates(str) {
return [...new Set(str)].join('');
}
// Sample Input
const inputString = "aabbcc";
console.log(removeDuplicates(inputString)); // Output: "abc"
Explanation: Use a Set
to remove duplicates and then convert it back to a string.
9. String Permutations
Question: Generate permutations of a string.
Solution:
function permutations(str) {
const results = [];
function permute(arr, memo = '') {
if (memo.length === str.length) {
results.push(memo);
} else {
for (let i = 0; i < arr.length; i++) {
const curr = arr.slice();
const next = curr.splice(i, 1);
permute(curr, memo + next);
}
}
}
permute(str.split(''));
return results;
}
// Sample Input
const inputString = "abc";
console.log(permutations(inputString)); // Output: [ 'abc', 'acb', 'bac', 'bca', 'cab', 'cba' ]
Explanation: Use recursion to generate permutations by selecting each character and permuting the remaining characters.
10. Reverse Words
Question: Reverse the order of words in a string while preserving the positions.
Solution:
function reverseWords(str) {
return str.split(' ').reverse().join(' ');
}
// Sample Input
const inputString = "Hello World";
console.log(reverseWords(inputString)); // Output: "World Hello"
Explanation: Split the string into words, reverse the array, and join it back into a string.
DOM Challenges
1. Dynamic Form Creation
Question: Create a form based on user input.
Solution:
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Form</title>
</head>
<body>
<input type="text" id="inputField" placeholder="Enter number of fields" />
<button id="createFormButton">Create Form</button>
<form id="dynamicForm"></form>
<script>
document.getElementById('createFormButton').addEventListener('click', () => {
const numFields = parseInt(document.getElementById('inputField').value, 10);
const form = document.getElementById('dynamicForm');
form.innerHTML = '';
for (let i = 0; i < numFields; i++) {
const input = document.createElement('input');
input.type = 'text';
input.placeholder = `Field ${i + 1}`;
form.appendChild(input);
form.appendChild(document.createElement('br'));
}
});
</script>
</body>
</html>
Explanation: Creates a form dynamically based on user input. It adds text fields to the form according to the number entered by the user.
2. Event Handling
Question: Implement event delegation for handling dynamic content.
Solution:
<!DOCTYPE html>
<html>
<head>
<title>Event Delegation</title>
</head>
<body>
<div id="container">
<button class="dynamicButton">Button 1</button>
<button class="dynamicButton">Button 2</button>
</div>
<button id="addButton">Add New Button</button>
<script>
document.getElementById('container').addEventListener('click', (event) => {
if (event.target.classList.contains('dynamicButton')) {
alert('Dynamic button clicked!');
}
});
document.getElementById('addButton').addEventListener('click', () => {
const newButton = document.createElement('button');
newButton.className = 'dynamicButton';
newButton.textContent = 'New Button';
document.getElementById('container').appendChild(newButton);
});
</script>
</body>
</html>
Explanation: Uses event delegation to handle clicks on dynamically added buttons. A new button can be added to the container, and clicks on any button are handled by the event listener.
3. Drag and Drop
Question: Implement drag-and-drop functionality.
Solution:
<!DOCTYPE html>
<html>
<head>
<title>Drag and Drop</title>
<style>
.draggable {
width: 100px;
height: 100px;
background: red;
color: white;
text-align: center;
line-height: 100px;
margin: 10px;
cursor: move;
}
.dropzone {
width: 200px;
height: 200px;
border: 2px dashed #ccc;
margin: 10px;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div id="draggable" class="draggable" draggable="true">Drag me</div>
<div id="dropzone" class="dropzone">Drop here</div>
<script>
const draggable = document.getElementById('draggable');
const dropzone = document.getElementById('dropzone');
draggable.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', 'dragging');
});
dropzone.addEventListener('dragover', (e) => {
e.preventDefault();
});
dropzone.addEventListener('drop', (e) => {
e.preventDefault();
if (e.dataTransfer.getData('text/plain') === 'dragging') {
dropzone.appendChild(draggable);
}
});
</script>
</body>
</html>
Explanation: Implements drag-and-drop by setting the draggable attribute, handling dragstart
, dragover
, and drop
events.
These solutions cover a range of common coding problems with detailed explanations, sample inputs, and expected outputs to help with understanding and preparing for JavaScript interviews.