Being a JavaScript expert
Though JavaScript has been in the business for more than 25 years, it is still considered one of the most complicated programming languages at an expert level. There are so many concepts in this language. Over the years, JavaScript has changed a lot. Old features are removed or updated. New features are added frequently.
Because of these (and many other) reasons, it is not easy to become a JavaScript developer. Solving expert-level JavaScript coding challenges is even tougher. So in this article, we will list the top 3 expert-level coding challenges for JavaScript developers.
Challenge #1: Find the length of the longest substring without repeating characters
Strings are commonly used to check the experience and level of a programmer. In JavaScript, strings are used heavily. So the interviewer always focuses on strings.
In this coding challenge, you have a string where every character is an alphabet like the following.
let str = "abbbcabcdefef"
You have to find the length of the longest substring from the string without repeating any character. In other words, find the length of the longest substring with unique characters.
In the above string, the longest substring without repeating characters is “abcdef”. So the output will be 6.
The first way to solve this challenge is by using loops and Set.
let getLength = function (str) {
let finalLength = 0;
for (let i = 0; i < str.length; i++) {
let currentString = new Set();
for (let j = i; j < str.length; j++) {
if (currentString.has(str[j])) {
break;
} else {
currentString.add(str[j]);
}
}
finalLength = Math.max(finalLength, currentString.size);
}
return finalLength;
};
const str = "abbbcabcdefef";
console.log(getLength(str));In this approach, first, looping is done through each character and then, for each character, looping is done for the remaining characters. Each of the characters is added to the Set until a repeating character is encountered. At this point, when the repeating character is found, its length is stored in a variable.
The above approach works fine but it is not efficient. Instead, use the following approach with arrays.
let getLength = function (str) {
let currentString = [];
let finalLength = 0;
for (let i = 0; i < str.length; i++) {
const currentCharacterIndex = currentString.indexOf(str[i]);
if (currentCharacterIndex !== -1) {
currentString.splice(0, currentCharacterIndex + 1);
}
currentString.push(str[i]);
finalLength = Math.max(finalLength, currentString.length);
}
return finalLength;
};
const str = "abbbcabcdefef";
console.log(getLength(str));This approach is similar to the earlier one, but instead of Set, it is using an array to store the current string.
Challenge #2: Restructure an array - First number, Second numbers
In this coding challenge, you will be provided with an array that contains numbers as well as alphabets. You have to restructure the array in a way that numbers come first and alphabets second.
For example, the following is the array.
let arr = [2, "b", 4, "d", 3, "a", "c", "e", 5, 1];
The output should be;
[2, 4, 3, 5, 1, "b", "d", "a", "c", "e"];
The basic solution is by using arrays and for loops. But, as this challenge is for expert JavaScript developers, use modern array functions such as filter().
let numbersFirstAlphabetsSecond = (arr) => {
let numbers = [];
let alphabets = [];
let finalArr = [];
numbers = arr.filter((val) => typeof val === "number");
alphabets = arr.filter((val) => typeof val === "string");
finalArr = [...numbers, ...alphabets];
return finalArr;
};
let arr = [2, "b", 4, "d", 3, "a", "c", "e", 5, 1];
console.log(numbersFirstAlphabetsSecond(arr));In this approach, the numbers and alphabets are stored in separate arrays. Then, they are merged in a single array according to the structure.
This challenge can have a twist. The interviewer may ask to sort the numbers and alphabets in the final array. If you know the correct function to use, then it will be very easy.
let numbersFirstAlphabetsSecond = (arr) => {
let numbers = [];
let alphabets = [];
let finalArr = [];
numbers = arr.filter((val) => typeof val === "number");
alphabets = arr.filter((val) => typeof val === "string");
finalArr = [...numbers.sort(), ...alphabets.sort()];
return finalArr;
};
let arr = [2, "b", 4, "d", 3, "a", "c", "e", 5, 1];
console.log(numbersFirstAlphabetsSecond(arr));In this challenge, the main motive is to check how the developers work with arrays. Moreover, the interviewer wants to check the in-built function knowledge of the developer.
Challenge #3: Rotate 2D matrix clockwise
Matrix-related coding challenges are reserved for experienced developers. So, there is a high chance you may encounter a matrix-related coding challenge in an expert-level JavaScript interview.
In this coding challenge, you will be provided with a 2d matrix with the same number of rows and columns. You have to rotate that matrix in the clockwise direction.
Following is input with a 3 x 3 matrix.
let m = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
];The output should be;
[
[6, 3, 0],
[7, 4, 1],
[8, 5, 2],
];To solve this challenge, first, transpose (flipping x and y coordinates) the matrix and then reverse it.
const clockWise = (mat) => {
for (let r = 0; r < mat.length; r++) {
for (let c = 0; c < r; c++) {
let temp = mat[r][c];
mat[r][c] = mat[c][r];
mat[c][r] = temp;
}
}
let finalMat = mat.map((r) => r.reverse());
return finalMat;
};
let m = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
];
console.log(clockWise(m));In the above approach, first, the matrix is being transposed, and then, using the reverse() functions in the map() function, the transposed matrix is being reversed.
This challenge is tough and requires sufficient knowledge of matrix problem-solving. The developer should know how to transpose the matrix because it is the key to this problem.
Wrapping it up
The coding challenges for expert JavaScript developers will not be easy. The challenge can be on any topic but the most focussed ones are arrays, strings, and matrices, which we discussed in this article. Other important topics are objects, regex, numbers, loops, functions, and dates.