Read the original in CodeThat.today
Welcome back. Here is the second part of the series about the top 30 Javascript Interview Warmup Exercises. If you are going to attend an interview that will ask algorithmic questions in Javascript then this list should be bookmarked for reference.
Let's get started.
Questions 🤔
- 1. Write a function that accepts a number and checks if it's a prime or not.
To check if a number n
is prime we need to go through the list of numbers i
from 2 up until n/2
and check if n
equally divides this number i
. This is to ensure that we cannot express n
as a factor of i
.
Here is the gist of the code:
- 2. Write a function that accepts a list of objects with the following type structure:
{
id: number,
accountType: "user" | "admin" | "root"
name: string
}
The function should return the list of objects grouped by their accountType
in this order. For example it should return a list with a list of user followed by a list of admin and a list of root accounts.
In order to group by the account type we need to store them in a way that the key is the accountType
value (user, admin or root) and the value is the list of records with that accountType
. We can use a map and just iterate over the those keys and update the collection every-time we match a value.
Then to return the results in a custom order we just combine the results for each type of accountType
in an array.
Here is the gist of the code:
- 3. Write a function that accepts a DOM element and a string and prints any of it's immediate children that contain the class name with that string.
Using the DOM API we can request the NodeList of the current element children using the childNodes property. Then we can iterate this list and check the class
value using the getAttribute("class")
or the classList
property for the specified class name.
Here is the gist of the code:
Given the following DOM for example:
<ul id="list">
<li class="even"><a href="#Syntax" rel="internal">Syntax</a></li>
<li class="odd"><a href="#Examples" rel="internal">Examples</a></li>
<li class="even"><a href="#Polyfill" rel="internal">Polyfill</a></li>
<li class="odd"><a href="#Specifications" rel="internal">Specifications</a></li>
<li class="even"><a href="#Browser_compatibility" rel="internal">Browser compatibility</a></li>
<li class="even"><a href="#See_also" rel="internal">See also</a></li>
</ul>
The code for printing the children nodes with a target className is:
function printChildrenContainingClass(rootElement, className) {
if (rootElement) {
// Iterate over the childNodes
list.childNodes.forEach((node) => {
// If a childnode contains a className print the node
if (node.classList.contains(className)) {
console.info(node);
}
});
}
}
printChildrenContainingClass(document.querySelector('#list'), 'odd'));
- 4. Write a function that accepts a DOM element and a string and prints if any of its parent nodes contains the class with that string. It should stop when there are no parent elements.
Here we can use the parentNode property to get the current element parent Node. Then we will check if the parent has a class with that name. If not we will recursively get the parent of that node again until we reach the Document Node or a node that has no parent:
Here is the gist of the code:
Given the following DOM for example:
<body>
<aside class="sidebar">
<ul id="list" class="sidebar-list">
<li class="even"><a href="#Syntax" rel="internal">Syntax</a></li>
<li class="odd"><a href="#Examples" rel="internal">Examples</a></li>
<li class="even"><a href="#Polyfill" rel="internal">Polyfill</a></li>
<li class="odd"><a href="#Specifications" rel="internal">Specifications</a></li>
<li class="even"><a id="start" href="#Browser_compatibility" rel="internal">Browser compatibility</a></li>
<li class="even"><a href="#See_also" rel="internal">See also</a></li>
</ul>
</aside>
</body>
The code for printing the parent nodes with a target className is:
function printParentsContainingClass(childElement, className) {
if (childElement) {
// Iterate over the parentNodes
let parentNode = childElement.parentNode;
while (parentNode !== null) {
// If a parentNode contains a className print the node
if (parentNode.classList && parentNode.classList.contains(className)) {
console.info(parentNode);
}
// Go up
parentNode = parentNode.parentNode;
}
}
}
printParentsContainingClass(document.getElementById('start'), 'sidebar');
- 5. Given the following DOM structure:
<ul id="list-start">
<li>Theo</li>
<li>Alex</li>
<li>Mike</li>
</ul>
Write relevant Javascript code so that when we click any of the list elements the following alert will display in the browser:
<name> was clicked
where <name>
is the element clicked. How can you make it work with only one event listener?
We could add individual event listeners here one for each <li>
element but we can do better by using one in the parent node <ul>
. The idea is to leverage event propagation and bubbling so that when we click anywhere within the <ul>
area we would pick the current target text node and show the alert message.
Here is the gist of the code:
function onListElementClicked(event) {
if(event.target && event.target.nodeName == "LI") {
// List item found. Alert the innerText
alert(event.target.innerText + " was clicked");
}
}
let list = document.getElementById('list-start');
if (list) {
list.addEventListener('click', onListElementClicked);
}
- 6. Write a function that checks if a given string is a palindrome.
By definition, a string is a palindrome if it read backwards the same. For example the following strings are palindrome:
"aba", "assissa"
However the following strings are not palindrome:
"abc", "asibisaa"
We can check if a string is a palindrome using a for loop over two indexes. The first index start at the start of the string and the second index starts at the end and moves towards the start. If at any time the characters at S[i] !== S[j] then we found a mismatch so the string is not a palindrome. We stop when we've reached the middle of the string.
Here is the gist of the code:
- 7. Write a function to represents a linked list.
A lot of times you are asked to implement something in a linked list such as reverse a list or find any cycles. So it's important to be able to implement one on the fly. Here is a simple implementation with a few basic operations:
- 8. Write a function to represents a Stack.
A lot of times you are asked to implement an algorithm that uses a Stack such as DFS traversal or checking if an expression is balanced. So it's important to be able to implement one on the fly. Here is a simple implementation with a few basic operations:
- 9. Write code that represents a Queue data structure.
A lot of times you are asked to implement an algorithm that uses a Queue such as BFS traversal. So it's important to be able to implement one on the fly. Here is a simple implementation with a few basic operations:
- 10. Write code that represents a graph data structure.
A lot of times you are asked to implement an algorithm that uses a Graph DTS such as finding shortest paths. So it's important to be able to implement one on the fly. Here is a simple implementation with a few basic operations:
What's next
Stay put for the next part!
😉👌💖
Interested in Mentoring or Training?
Contact me via www.techway.io for more information.
Top comments (3)
If you want to check whether is a number prime or not, you just have to go up to sqrt(n).
Please kindly explain
I think that in the first exercise it should be better to make a special case 2 too and then iterate from 3 incrementing 2 by 2. It shows that you don't only know how to code but basic math too ;)
Some comments have been hidden by the post's author - find out more