Introduction
JavaScript is a very popular scripting language introduced by Brendan Eich in 1995. It was introduced with the intention of building a responsive website and enhancing the user experience because of the various dynamic applications it supports. Also, JavaScript is primarily known as a client-side scripting language, meaning it runs in the browser to create dynamic and interactive web pages. However, with platforms like Node.js, JavaScript can also be used for backend development, enabling developers to build server-side applications, handle databases, and create APIs.
The Code Challenges help you a lot in sharpening your technical skills. They provide you with real-life experience, which helps you in cracking the coding interview. Code challenges are essential for every developer to gain growth and have good opportunities in the software industry. The following are the important code challenges in JavaScript that help you sharpen your technical skills.
Beginner Level Code Challenge
1. Return Length of Arguments Passed
In this program, you are asked to write a program in JavaScript that returns the count of arguments passed to it.
Example
// JavaScript program to return the length of arguments passed to it
function argumentLength() {
return arguments.length;
}
console.log(argumentLength(1,2,3)); // 3
console.log(argumentLength("Tpoint", "Tech", "Website", "Technology")); // 4
console.log(argumentLength()); // 0
Output
3
2
0
2. Reverse a String
In this question, you are provided with a string, and you are asked to reverse the given string. The characters in a string should be printed in the reverse order.
Example
// JavaScript program to reverse the string
function reverseString(str) {
return str.split("").reverse().join("");
}
console.log(reverseString("reverse")); // esrever
Output
esrever
3. Check Palindrome
In this program, you are provided with a string, and you are asked to check whether a given string is a palindrome or not. A plandrome is a string that reads the same from both forward and backward directions. That is, the reverse of that string is the same as the original string.
Example
// JavaScript program to check whether a string is Palindrome or not
function checkPalindrome(str) {
return str === str.split("").reverse().join("");
}
console.log(checkPalindrome("madam")); // true
console.log(checkPalindrome("Teacher")); // false
Output
true
false
4. Fibonacci Series
In this program, you need to print the Fibonacci series. A Fibonacci series is a series of numbers in which each number is the sum of the previous two numbers. Given below is an example of the Fibonacci series.
Example
// JavaScript program to print the fibonacci series
function printFibonacci(n) {
let i = 0, j = 1, arr = [];
for (let k = 0; k < n; k++) {
arr.push(i);
let next = i + j;
i = j;
j = next;
}
return arr;
}
// Driver code
console.log(printFibonacci(8));
Output:
[
0, 1, 1, 2,
3, 5, 8, 13
]
Intermediate Level Code Challenge
1. Find Second Largest Element
In this question, you are provided with an array of elements, and you are asked to return the second largest element stored in the array.
Example
// JavaScript program to return the second largest element
function secondMaximum(arr) {
let removeDuplicate = [...new Set(arr)]; // remove duplicates
removeDuplicate.sort((a, b) => b - a); // sort descending
return removeDuplicate[1]; // second largest
}
console.log(secondMaximum([10, 20, 4, 45, 99])); // 45
console.log(secondMaximum([5, 5, 5, 2])); // 2
Output
45
2
2. Add Two Promises
In this question, you are given two promises, and you need to add the two promises and return the resultant added value after adding the two promises. A promise is an object representing the eventual completion of an asynchronous operation and its resulting value. Given below is a JavaScript program to add two promises using async/await.
Example
// JavaScript program to add two promises
const p1 = Promise.resolve(20);
const p2 = Promise.resolve(25);
async function addPromises() {
const [a, b] = await Promise.all([p1, p2]);
return a + b;
}
addPromises().then(sum => console.log("Sum:", sum)); // Sum: 40
Output
Sum: 45
3. Filter Elements from Array
In this question, you are given an array and you are asked to write a function that returns a filtered array. The function will take one or two arguments
• number from array
• index of array
The function should contain the three elements from the provided array for which the expression evaluates to a truthy value. A truthy value is a value where a boolean value returns true.
Given below is a JavaScript program to filter elements from an array
Example
// JavaScript program to filter elements from array
var filter = function(arr, fn) {
let fil = [];
for (let i = 0; i < arr.length; i++) {
if (fn(arr[i], i)) {
fil.push(arr[i]);
}
}
return fil;
};
// Driver Code
// Example 1: Filter even numbers
let nums = [1, 2, 3, 4, 5, 6];
let evenNumbers = filter(nums, (num) => num % 2 === 0);
console.log("Even numbers:", evenNumbers);
// Output: [2, 4, 6]
// Example 2: Filter numbers greater than index
let greaterThanIndex = filter(nums, (num, i) => num > i);
console.log("Numbers greater than their index:", greaterThanIndex);
// Output: [1, 2, 3, 4, 5, 6]
// Example 3: Filter words with length > 3
let words = ["cat", "tiger", "lion", "dog"];
let longWords = filter(words, (word) => word.length > 3);
console.log("Long words:", longWords);
Output
Even numbers: [ 2, 4, 6 ]
Numbers greater than their index: [ 1, 2, 3, 4, 5, 6 ]
Long words: [ 'tiger', 'lion' ]
4. Debounce Function
In JavaScript, Debouncing is a technique used to ensure that a function is not called too frequently. It limits the rate at which another function is executed. Debouncing is used in JavaScript where events are triggered rapidly. It is useful in scenarios where an event is triggered very frequently in a short period of time, like typing , scrolling, or resizing a window. Given below is a demonstration of debounce.
Example
// JavaScript program to write a debounce Function
// Debounce function
function performdebounce(func, delay) {
let timeout;
return function (...args) {
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
// Function to be debounced
function search(display) {
console.log('Loading for:', display);
}
// Create a debounced version of the search function
const callFunction = performdebounce(search, 1000);
// Perform typing with multiple calls to the
debounced function
callFunction('Welcome');
callFunction('To, ');
callFunction('Welcome to Tpoint Tech'); // Only this call will trigger after 1000ms
Output
Loading for: Welcome to Tpoint Tech
Project Challenge in JavaScript
Projects are essential to sharpen your skills in programming. The Following are the important projects that can enhance your knowledge in the JavaScript programming language.
Beginner Level Projects
1) Basic Calculator: Building a calculator to perform the basic mathematical functions using HTML, CSS, and JavaScript is a very good project for beginners. This project will enhance both your technical and logical skills. The HTML file will set up the structure for building a calculator. The CSS file will add style and fonts for buttons and display the result on the screen in the calculator. All the logical operation functions will be written in the JavaScript file to perform the mathematical operations in the Calculator.
2) Digital Clock: Building a digital clock using JavaScript will give you an experience of how to perform logical operations through programming. In this project, you are going to use an HTML file, which is a container storing both the CSS and JavaScript files, and data for displaying the digital clock. The CSS file will give the outline to the body created by the HTML file, and JavaScript will perform all the logical operations, like displaying the updated date and time.
3) Weather App: Building a weather app in JavaScript is also a very good project for beginners, as while building this project, you will learn how to fetch APIs and use the core concepts of the JavaScript programming language, like promises, asynchronous functions, and API handling. In this project, writing an HTML file includes DOCTYPE, head, and body. The CSS file will give the outline and layout to the body(application).
The JavaScript file will contain the required APIs to fetch the weather data using the OpenWeather API. In the JavaScript file, you will manipulate the DOM(document.querySelector()) for displaying the additional information like city name, accurate data , and time, etc.
Intermediate Level Projects
1) Build your own Responsive Portfolio
This project is an intermediate level because you need to take care of a lot of things while creating a responsive website. The website will be responsive if it can be run on any device, whether the device is a laptop, tablet, or mobile. Building a portfolio will require writing an advanced HTML and CSS file. The code written in the JavaScript file will make the website responsive, enable the dark mode, and add other features like a form-filling page for storing the data in a database.
2) E-Commerce Website
Building an E-Commerce website requires the use of a framework that can set up an online store where you can add items to your cart, see the billing, amount after the discount is applied to a certain product. Working on these kinds of projects, where you need to add more functionality to your application, will give you a valuable experience and also help you in cracking the coding interview. While working on these kinds of projects, you will learn array manipulation, local storage, and DOM rendering.
3) Tic Tac Toe Game
Building a game using HTML, CSS ,and JavaScript requires applying logical thinking while writing the code for building a game, as you need to handle the different conditions of input and generate the output as per the rules in the game, like displaying the winner. This project will strengthen your core concept of JavaScript, understanding the game logic, and writing algorithms as per the rules of the game. Working on these kinds of projects will set the foundation for working on big projects.
Conclusion
This article describes the coding challenges that help you sharpen your technical skills, strengthen the core concept of the JavaScript programming language, handle the different conditions like loops, array manipulation, DOM rendering, Event handling, asynchronous, and await function. This article also explains the importance of building a project that you can add to your resume, which will help a lot in an interview.
I hope this article has provided you a valuable information about JavaScript. If you are looking for more such kind of articles, I suggest you visit the Tpoint Tech Website, where you can get various articles in programming along with interview questions, working codes, and an online compiler where you can run and test your code.