Useful JavaScript Code Snippets for Common Problems 😎

Tabassum Khanum - Dec 25 '21 - - Dev Community

Hey Coders!
JavaScript is one of the widely used languages in Web Development. A broad and vital ecosystem has evolved around JS, offering tons and tons of frameworks and libraries that help you develop applications faster. At the same time, it made our coding experience a little complicated. Sometimes it’s good to take a step back and try to understand how to do things without a library. In this article, we will be going through some JS snippets which will provide a little help with those repetitive, simple tasks that come up each day.

1. Sort an array

//strings
const names = ["Seema", "Rekha", "Jaya"];
names.sort();
//['Jaya', 'Rekha', 'Seema' ]

//Numbers
const numbers = [101, 8, 87];
numbers.sort((a, b) => {
  return a - b;
});
//[ 8, 87, 101 ]
Enter fullscreen mode Exit fullscreen mode

2. Select a random element

const items = ["Ball", "Bat", "Cup"]
const randomIndex = Math.floor(Math.random()*items.length)
items[randomIndex]
Enter fullscreen mode Exit fullscreen mode

3. Reverse a string

function reverseString(string) {
       return string.split(" ").reverse().join(" ")
}

revereseString("Random String")
Enter fullscreen mode Exit fullscreen mode

4. Check if element has a class

const element = document.querySelector("#element")
element.classList.contains("active")
Enter fullscreen mode Exit fullscreen mode

5. String interpolation

const name = "Jaya"
console.log(`Hi, ${name}. You have ${2 ** 3} new notifications.`}
//Hi, Jaya. You have 8 new notifications.
Enter fullscreen mode Exit fullscreen mode

6. Loop through an array

const cars = ["Ford", "BMW", "Audi" ]
for (let car of cars) {
      console.log(car)
}

/*
Ford
BMW
Audi
*/
Enter fullscreen mode Exit fullscreen mode

7. Get current time

const date = new Date()
const currentTime = 
   `${date.getHours()}:${date.getMintues()}:${date.getSeconds()}`

console.log(currentTimes)
//example output: "22:16:41"
Enter fullscreen mode Exit fullscreen mode

8. Replace part of a string

const string = "You are awesome."
const replacedString = string.replace("You", "We")

console.log(replacedString) //Output: "We are awesome"
Enter fullscreen mode Exit fullscreen mode

9. Destructing variable assignment

let profile = ['bob', 34, 'carpenter'];
let [name, age, job] = profile;
console.log(name);
// bob
Enter fullscreen mode Exit fullscreen mode

10. Using the spread operator

let data = [1,2,3,4,5];
console.log(...data);
//  1 2 3 4 5
let data2 = [6,7,8,9,10];
let combined = [...data, ...data2];
console.log(...combined);
// 1 2 3 4 5 6 7 8 9 10
console.log(Math.max(...combined));
// 10
Enter fullscreen mode Exit fullscreen mode

11. Return [Number] Maximum Elements From an Array

const maxElement = ( array, number = 1 ) => [...array].sort(( x,y ) => y - x).slice(0, number);

//Example 
maxElement ([ 1,2,3,4,5]);  // [5]
maxElement([ 6, 7, 8, 9 , 10, 10] , 2);   // [10,10]
Enter fullscreen mode Exit fullscreen mode
. . . . . . . . . . . . . . . . . . . . . . . .